与一些CSS圆圈

我需要让子弹指出这样的：与一些CSS圆圈

我试图想的东西如何做到这一点，但我能想到的唯一的事情就是在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; 
}

来源

2016-08-11 KrMa

正是你尝试已经是什么？这应该是一个'ul'-或'ol'元素还是别的？ – insertusernamehere

谢谢你的回答。我在那里快一点点。我编辑了我的问题，并发布了我尝试过的代码，但这并不是我想要的方式。这真的是我的一面。： - /但是，最好的是用ul和li标签。 – KrMa

有很多实现这一方案。这里有一个：

创建一个列表（ul或ol），并删除列表样式（list-style: none;）
初始化一个计数器：在每个项目counter-reset: section;
增加计数器和使用伪元素进行打印（ :before）：content: counter(section); counter-increment: 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>

进一步阅读

演示

Try before buy

来源

2016-08-11 15:28:48 insertusernamehere

看起来完全完美。非常感谢：） – KrMa

你可以做出头如下：

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-radius: 50%; 
    width: 25px; 
    height: 25px; 
    padding: 8px; 
    background: #fff; 
    border: 1px solid #000; 
    color: #000; 
    text-align: center; 
    font-size: 20px; 
}

来源

2016-08-11 15:32:45

与一些CSS圆圈

回答

相关问题