Navigation BarMenggunakan bar navigasi adalah penting bagi mana-mana laman web.Dengan CSS anda boleh mengubah menu HTML.
Navigation Bar = Senarai PautanA bar navigasi memerlukan HTML standard sebagai asas.
Sila lihat contoh menu bar blog saya, menggunakan CSS membina bar navigasi dari senarai HTML standard.
A bar navigasi pada dasarnya ialah senarai pautan, jadi menggunakan <ul> dan unsur-unsur <li>lihat contoh dibawah:
<ul>
<li> href="#"> Home </ a> </ li>
<li> href="#"> SEO </ a> </ li>
<li> href="#"> Blog Tips</ a> </ li>
<li> href="#"> Video Tutorial </ a> </ li>
<li> href="#"> sitemap</ a> </ li>
</ Ul>
Sekarang mari kita lihat margin dan padding daripada senarai:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
Contoh jelas:senarai-gaya-jenis: - A bar navigasi tidak memerlukan penanda senaraiMenetapkan margin dan padding kepada 0 untuk membuang tetapan lalai pelayarKod dalam contoh di atas adalah kod piawai yang digunakan dalam kedua-dua bar navigasi menegak, dan melintang.
Navigation Bar MenegakUntuk membina sebuah bar navigasi menegak kita hanya perlu gaya unsur-unsur <a>, sebagai tambahan kepada kod di atas:
a
{
display:block;
width:60px;
}
Contoh selanjutnya:paparan: blok - Memaparkan pautan sebagai elemen-elemen blok membuat kawasan pautan diklik keseluruhan (bukan hanya teks), dan ia membolehkan kita untuk menentukan lebarwidth: 60px - elemen Blok mengambil lebar penuh disediakan. Menentukan px lebar 60Tip: Juga lihat navigasi menegak contoh bar bergaya.
Nota: Sentiasa menentukan lebar untuk unsur-unsur <a> di bar navigasi menegak. Jika anda meninggalkan lebar, IE6 boleh menghasilkan keputusan yang tidak dijangka.
Navigation Bar Mendatar
Terdapat dua cara untuk membuat bar navigasi mendatar. Menggunakan navigasi sebaris atau senarai item terapung.
Kedua-dua kaedah sangat mudah, tetapi jika anda mahu keduanya menjadi saiz yang sama, anda perlu menggunakan kaedah yang terapung.
Senarai Item sebarisSalah satu cara untuk membina sebuah bar navigasi mendatar adalah untuk menentukan elemen-elemen <li> sebagai sebaris, sebagai tambahan kepada kod "standard" di atas:
li
{
display:inline;
}
paparan: sebaris; - unsur-unsur item item <li> blok. Di sini, sebelum dan selepas setiap item senarai, untuk memaparkan ianya dalam satu barisTip: Juga lihat navigasi mendatarSenarai Item TerapungDalam contoh di atas pautan yang mempunyai lebar yang berbeza.
Untuk semua link mempunyai lebar yang sama, terapung elemen <li> dan menentukan lebar untuk unsur-unsur <a>:
li
{
float:left;
}
a
{
display:block;
width:60px;
}
Comments
Post a Comment
Maklumat yang terkandung dalam laman Blog ini hanya untuk tujuan maklumat umum sahaja.
Kami tidak akan bertanggungjawab ke atas apa-apa kehilangan atau kerosakan termasuk tanpa had, kehilangan atau kerosakan secara langsung atau tidak langsung atau apa-apa kerugian atau kerosakan yang timbul atau sesuatu yang berkaitan dengan penggunaan laman web ini. Dilarang meniru, copy & paste kandungan dalam laman blog ini.
Komen akan ditapis untuk kesejahteraan bersama, spammer tidak dialu-alukan (spammers are not allowed).
Terima Kasih.
The Blogler (Aku Pakar Blogger).