gpt4 book ai didi

html - 此设计的标记和 CSS 样式创意

转载 作者:行者123 更新时间:2023-11-28 17:14:03 26 4
gpt4 key购买 nike

我正在创建一个作品集页面,我非常喜欢这个设计,但我不确定如何处理标记,更具体地说,每个作品条目前面的蓝色列表点的 CSS 样式。

编辑:我真正遇到麻烦的部分是出现在每个工作条目前面的“蓝点”。我在 ul 上将蓝线作为 border-left,然后认为我可以将 li 列表样式的元素符号作为点,但我无法完成。

enter image description here

    #work {
margin: 40px;
}

#work .job p:first-child {
font-weight: bold;
}

#work ul {
margin-left: 10px;
border-left: 3px solid #08a1db;
}

.past-experience {
display: flex;
flex-direction: column;
}
      <section id="work">
<h4>Work</h4>
<ul class="past-experience">
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
</ul>
</section>

最佳答案

调整填充和边距,然后使用 ::before::after 伪元素制作您的圆圈。

#work {
margin: 40px;
}

#work .job p:first-of-type {
font-weight: bold;
margin: 0 0 .5em;
line-height: 1;
}

.job p {
margin: 0 0 1.5em;
line-height: 1.4;
}

.job p:last-child {
border-bottom: 1px solid grey;
padding-bottom: 1.5em;
margin: 0;
}

#work ul {
padding: 0;
margin-left: 15px;
}

.past-experience {
display: flex;
flex-direction: column;
}

.job {
list-style: none;
position: relative;
border-left: 3px solid #08a1db;
padding: 0 0 0 25px;
}

.job:not(:last-child) {
padding-bottom: 25px;
}

.job::after {
width: 10px; height: 10px;
transform: translate(calc(-50% - 1.5px),100%)
}

.job::before {
width: 30px; height: 30px;
opacity: .5;
transform: translate(calc(-50% - 2px),0);
}

.job::before, .job::after {
content: '';
position: absolute;
top: -10px; left: 0;
border-radius: 50%;
background: #08a1db;

}
<section id="work">
<h4>Work</h4>
<ul class="past-experience">
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
<li class="job">
<div class="visual-separator"></div>
<p>Web Development Consulting/Studies</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
</li>
</ul>
</section>

关于html - 此设计的标记和 CSS 样式创意,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44709627/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com