HTML和CSS中的响应式齿轮(齿轮)

6yoyoihd  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(100)

我正在做一个响应式布局，我有一个段落响应齿轮的问题，在这里你可以看到我所说的https://justidea.vercel.app
调整浏览器大小，您将看到问题，问题是因为使用了绝对位置。
有人能推荐任何其他的解决方案，使CSS齿轮这些圆圈段落的React？

html {
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

.mainsection {
  width: 100%;
  height: 1160px;
  background-color: #ffffff;
}

.mainsection h1 {
  color: #2f2f2f;
  text-align: center;
  margin-top: 70px;
  font-size: 33px;
  font-weight: bold;
  font-family: 'Hind', sans-serif;
}

.mainsection p {
  color: #80868c;
  text-align: center;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin-top: 25px;
}

.little_circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #F4F7F9;
  position: relative;
  border: 2px solid #707070;
}

#little_one {
  bottom: 17em;
  left: 76em;
  background: url("Inteligentny\ obiekt\ wektorowy-1.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_one p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -96px;
  text-decoration: none;
  position: absolute;
  top: 20px;
  left: 190px;
}

#little_two {
  bottom: 22em;
  left: 38em;
  background: url("Inteligentny\ obiekt\ wektorowy-3.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_two a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -210px;
  text-decoration: none;
}

#little_three {
  bottom: 18em;
  left: 40em;
  background: url("Inteligentny\ obiekt\ wektorowy-7.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_three p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -300px;
  text-decoration: none;
}

#little_four {
  bottom: 23em;
  left: 74em;
  background: url("Inteligentny\ obiekt\ wektorowy-6.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_four p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -219px;
  text-decoration: none;
  position: absolute;
  left: 310px;
}

#little_five {
  bottom: 855px;
  left: 1060px;
  background: url("Inteligentny\ obiekt\ wektorowy-11.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_five p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -164px;
  text-decoration: none;
  position: absolute;
  left: 270px;
  top: 15px;
}

#little_six {
  bottom: 51em;
  left: 73em;
  background: url("Inteligentny\ obiekt\ wektorowy-10.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_six p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -249px;
  text-decoration: none;
  position: absolute;
  left: 350px;
  top: 6px;
}

#little_seven {
  bottom: 66em;
  left: 57em;
  background: url("Inteligentny\ obiekt\ wektorowy-12.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_seven p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -92px;
  text-decoration: none;
  position: absolute;
  top: -50px;
  left: 87px;
}

#little_eight {
  bottom: 68em;
  left: 48em;
  background: url("Inteligentny\ obiekt\ wektorowy-9.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_eight p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -250px;
  text-decoration: none;
}

#little_nine {
  bottom: 66em;
  left: 41em;
  background: url("Inteligentny\ obiekt\ wektorowy-2.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_nine p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -350px;
  text-decoration: none;
}

#little_ten {
  bottom: 46em;
  left: 48em;
  background: url("Inteligentny\ obiekt\ wektorowy-8.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_ten p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -400px;
  text-decoration: none;
}

#little_eleven {
  bottom: 49em;
  left: 57em;
  background: url("Inteligentny\ obiekt\ wektorowy-11.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_eleven p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: 255px;
  text-decoration: none;
}

#little_twelve {
  bottom: 56em;
  left: 67em;
  background: url("Inteligentny\ obiekt\ wektorowy-5.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#little_twelve p a {
  color: #2F2F2F;
  font-size: 16px;
  font-family: 'Hind', sans-serif;
  margin-left: -270px;
  position: absolute;
  top: 120px;
  text-decoration: none;
}

.cogwheel img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 198px;
}

.second-section-form {
  width: 100%;
  height: 630px;
  background-image: url("img2.png");
}

.second-section-form h1 {
  padding-top: 40px;
  text-align: center;
  font-size: 30px;
  color: #ffffff;
  font-family: 'Hind', sans-serif;
  font-weight: bold;
}

.second-section-form p {
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  margin-top: 15px;
}

input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  resize: vertical;
}

.container {
  border-radius: 5px;
  padding: 20px;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.col-33 {
  float: left;
  width: 33.3%;
  margin-top: 6px;
  padding: 0px 0px 0px 10px;
}

.col-100 {
  float: left;
  width: 100%;
  margin-top: 6px;
  padding-left: 10px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 960px) {
  .form input {
    margin: 0px 0;
  }
  input[type=submit] {
    width: 95%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .container-checkbox {
    margin-left: 15px;
  }
}

.form {
  flex-direction: column;
  align-items: stretch;
}

.container-checkbox {
  color: #ffffff;
  display: table;
  margin: 0 auto;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  border-radius: 5px;
}

.blue-span {
  color: #35A8E0;
}

.btn {
  width: 165px;
  height: 50px;
  background-color: #35a8e0;
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.btn:hover {
  background-color: dodgerblue;
}
<section class="mainsection">
  <h1>Obszary naszych kompetencji</h1>
  <p>Pomagamy uczyć się na błędach innych. Wspieramy i rekomendujemy rozwiązania biznesowe.</p>
  <div class="cogwheel">
    <img src="Grupa 193.png" alt="" class="img-gear">
    <div class="little_circle" id="little_one">
      <p><a href="https://www.w3schools.com">Prawo międzynarodowe</a></p>
    </div>
    <div class="little_circle" id="little_two">
      <p><a href="https://www.w3schools.com">Crowdfunding</a></p>
    </div>
    <div class="little_circle" id="little_three">
      <p><a href="https://www.w3schools.com">Podnoszenie produktywności</a></p>
    </div>
    <div class="little_circle" id="little_four">
      <p><a href="https://www.w3schools.com">Finansowanie handlu międzynarodowego</a></p>
    </div>
    <div class="little_circle" id="little_five">
      <p><a href="https://www.w3schools.com">Dotacje i granty międzynarodowe</a></p>
    </div>
    <div class="little_circle" id="little_six">
      <p><a href="https://www.w3schools.com">Międzynarodowa księgowość, kadry i podatki</a></p>
    </div>
    <div class="little_circle" id="little_seven">
      <p><a href="https://www.w3schools.com">Zarządzanie projektami</a></p>
    </div>
    <div class="little_circle" id="little_eight">
      <p><a href="https://www.w3schools.com">Marketing 360º</a></p>
    </div>
    <div class="little_circle" id="little_nine">
      <p><a href="https://www.w3schools.com">Ubezpieczenia międzynarodowe</a></p>
    </div>
    <div class="little_circle" id="little_ten">
      <p><a href="https://www.w3schools.com">Komercjalizacja własności intelektualnej</a></p>
    </div>
    <div class="little_circle" id="little_eleven">
      <p><a href="https://www.w3schools.com">Nieruchomości</a></p>
    </div>
    <div class="little_circle" id="little_twelve">
      <p><a href="https://www.w3schools.com">Pozyskiwanie inwestorów (M&A)</a></p>
    </div>
  </div>
</section>
<section class="second-section-form">
  <h1>Skontaktuj się z nami</h1>
  <p>Zadzwoń <span class="number">+ 48 535 015 835</span> lub wypełnij formularz.</p>
  <div class="form">
    <div class="container">
      <div class="row">
        <div class="col-33">
          <input type="text" name="firstname" placeholder="Imię i Nazwisko">
        </div>
        <div class="col-33">
          <input type="text" name="firstname" placeholder="Telefon">
        </div>
        <div class="col-33">
          <input type="text" name="firstname" placeholder="E-mail">
        </div>
      </div><br>
      <div class="row">
      </div>
      <div class="row">
        <div class="col-33">
          <input type="text" name="firstname" placeholder="Firma">
        </div>
        <div class="col-33">
          <select name="country">
            <option value="">Ilość pracowników</option>
            <option value="">1</option>
            <option value="">2</option>
          </select>
        </div>
        <div class="col-33">
          <select name="country">
            <option value="">Roczny dochód firmy</option>
            <option value="">100</option>
            <option value="">200</option>
          </select>
        </div>
      </div><br>
      <div class="row">
        <div class="col-100">
          <textarea id="subject" name="subject" placeholder="Wiadomość" style="height:200px"></textarea>
        </div>
      </div>
    </div>
    <label class="container-checkbox">
                <input type="checkbox">
                <span class="checkmark">Zapozanałem(-łam) się z <span class="blue-span">Polityką prywatności</span> oraz
                    z <span class="blue-span">Zastrzeżeniami prawnymi.</span></span>
            </label>
    <input type="submit" value="WYŚLIJ" class="btn">
  </div>
</section>
css

1条答案

按热度按时间
nfeuvbwi

nfeuvbwi1#

我建议对整个'cog'元素使用svg，svg的各个部分可以作为锚点（即链接），如下面的例子所示，从：
https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/

<img width=500 src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Target_Flat_Icon.svg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="arrow" title="arrow" href="https://en.wikipedia.org/wiki/Arrow" coords="363,137,417,111,411,148,418,159,364,190,232,262,225,248,356,175,406,159,451,179,394,208,364,190,369,177,355,175,355,183,359,157" shape="poly">
    <area target="_blank" alt="arrow" title="arrow" href="https://en.wikipedia.org/wiki/Arrow" coords="408,155,8" shape="circle">
  <area target="_blank" alt="bullseye" title="" href="https://en.wikipedia.org/wiki/Bullseye_(target)" coords="227,253,38" shape="circle">
</map>

在您的示例中，文本和链接相对于页面边缘定位（通过bottom、top、left和right属性），因此当您调整页面大小时，它们将不可避免地远离齿轮定位。

赞(0）分享  回复(0）举报  2023-01-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com