gpt4 book ai didi

html - 如何在带有图像的圆圈之间放置线条?

转载 作者:太空宇宙 更新时间:2023-11-04 09:51:13 24 4
gpt4 key购买 nike

我是 HTML 和 CSS 的初学者,所以我决定尝试代码 .psd 布局。不幸的是,我坚持使用那部分布局:

enter image description here

我的意思是带有图像的圆圈之间的线条。这是我的代码:

html {
font-size: 62.5%;
}

body {
width: 1400px;
font-family: "Roboto Slab", serif;
}

section {
padding-right: 230px;
padding-left: 230px;
}

.culture {
padding-top: 100px;
padding-bottom: 100px;
background-color: #f9f9f9;
overflow: auto;
}

h2 {
font-family: "Montserrat", sans-serif;
font-size: 4rem;
color: #222;
text-align: center;
}

.culture p {
color: #777;
text-align: center;
}

.culture > p {
padding-top: 20px;
padding-bottom: 89px;
font-size: 2rem;
}

.value {
float: left;
padding-right: 56px;
}

.line {
width: 170px;
height: 2px;
background-color: #777;
}

.value_img {
width: 91px;
height: 91px;
margin: 0 auto 25px;
border: 2px #777 solid;
border-radius: 100%;
background-repeat: no-repeat;
background-position: center center;
}

.balance {
background-image: url("http://d-k.aq.pl/note.png");
}

.quality {
background-image: url("http://d-k.aq.pl/chart.png");
}

.excellence {
background-image: url("http://d-k.aq.pl/star.png");
}

h3 {
font-family: "Montserrat", sans-serif;
font-size: 1.8rem;
color: #222;
text-align: center;
}

.value p {
padding-top: 20px;
font-size: 1.4rem;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
</head>
<section class="culture">
<h2>
CULTURE &amp; VALUES
</h2>
<p>
Phasellus gravida ex at odio elementum.
</p>
<div class="value">
<div class="value_img balance">

</div>
<h3>
WORK-LIFE BALANCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque
</p>
</div>
<div class="line">

</div>
<div class="value">
<div class="value_img quality">

</div>
<h3>
QUALITY OVER QUANTITY
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
<div class="line">

</div>
<div class="value">
<div class="value_img excellence">

</div>
<h3>
DELIVER EXCELLENCE
</h3>
<p>
Suspendisse ut odio vel felis pulvinar<br>
sodales. Nunc ultricies nibh non velit<br>
feugiat cursus. Phasellus scelerisque.
</p>
</div>
</section>

我应该为它们使用绝对定位吗?

最佳答案

使用 .wrapperpadding 设置所有元素的宽度。

.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}

.item {
border: 3px solid #777;
width: 100px;
height: 100px;
border-radius: 50%;
}
.line {
border: 1px solid #777;
margin: 0 2%;
flex: 1 0;
}
<div class="wrapper">
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
<div class="line"></div>
<div class="item"></div>
</div>

关于html - 如何在带有图像的圆圈之间放置线条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39069092/

24 4 0
文章推荐: java - 如何传入/使用.Class/Object作为方法参数
文章推荐: java - 比较两个字符串,都使用正则表达式
文章推荐: html - 如何在容器内的 div 中居中放置 div?
文章推荐: css - 如何将包装器
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com