與一些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圓圈

回答

相關問題