dddd

Menyesuaikan Pesanan Daftar gaya menggunakan CSS

Penulis: Dynamic Drive

Styling counter nomor secara otomatis dalam daftar memerintahkan (

) dapat menantang. Kode CSS ini menunjukkan salah satu cara untuk melakukannya dengan menyingkirkan yang standarlah pertama, kemudian menggunakan CSS konten yang dihasilkan untuk membuat counter kustom sebagai gantinya. Secara khusus, kita beralih ke CSS dihasilkan counter, dengan menggunakan "sebelum:" elemen semu dan pengaturan konten untuk "counter". Hasilnya adalah counter kustom yang dapat ditata menggunakan semua kekuatan CSS! Gaya kustom bekerja di semua browsers- yang modern IE9 +, FF, Chrome, Safari dll

Dalam demo di bawah ini, masing-masing tingkat OL membawa gaya yang sedikit bervariasi dari yang 'induknya (sampai tingkat 3).

ini adalah daftar 1
ini adalah daftar 1
ini adalah daftar 2
ini adalah daftar 2
ini adalah daftar 3
ini adalah daftar 3
ini adalah daftar 3
ini adalah daftar 3
ini adalah daftar 2
ini adalah daftar 2
ini adalah daftar 1
ini adalah daftar 1
ini adalah daftar 1

<br /> <br /> <style> ol{ list-style: none; counter-reset: li; /* reset counter for ol (li is just arbitrary identifier) */ } ol li{ position:relative; margin-bottom: 10px; /* bottom spacing between lis */ padding: 4px 10px; } ol ol{ margin-top: 1em; /* for nested ols, add top and bottom spacing */ margin-bottom: -10px; } ol > li:before{ /* pseudo element for custom counter */ content:counter(li); /* set its content to CSS generated counter, using the "li" counter defined above */ counter-increment:li; /* increment the li counter each time, assumed starting index is 0 */ text-align: center; display:block; position:absolute; width: 27px; /* width of counter */ height: 27px; /* height of counter */ line-height: 27px; /* set this to same as height value */ font-weight: bold; top: 0; left: -30px; /* shift counter to the left */ background: #452b06; /* background of counter */ color: white; z-index: -1; -moz-box-shadow: 2px 2px 4px gray; /* CSS3 shadows */ -webkit-shadow: 2px 2px 4px gray; box-shadow: 2px 2px 4px gray; } ol ol > li:before{ /* 2nd level custom counter specific style */ background: darkred; border-radius: 8px; } ol ol ol > li:before{ /* 3rd level custom counter specific style */ background: red; border-radius: 27px; } </style><br /> <br />

<br /> <br /> <ol> <li>this is a list 1</li> <li>this is a list 1<br /> <ol> <li>this is a list 2</li> <li>this is a list 2<br /> <ol> <li>this is a list 3</li> <li>this is a list 3</li> <li>this is a list 3</li> <li>this is a list 3</li> </ol> </li> <li>this is a list 2</li> <li>this is a list 2</li> </ol> </li> <li>this is a list 1</li> <li>this is a list 1</li> <li>this is a list 1</li> </ol> <br />

Views:

Tweet

Menyesuaikan Pesanan Daftar gaya menggunakan CSS Penulis: Dynamic Drive Styling counter nomor secara otomatis dalam daftar memerintahkan ( ) dapat menantang. Kode CSS ini menunjukkan salah satu cara untuk melakukannya dengan menyingkirkan yang standarlah pertama, kemudian menggunakan CSS konten yang dihasilkan untuk membuat counter kustom sebagai gantinya. Secara khusus, kita beralih ke CSS dihasilkan counter, dengan menggunakan "sebelum:" elemen semu dan pengaturan konten untuk "counter". Hasilnya adalah counter kustom yang dapat ditata menggunakan semua kekuatan CSS! Gaya kustom bekerja di semua browsers- yang modern IE9 +, FF, Chrome, Safari dll Dalam demo di bawah ini, masing-masing tingkat OL membawa gaya yang sedikit bervariasi dari yang 'induknya (sampai tingkat 3). ini adalah daftar 1 ini adalah daftar 1 ini adalah daftar 2 ini adalah daftar 2 ini adalah daftar 3 ini adalah daftar 3 ini adalah daftar 3 ini adalah daftar 3 ini adalah daftar 2 ini adalah daftar 2 ini adalah daftar 1 ini adalah daftar 1 ini adalah daftar 1 <br /> <br /> <style> ol{ list-style: none; counter-reset: li; /* reset counter for ol (li is just arbitrary identifier) */ } ol li{ position:relative; margin-bottom: 10px; /* bottom spacing between lis */ padding: 4px 10px; } ol ol{ margin-top: 1em; /* for nested ols, add top and bottom spacing */ margin-bottom: -10px; } ol > li:before{ /* pseudo element for custom counter */ content:counter(li); /* set its content to CSS generated counter, using the "li" counter defined above */ counter-increment:li; /* increment the li counter each time, assumed starting index is 0 */ text-align: center; display:block; position:absolute; width: 27px; /* width of counter */ height: 27px; /* height of counter */ line-height: 27px; /* set this to same as height value */ font-weight: bold; top: 0; left: -30px; /* shift counter to the left */ background: #452b06; /* background of counter */ color: white; z-index: -1; -moz-box-shadow: 2px 2px 4px gray; /* CSS3 shadows */ -webkit-shadow: 2px 2px 4px gray; box-shadow: 2px 2px 4px gray; } ol ol > li:before{ /* 2nd level custom counter specific style */ background: darkred; border-radius: 8px; } ol ol ol > li:before{ /* 3rd level custom counter specific style */ background: red; border-radius: 27px; } </style><br /> <br /> <br /> <br /> <ol> <li>this is a list 1</li> <li>this is a list 1<br /> <ol> <li>this is a list 2</li> <li>this is a list 2<br /> <ol> <li>this is a list 3</li> <li>this is a list 3</li> <li>this is a list 3</li> <li>this is a list 3</li> </ol> </li> <li>this is a list 2</li> <li>this is a list 2</li> </ol> </li> <li>this is a list 1</li> <li>this is a list 1</li> <li>this is a list 1</li> </ol> <br />