html – 带有数字的CSS圈子

发布时间：2020-12-14 18:29:13 所属栏目：资源来源：网络整理

导读：我需要制作这样的子弹点：我试着想办法怎么做,但我唯一能想到的就是在photoshop中制作它,并制作一个img src标签.最好的是它是ul和li标签. 有人知道怎么做吗？我尝试过类似的东西,但它无法正常工作： JSFIDDLE HTML a href="abecadlo/"div class="galeria"1

我需要制作这样的子弹点：

我试着想办法怎么做,但我唯一能想到的就是在photoshop中制作它,并制作一个img src标签.最好的是它是ul和li标签.

有人知道怎么做吗？
我尝试过类似的东西,但它无法正常工作：
JSFIDDLE

HTML

<a href="abecadlo/"><div class="galeria">1</div></a>
<a href="abecadlo/"><div class="galeria">2</div></a>
<a href="abecadlo/"><div class="galeria">3</div></a>

CSS

.galeria{
    border-style: solid;
    border-width: 1px;
    border-color: black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    margin-right: 2%;
    display: inline;
}

解决方法

有很多方法可以实现这一点.这是一个：

>创建一个列表(ul或ol)并删除列表样式(list-style：none;)
>初始化计数器：counter-reset：section;
>增加每个列表项的计数器并使用伪元素(：before)打印：content：counter(section);反增量：部分;
>像你想要的那样设置伪元素(：before)

ul {
  counter-reset: section;
  list-style: none;
}

li {
  margin: 0 0 10px 0;
  line-height: 40px;
}

li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
}

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

进一步阅读

> MDN: CSS counters
> MDN: Pseudo-elements

演示

Try before buy

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!