gpt4 book ai didi

html - 使用 html 和 css 的粗体圆形和彩色列表元素

转载 作者:行者123 更新时间:2023-11-28 04:44:29 25 4
gpt4 key购买 nike

我想让我的有序列表加粗圆 Angular 和彩色

我正在使用以下代码行

<html>
<ol>
<li>list1</li>
<li>list2</li>
<li>list3</li>

</ol>

我想在下面的输出中使用粗体和四舍五入的数字

1.列表1

2.list2

3.list3

如何实现?就像附图中一样s

最佳答案

对于初学者,您可以尝试以下操作:

ol {
list-style: none;
padding: 0;
margin: 0;
}

ol li {
counter-increment: my-awesome-counter;
margin: 1rem 0.25rem;
line-height: 40px;
padding-left: 3rem;
}

ol li::before {
display: inline-block;
content: counter(my-awesome-counter);
width: 40px;
height: 40px;
line-height: 40px;
background: #6FB45D;
border-radius: 25px;
color: white;
text-align: center;
margin-right: 0.5rem;
font-size: 24px;
font-weight: 700;
margin-left: -3rem;
}
<ol>
<li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
<li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
<li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>

</ol>

在此处了解有关计数器的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

关于html - 使用 html 和 css 的粗体圆形和彩色列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52847538/

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