Sebuah daftar bernomor dicapai melalui kode HTML dari sebuah "perintah list". Anda tidak perlu khawatir tentang menambahkan HTML, karena editor melakukannya untuk Anda dengan menggunakan alat ini. Jika Anda pergi ke tab HTML, Anda akan melihat bahwa daftar yang Anda buat muncul sesuatu seperti ini:
<ol>Alat ini secara otomatis akan nomor setiap elemen dari daftar mengambil "order", maka nama "memerintahkan daftar di HTML". Dalam setiap elemen nomor berturut-turut dihasilkan (dari 1 dan seterusnya), meskipun Anda tidak dapat melihat ini dalam kode HTML.
<li> Isi dari tanggal 1. elemen </ li>
<li> Isi ke-2. elemen </ li>
<li> Isi dari ke-3. elemen </ li>
<li> Isi 4. elemen </ li>
dll ..
</ Ol>
Menggunakan daftar memerintahkan dalam posting
Membuat daftar bernomor sangat cocok untuk memberikan instruksi apapun. Ini sangat ideal untuk memasak blog di mana langkah-langkah dalam resep harus diberi nomor, atau di blog-blog yang berbagi tutorial ... tetapi dapat digunakan di setiap jenis blog yang perlu nomor sesuatu.
Secara default, ketika menggunakan alat ini, unsur-unsur bernomor akan terlihat seperti:
- Nulla tincidunt, nec neque laoreet iaculis, Tellus libero sagittis nisl, sed commodo Lacus nulla ac sapien.Pellentesque vel magna vitae diam hendrerit bibendum tempus di magna.
- Nulla pellentesque egestas sagittis. Lembaga Pemeringkat Kredit blandit bibendum ante nec placerat.Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi.
- Vivamus duduk amet nibh vel enim Aliquam auctor. Phasellus fringilla eros leo, nec varius Lacus.Vestibulum id dolor sebuah venenatis varius nisl di nec enim. Pellentesque feugiat Arcu ac Purus rhoncus dapibus.
- Etiam rutrum quam ac cursus est bibendum. Dalam porttitor Nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta Quis Lacus. Vivamus non Mauris urna, non commodo dui.
Namun, kita dapat menyesuaikan elemen pada daftar dengan CSS. Untuk mencapai hal ini, kita akan bergantung pada tutorial ini menarik dari 456 Berea ST , yang menjelaskan teknik di mana menggunakan beberapa sifat kunci dari CSS, kita bisa menyesuaikan baik jumlah setiap elemen dalam daftar, juga isi dari setiap elemen.
Caranya pada dasarnya melibatkan membatalkan penomoran standar dengan "list-style: none", dan kemudian menggunakan sifat penomoran otomatis: "kontra-ulang" dan "kontra-kenaikan". Kemudian properti "isi"ditambahkan ke indeks dari meja yang dibuat menggunakan dua sifat sebelumnya.
Contoh
Berikut adalah tiga contoh yang saya siapkan untuk anda yang ingin menyesuaikan nomor daftar dan jika Anda akan menyukai salah satu dari mereka, cukup copy dan paste kode CSS dengan pergi ke Template> Customize> Advanced> Tambah CSS. Tentu saja, kemudian, Anda dapat menyesuaikan warna latar belakang, perbatasan, dll.
Style 1.
- Nulla tincidunt, nec neque laoreet iaculis, Tellus libero sagittis nisl, sed commodo Lacus nulla ac sapien.Pellentesque vel magna vitae diam hendrerit bibendum tempus di magna.
- Nulla pellentesque egestas sagittis. Lembaga Pemeringkat Kredit blandit bibendum ante nec placerat.Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi.
- Vivamus duduk amet nibh vel enim Aliquam auctor. Phasellus fringilla eros leo, nec varius Lacus.Vestibulum id dolor sebuah venenatis varius nisl di nec enim. Pellentesque feugiat Arcu ac Purus rhoncus dapibus.
- Etiam rutrum quam ac cursus est bibendum. Dalam porttitor Nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta Quis Lacus. Vivamus non Mauris urna, non commodo dui.
. Ol pasca-luar {Gaya 2.
kontra-ulang: li;
margin-left: 0;
padding-left: 0
}
. Posting ol li {
position: relative;
margin: 0 0 20px 2em penting;!
padding:! 4px 8px penting;
list-style: none;
* List-style: desimal;
}
. Posting ol li: sebelum {
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 8px-;
kiri: 39px-;
font-family: 'Oswald', serif;
font-size: 40px; / * ukuran font * /
width: 34px;
margin: 0 0 10px 0;
padding: 4px penting;!
color: # 727272; / * warna font * /
text-align: center;
}
- Nulla tincidunt, nec neque laoreet iaculis, Tellus libero sagittis nisl, sed commodo Lacus nulla ac sapien.Pellentesque vel magna vitae diam hendrerit bibendum tempus di magna.
- Nulla pellentesque egestas sagittis. Lembaga Pemeringkat Kredit blandit bibendum ante nec placerat.Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi.
- Vivamus duduk amet nibh vel enim Aliquam auctor. Phasellus fringilla eros leo, nec varius Lacus.Vestibulum id dolor sebuah venenatis varius nisl di nec enim. Pellentesque feugiat Arcu ac Purus rhoncus dapibus.
- Etiam rutrum quam ac cursus est bibendum. Dalam porttitor Nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta Quis Lacus. Vivamus non Mauris urna, non commodo dui.
. Ol pasca-luar {Style 3.
kontra-ulang: li;
margin-left: 0;
padding-left: 0
}
. Posting ol li {/ * style masing-masing elemen * /
position: relative;
margin: 0 0 20px 2em penting;!
padding:! 4px 8px penting;
list-style: none;
* List-style: desimal;
border: 1px solid # e2e3e2; / * warna border * /
background: # f2f2f2; / * warna latar belakang * /
text-indent: 10px;
}
. Posting ol li: sebelum {/ * angka 'gaya * /
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 5px-;
kiri:-5px;
font-family: 'Oswald', serif;
font-size: 14px;
width: 12px;
margin: 0 0 10px 0;
padding: 4px penting;!
color: # 727272; / * warna text * /
text-align: left;
background: # e2e2e2; / * warna latar belakang * /
text-indent: 2px
}
. Posting ol li: setelah {
isi: "";
position: absolute;
top: 5px-;
kiri: 14px;
width: 0px;
height: 0px;
border-style: padat;
border-width: 5px 5px 0 0;
border-color: transparent transparent transparent # aeaeae; / * warna segitiga * /
}
- Nulla tincidunt, nec neque laoreet iaculis, Tellus libero sagittis nisl, sed commodo Lacus nulla ac sapien.Pellentesque vel magna vitae diam hendrerit bibendum tempus di magna.
- Nulla pellentesque egestas sagittis. Lembaga Pemeringkat Kredit blandit bibendum ante nec placerat.Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi.
- Vivamus duduk amet nibh vel enim Aliquam auctor. Phasellus fringilla eros leo, nec varius Lacus.Vestibulum id dolor sebuah venenatis varius nisl di nec enim. Pellentesque feugiat Arcu ac Purus rhoncus dapibus.
- Etiam rutrum quam ac cursus est bibendum. Dalam porttitor Nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta Quis Lacus. Vivamus non Mauris urna, non commodo dui.
. Post ol {Dalam contoh terakhir ini, saya memutuskan untuk menggunakan gambar untuk lingkaran (disorot dengan warna biru) sebagai latar belakang dari nomor tersebut. Kita dapat membuat lingkaran dengan CSS, tetapi akan kuadrat di Internet Explorer 8.
kontra-ulang: li;
margin-left: 0;
padding-left: 0
}
. Posting ol li {
position: relative;
margin: 0 0 13px 2em penting;!
padding:! 4px 8px penting;
list-style: none;
* List-style: desimal;
}
. Posting ol li: sebelum {
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 0;
kiri:-2em;
width: 27px;
margin-right: 8px;
padding:! 3px 1px 4px 0 penting;
color: # fff; / * warna text * /
font-size: 16px;
tidak mengulang-kiri atas;
font-weight: bold;
text-align: center
}
Anyway, di sini saya meninggalkan gambar lain dari lingkaran dengan warna lain yang dapat Anda gunakan jika Anda ingin.
Catatan: Dengan merah menyoroti nilai-nilai yang dapat diedit dalam CSS dari tiga contoh, dan menambahkan beberapa komentar disorot dalam / * hijau * /, sehingga Anda bisa tahu apa setiap hal yang dilakukannya.
Kompatibilitas:
Ini akan bekerja di semua browser termasuk IE8 - dalam kasus Internet Explorer 7, nomor 'gaya tidak akan terlihat karena tidak mendukung: sebelum atau: setelah pseudo-elemen. Namun, saya telah menambahkan baris dalam CSS yang spesifik untuk browser dan akan memunculkan penomoran default dari daftar memerintahkan.
Mudah-mudahan itu akan berguna untuk Anda ;)
Tidak ada komentar:
Posting Komentar