Menu pull-down
Pernyataan Khusus: Karena efek interaksi dari komponen Bootstrap adalah semua berdasarkan plugin yang ditulis oleh perpustakaan jQuery, Anda harus terlebih dahulu memuat jQuery.min.js sebelum menggunakan bootstrap.min.js untuk menghasilkan efek.
<Div> <Tombol Tipe = "Tombol" ID = "DropDownMenu1" Data-koggle = "Dropdown"> Menu Dropdown <span> </span> </button> <ul role = "menu" aria-laBelledby = "dropdownmenu1"> <li role = "presentasi"> <a role = "menuMem" tabindex = "-1" li lia = "#"#"#"#"#" <"#"#"#" <"#"#"<"#"<"#"#" liat "#" lia = "lia"#"lia =" hr lion " Role = "Presentation"> <a Role = "MenuUtem" TabIndex = "-1" href = "#"> item menu dropdown </a> </li> <role = "presentasi"> <a role = "menuUtem" Tabindex = "-1" href = "#"> item menu </a> </ax = "" tespe = "href ="#"> Menu drop-down </a> </li> <" Lix = "HREF ="#" href = "#"> item menu drop-down </a> </li> </ul> </div> <!-jQuery harus diimpor sebelum bootstrap, yang terakhir diimplementasikan berdasarkan yang pertama-> <skrip src = "http://libs.baidu.com/jQuery/1.0/jquery.js" </script> </script> </script> </jeps. src = "// maxcdn.bootstrappcdn.com/boottrap/3.2.0/js/boottrap.min.js"> </script>
Gambar reproduksi:
Prinsip Implementasi:
Pada awalnya, ada tampilan: tidak ada di kelas; Lihatlah CSS di bawah ini
.dropdown-menu {position: absolute;/*Tetapkan posisi absolut, relatif terhadap elemen induk div.dropdown*/atas: 100%;/*Biarkan item menu dropdown di bagian bawah item menu induk. Jika elemen induk tidak mengatur posisi relatif, elemen relatif terhadap elemen tubuh*/kiri: 0; z-index: 1000;/*Setel item menu dropdown tidak dicakup oleh elemen lain*/Tampilan: tidak ada;/*Sembunyikan item menu dropdown dengan default*/float: kiri; min-width: 160px; Padding: 5px 0; margin: 2px: 2px; 160px; Padding: 5px 0; margin: 2px: 2px: 16px; tidak ada; latar belakang-warna: #fff; latar belakang klip: padding-box; perbatasan: 1px solid #ccc; perbatasan: 1px solid rgba (0, 0, 0, .15); perbatasan-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba (0, 0, 0,. .175);}Kemudian gunakan acara klik untuk mengontrol penghapusan dan penambahan kelas tag untuk mencapai tampilan dan sembunyikan
Melalui teknologi JS, tambahkan atau hapus nama kelas "Buka" ke wadah induk "Div.dropdown" untuk mengontrol tampilan atau menyembunyikan menu drop-down. Yaitu secara default,
"Div.dropdown" tidak memiliki nama kelas "Open". Ketika pengguna mengklik untuk pertama kalinya, nama kelas "Buka" akan ditambahkan ke nama kelas "Buka"; Ketika pengguna mengklik lagi, nama kelas "Buka" di wadah "Div.DropDown" akan dihapus lagi. Kita dapat melihat seluruh proses melalui firebug browser:
Bawaan:
Pengguna mengklik untuk pertama kalinya:
Pengguna mengklik lagi:
Buka CSS
.open> .dropdown-menu {display: block;}Tarik menu split line
Mari kita lihat contoh di atas, lalu tempel kode! Lihatlah efeknya, Anda masih perlu memperkenalkan file JS! Tidak banyak hal sesudahnya!
<Div> <Tombol Tipe = "Tombol" ID = "DropDownMenu1" Data-koggle = "Dropdown"> Menu Dropdown <span> </span> </button> <ul role = "menu" aria-laBelledby = "dropdownmenu1"> <li role = "presentasi"> <a role = "menuMem" tabindex = "-1" li lia = "#"#"#"#"#" <"#"#"#" <"#"#"<"#"<"#"#" liat "#" lia = "lia"#"lia =" hr lion " role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation"><a Role = "MenuUtem" TabIndex = "-1" href = "#"> Item menu tarik ke bawah </a> </li> </ul> </div>
Gambar reproduksi:
Sebenarnya, ada satu baris kode lagi
<Li Role = "Presentasi"> </li>
Judul Menu Turunan Menu
Langsung unggah kode
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown Menu<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation">Part 1 Menu Header</li><li role="presentation"><a role="menuitem" tabindex="-1" href = "#"> item menu dropdown </a> </li> <rance = "presentasi"> <a role = "menuUtem" tabindex = "-1" href = "#"> item menu dropdown </a> </li> <li> <li role = "presentasi"> <ran = "MenuUitem" tabindex = "-1" href = "href ="> <a rane = "menu </a." role="presentation"></li><li role="presentation">Part 2 Menu Header</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu Item </a> </li> <rance = "presentasi"> <a role = "menuUtem" tabIndex = "-1" href = "#"> item menu drop-down </a> </li> </ul> </div>
Gambar reproduksi:
Faktanya, hanya ada satu kode yang ditambahkan:
<Li Role = "Presentasi"> Header Menu Bagian 2 </li>
Penyelarasan menu pull-down
<h4> Gunakan kelas tarik-hak untuk menyelaraskan menu drop-down dengan sisi kanan wadah induk </h4> <div style = "float: left;"> <tombol type = "tombol" id = "dropDownMenu1" data-kilat = "dropdown">
Menu pull-down
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu Item </a> </li> <rance = "presentasi"> <a role = "menuUtem" TabIndex = "-1" href = "#"> item menu tarik ke bawah </a> </li> <role = "presentasi"> <a role = "liuTem" TabIndex = "-1" href = "#"#"> Liu <" Liu> <"Li =" LIBID <"LiN> <" Li = "LIBOT/LIBOT <" LIBOT = "LiR =" LiR = "LiR =" LiR = "LiR =" role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu items</a></li></ul></div><br /><br /><h4>Use the dropdown-menu-right class to align the dropdown menu with the right side of the parent container</h4><div style="float: left;"><button type="button" id = "dropdownMenu1" data-kilat = "dropdown">
Menu pull-down
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu Item </a> </li> <rance = "presentasi"> <a role = "menuUtem" TabIndex = "-1" href = "#"> item menu tarik ke bawah </a> </li> <role = "presentasi"> <a role = "liuTem" TabIndex = "-1" href = "#"#"> Liu <" Liu> <"Li =" LIBID <"LiN> <" Li = "LIBOT/LIBOT <" LIBOT = "LiR =" LiR = "LiR =" LiR = "LiR =" Role = "Presentation"> <A Role = "MenuUtem" TabIndex = "-1" href = "#"> item menu drop-down </a> </li> </ul> </div> <br/> <r/> <h4> menu drop-down; "KULID" KULID = "ID =" KULID "KUCKED" KULID "KULID" KULID "KULID" KULID "KULIP;" data-kilat = "dropdown">
Menu pull-down
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu Item </a> </li> <rance = "presentasi"> <a role = "menuUtem" TabIndex = "-1" href = "#"> item menu tarik ke bawah </a> </li> <role = "presentasi"> <a role = "liuTem" TabIndex = "-1" href = "#"#"> Liu <" Liu> <"Li =" LIBID <"LiN> <" Li = "LIBOT/LIBOT <" LIBOT = "LiR =" LiR = "LiR =" LiR = "LiR =" Role = "Presentation"> <A Role = "MenuUtem" TabIndex = "-1" href = "#"> item menu drop-down </a> </li> </ul> </div>
Sebenarnya, tambahkan nama kelas "tarik-kanan" atau "dropdown-menu-right" di "dropdown-menu", di mana kode gaya CSS
.dropdown-menu.pull-right {kanan: 0; kiri: auto;}. dropdown-menu-right {kanan: 0; kiri: auto;}Menu pull-down (status item menu)
Status default item menu drop-down (tidak ada pengaturan) memiliki status yang ditangguhkan (: hover) dan status fokus (: fokus)
Selain dua negara bagian di atas, item menu drop-down juga memiliki keadaan saat ini (.Active) dan status yang dinonaktifkan (.disabled).
<Div> <Tombol Tipe = "Tombol" ID = "DropDownMenu1" Data-koggle = "Dropdown"> Menu Dropdown <span> </span> </button> <ul role = "menu" aria-laBelledby = "dropdownmenu1"> <li role = "presentasi"> <a role = "menuMem" tabindex = "-1" li lia = "#"#"#"#"#" <"#"#"#" <"#"#"<"#"<"#"#" liat "#" lia = "lia"#"lia =" hr lion " role="presentation"><a role="menuitem" tabindex="-1" href="#">Dropdown Menu Item</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Drop down menu item</a></li><li role="presentation"></li><li role="presentation"><a Role = "MenuUtem" TabIndex = "-1" href = "#"> Item menu tarik ke bawah </a> </li> </ul> </div>
Letakkan mouse di atasnya dan tanda terlarang akan ditampilkan pada yang dinonaktifkan. Tangkapan layar tidak dapat dimasukkan!
Tombol (grup tombol)
Penggunaan tombol tunggal di halaman web terkadang tidak memenuhi kebutuhan bisnis kami. Kita sering melihat beberapa tombol digabungkan bersama -sama, seperti satu set tombol ikon kecil di editor teks yang kaya.
<Div> <typon type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "> <pan> </span> </tombol <button> <button type =" "> </span> </span> </button> <button type =" "> </span> </span> </tombol <button> <button type =" "> </span> </span> </button <button> <button type =" "> </span> </span> </buttom type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type = "Tombol"> <span> </span> </button> <tombol type = "Tombol"> <span> </span> </button> </div>
Gambar reproduksi:
Di sini Anda dapat menghasilkan tombol ikon yang berbeda sesuai dengan ikon yang berbeda! Anda dapat melihatnya di situs web ini: http://getbootstrap.com/components/#glyphicons
Tombol (bilah alat tombol)
Dalam editor teks yang kaya, grup grup grup bersama -sama, seperti menyalin, memotong dan menempel grup; Left-Align, Middle-Align, Right-Align, dan Akhir-Salign A Group, seperti yang ditunjukkan pada gambar di bawah ini:
Kemudian bilah alat bingkai Bootstrap juga menyediakan metode pembuatan seperti itu. Anda hanya perlu menempatkan grup tombol "BTN-Group" dalam grup dalam wadah besar "BTN-Toolbar", seperti yang ditunjukkan di bawah ini:
<Div> <div> <tombol type = "Tombol"> <span> </span> </button> <tombol type = "tombol"> <span> </span> </button> <typeT = "Tombol"> <span> </span> </button> </div> <Div> <tombol type type = "Tombol"> <span> </span> </button> </div> <div> <tombol type = "Tombol"> <span> </span> </button> </div> <div> <tombol type = "Tombol"> <span> </span> </button> </tombol> </tombol> </tombol> <button> </tombol> </tombol> </tombol> </Div type = "Tombol"> <span> </span> </button> <button> </button> <button> <tombol type = "tombol"> <span> </span> </button> <tombol type = "tombol"> <span> </span> </button> </div> <Div> <tombol type = "Tombol"> <span> </span> </Div> <Div> <tombol type = "Tombol"> <span> </span> </Div> <Div> <tombol type = "Tombol"> <span> </span> </Div>
Gambar reproduksi:
Set ikon kedua pada gambar ditambahkan dengan kelas:
BTN-GROUP-LG: grup tombol besar
BTN-GROUP-SM: Grup Tombol Kecil
BTN-GROUP-XS: Grup tombol Ultra-Small
Cukup tambahkan nama kelas yang sesuai ke nama kelas ".btn-group" untuk mendapatkan grup tombol dari berbagai ukuran.
Tombol (pengelompokan bersarang)
Sering kali, kami sering mengatur menu drop-down dan grup tombol biasa untuk mencapai efek yang mirip dengan menu navigasi.
Saat menggunakannya, Anda hanya perlu mengubah wadah yang awalnya membuat "dropdown" dari menu dropdown menjadi "BTN-Group" dan menempatkannya pada level yang sama dengan tombol biasa.
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profil </a> </li> <li> <a href = "##"> Budaya perusahaan </a> </li> <li> <a href = "##"> Struktur organisasi </a> </li> <li> </Div = "##"> Layanan Pelanggan </a> </li> </ul> </Div> </Div>
Gambar reproduksi:
Tombol (pengelompokan vertikal)
Dalam contoh yang terlihat sebelumnya, grup tombol ditampilkan secara horizontal. Tetapi dalam penggunaan aktual, efek tampilan vertikal akan selalu ditemui. Gaya ini juga disediakan dalam kerangka bootstrap. Kita hanya perlu mengubah nama kelas "BTN-Group" dari pengelompokan horizontal menjadi "btn-group-vertikal"
<div><button type="button">Home</button><button type="button">Product Display</button><button type="button">Case Analysis</button><button type="button">Contact Us</button><div><button data-toggle="dropdown" type="button">About us<span></span></button><ul><li><a href="##">Company Profil </a> </li> <li> <a href = "##"> Budaya perusahaan </a> </li> <li> <a href = "##"> Struktur organisasi </a> </li> <li> </Div = "##"> Layanan Pelanggan </a> </li> </ul> </Div> </Div>
Gambar reproduksi:
Tombol (Tombol Equal)
Efek dari tombol segmen yang sama sangat praktis pada terminal seluler. Seluruh lebar grup tombol adalah 100% dari wadah, dan setiap tombol dalam grup tombol membagi seluruh lebar wadah. Misalnya, jika Anda memiliki lima tombol dalam grup tombol, maka setiap tombol adalah lebar 20%, jika ada empat tombol, maka setiap tombol adalah lebar 25%, dan seterusnya.
Tombol penyetaraan juga sering disebut tombol pengelompokan adaptif. Metode implementasi juga sangat sederhana. Anda hanya perlu menambahkan nama kelas "btn-group-dibenarkan" ke grup tombol "BTN-group" seperti yang ditunjukkan di bawah ini:
<div> <div> <a href = "#"> home </a> <a href = "#"> tampilan produk </a> <a href = "#"> analisis kasus </a> <a href = "#"> hubungi kami </a> </div> </div>
Ubah lebar layar
Pernyataan Khusus: Saat membuat grup tombol alikuot, silakan coba gunakan elemen tag <a> untuk membuat tombol, karena saat menggunakan elemen tag <button>, menggunakan Tampilan: Tabel tidak ramah untuk mendukungnya di beberapa browser.
Segitiga ke atas dari tombol
Segitiga ke bawah dari tombol, kami menambahkan elemen label "" ke label dan beri nama "Caret":
Terkadang menu drop-down kami akan muncul (bagian berikutnya akan memperkenalkannya). Pada saat ini, arah segitiga kami perlu ditampilkan ke atas. Metode Implementasi: Anda perlu menambahkan nama kelas "dropup" ke kelas ".btn-group" (ini juga nama kelas yang akan digunakan untuk menu drop-down pop-up ke atas).
<Div> <tombol data-kilat = "dropdown" type = "Tombol"> Menu drop-down tombol <span> </span> </button> <ul> <li> <a href = "##"> item menu drop-down tombol </a> </li> <a href = "##"> Tombol menu turunan </a> </Li> <a href = "##"> Menu drop-down #er </a> </Li> <a a href = "##"> Tombol menu town-down </a> </li> <a href = "##"> Tombol T-DOWN-DOW-DOWN </a> </Li> <a href = "##"> TOTBOCT TOMPLOWTICE </A> </Li> <a href = "##" Item </a> </li> </ul> </div>
Gambar reproduksi:
Navigasi (gaya dasar)
Navigasi tidak asing bagi orang front-end. Dapat dikatakan bahwa navigasi adalah salah satu elemen penting dari sebuah situs web, yang dapat memfasilitasi pengguna untuk menemukan berbagai layanan fungsional yang disediakan oleh situs web. Metode navigasi juga sangat beragam dan beragam.
Bilah navigasi terutama dibuat dalam kerangka bootstrap melalui gaya ".nav". Gaya ".nav" default tidak memberikan gaya navigasi default. Gaya lain harus dilampirkan agar efektif, seperti "tab-tab", "nav-pills", dll. Misalnya, ada contoh bilah navigasi tab di editor kode di sebelah kanan. Metode implementasinya adalah menambahkan dua gaya kelas ke tag UL.NAV dan NAV-tabs.
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Navigasi (navigasi tab berbentuk tag)
Navigasi berbentuk tag, juga dikenal sebagai navigasi tab. Terutama ketika banyak konten ditampilkan dalam potongan, sangat cocok untuk menggunakan tab ini untuk mengelompokkannya.
Navigasi berbentuk tag diimplementasikan melalui gaya "Tab Navs". Saat membuat navigasi berbentuk tag, Anda perlu menambahkan nama jenis ini ke navigasi asli "nav"
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Bahkan, efek dari contoh di atas tidak konsisten dengan efek tab yang biasanya kita lihat. Secara umum, tab mengajarkan pilihan saat ini. Bahkan, kerangka kerja bootstrap juga disediakan. Misalkan kita ingin item "beranda" menjadi item yang saat ini dipilih, cukup tambahkan nama kelas "class =" Active "" ke tagnya.
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Selain item saat ini, beberapa tab juga memiliki keadaan cacat. Untuk mencapai efek ini, Anda hanya perlu menambahkan "class =" dinonaktifkan "" ke item tag:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Navigasi (pil) navigasi)
Navigasi bentuk kapsul (pil) terdengar agak canggung karena terlihat agak seperti bentuk kapsul. Tapi itu lebih seperti navigasi massa yang biasanya kita lihat. Item saat ini disorot dengan efek sudut bulat. Metode implementasi mirip dengan "NAV-tab". Dengan struktur yang sama, Anda hanya perlu mengganti nama kelas "nav-tab" dengan "nav-pills":
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Sama seperti yang disebutkan di atas!
Navigasi (navigasi bertumpuk vertikal)
Dalam penggunaan aktual, selain navigasi horizontal, ada juga navigasi vertikal, seperti tombol pengaturan vertikal yang diperkenalkan sebelumnya. Membuat navigasi tumpukan vertikal hanya membutuhkan penambahan nama kelas "bertumpuk" berdasarkan "nav-pills"
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Di bagian menu drop-down, ada pembagi antara grup menu drop-down dan grup. Bahkan, navigasi tumpukan vertikal juga memiliki efek ini, Anda hanya perlu menambahkan "
" Hanya:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Navigasi adaptif (use)
Navigasi adaptif mengacu pada navigasi yang menempati seluruh lebar wadah, dan item menu dapat beradaptasi dengan lebar seperti sel tabel. Navigasi adaptif sama dengan grup tombol adaptif yang dibuat menggunakan "BTN-group-dibenarkan". Hanya saja ketika membuat navigasi adaptif, nama kelas lain "Nav-dibenarkan". Tentu saja, ia perlu digunakan dengan "Tab Navs" atau "Nav-Pills". menyukai:
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href = "##"> responsif </a> </li> </ul>
Gambar reproduksi:
Ini adalah layar yang berbeda
Navigasi ditambah menu pull-down (navigasi sekunder)
Contoh sebelumnya adalah tentang menggunakan kerangka bootstrap untuk membuat navigasi tingkat pertama, tetapi dalam banyak kasus, efek navigasi tingkat kedua tidak dapat dipisahkan dari halaman web. Maka lebih mudah untuk membuat navigasi sekunder dalam kerangka bootstrap. Perlakukan saja Li sebagai wadah induk, gunakan nama kelas "dropdown", dan sarang daftar lain di LI, dan gunakan metode yang diperkenalkan di menu drop-down sebelumnya:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" data-koggle = "dropdown"> tutorial <span> </span> </a> <ul> <li> <a href = "##"> css3 </a> </li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> responsif </a> </li> </li> <li> <a href = "##"> tentang kami </a> </li> <li> <a href = "##"> tentang kami </a> </Li> <li> <a href = "##"> tentang kami </a> </Li> <a> <a href = "##"> tentang kami </a> </Li> <a> <a href = "##"> tentang kami </a> </Li> <a>
Gambar reproduksi:
Melalui alat debugging browser, tidak sulit untuk menemukan bahwa dengan mengklik item menu dengan navigasi sekunder, nama kelas "buka" akan ditambahkan secara otomatis. Mengklik lagi akan menghapus nama kelas "buka" yang ditambahkan dan prinsip implementasi menu tarik-turun adalah sama!
Kemudian, saat menggunakan garis pemisah dalam navigasi sekunder, Anda hanya perlu menambahkan tag kosong seperti "<Li class =" nav-divider "> </li>".
Navigasi remah roti
Remah roti umumnya digunakan untuk navigasi, dan fungsi utamanya adalah untuk memberi tahu pengguna lokasi halaman saat ini (lokasi saat ini)
<Ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> buku saya </a> </li> <li> "diilustrasikan css3" </li> </ol>
Gambar reproduksi: