Merhaba arkadaşlar bugün sizlere sıralı liste oluşturmayı göstericem ilk olarak görüntüsünü vereyim

Başlıyalım nedersiniz
Görüntü:

admin kp -> şablon stil -> temanız -> global.css -> gelişmiş mod en alta ekleyin.
buda html kodumuz index veya headere ekleyebilirsiniz.
Kırmızı Sıralı Liste Versyon

global.css ekleyin.
buda html header veya indexe eklenecek
Birazdaha değişik versyonu
bu birazdaha değişik

Buda html

Başlıyalım nedersiniz

Görüntü:

admin kp -> şablon stil -> temanız -> global.css -> gelişmiş mod en alta ekleyin.
Kod:
.rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.rounded-list a:hover{
background: #eee;
}
.rounded-list a:hover:before{
transform: rotate(360deg);
}
.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
buda html kodumuz index veya headere ekleyebilirsiniz.
Kod:
<ol class="rounded-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>
Kırmızı Sıralı Liste Versyon

global.css ekleyin.
Kod:
.rectangle-list a{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle-list a:hover{
background: #eee;
}
.rectangle-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
buda html header veya indexe eklenecek
Kod:
<ol class="rounded-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>
Birazdaha değişik versyonu
bu birazdaha değişik

Kod:
.circle-list li{
padding: 2.5em;
border-bottom: 1px dashed #ccc;
}
.circle-list h2{
position: relative;
margin: 0;
}
.circle-list p{
margin: 0;
}
.circle-list h2:before{
content: counter(li);
counter-increment: li;
position: absolute;
z-index: -1;
left: -1.3em;
top: -.8em;
background: #f5f5f5;
height: 1.5em;
width: 1.5em;
border: .1em solid rgba(0,0,0,.05);
text-align: center;
font: italic bold 1em/1.5em Georgia, Serif;
color: #ccc;
border-radius: 1.5em;
transition: all .2s ease-out;
}
.circle-list li:hover h2:before{
background-color: #ffd797;
border-color: rgba(0,0,0,.08);
border-width: .2em;
color: #444;
transform: scale(1.5);
}
Buda html

Kod:
<ol class="rounded-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>