CSS tulen untuk merealisasikan navigasi label production_Experience exchange

Selepas mencari di Internet, saya tidak melihat banyak tutorial atau arahan untuk membuat navigasi label semata-mata menggunakan CSS. Kebanyakannya melibatkan penulisan JS. Ini benar-benar tidak bertimbang rasa untuk ramai orang yang belajar CSS Memandangkan tiada siapa yang melakukannya, izinkan saya mencubanya dahulu! Navigasi label CSS yang saya lakukan di sini ialah navigasi hijau dengan CSS tulen, tiada JS dan tiada imej latar belakang. Artikel ini sesuai untuk pemula, pakar boleh lalu, haha!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nav02</title> <style type="text/css"> *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ margin:20px; margin-bottom:0; padding-left:20px; list-style-type:none; font-size:12px; position:absolute; } ul li{ float:left; margin-right:5px; } ul li a{ display:block; width:100px; line-height:25px; text-align:center; color:#999; background-color:#FC0; border:2px solid #000; } ul li a:hover{ height:27px; background-color:#F60; border-bottom:none; } #nav01 ul li a#nav001, #nav02 ul li a#nav002, #nav03 ul li a#nav003{ width:100px; height:27px; color:#FFF; background-color:#F60; border:2px solid #000; border-bottom:none; } .con{ margin:0 20px; padding:20px; color:#FFF; background-color:#F60; border:2px solid #000; border-top:none; } </style> <div class="mainNav"> <ul> <li><a href="#" id="nav001">Rumah Skrip 01</a></li> <li><a href="#" id="nav002">Rumah Skrip 02</a></li> <li><a href="#" id="nav003">Rumah Skrip 03</a></li> </ul> </div> <div class="con">Laman Utama Skrip <a href="</div">www.jb51.net</a> </div>>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Salin kod Kod adalah seperti berikut:

.mainNav{
margin:0 20px; 🎜> tinggi:47px;
sempadan-bawah: 2px pepejal #000;
}
ul{
jidar-bawah:
padding-left: 20px; -type:none;
saiz huruf:12px;
kedudukan: mutlak; 🎜> }
ul li a{
paparan: blok;
lebar: 100px;
background-color:#FC0; > border-bottom:none;
tinggi:27px; #000;
sempadan-bawah:
} margin:0 20px; warna:#F60;
sempadan:2px pepejal #000;
sempadan-atas: tiada; kod


Kod adalah seperti berikut:

" id="nav001">Ali Manman 01 li> ;                                                                                                                             🎜>

Malah, perkara utama ialah perintah position:absolute dalam ul , kandungan navigasi ul menjadi paparan lapisan , yang bersamaan dengan terapung pada penyemak imbas. Untuk mengelakkan kandungan berikut daripada mengisi kandungan bahagian ul, div diletakkan di luar ul, yang membantu ul menduduki ruang. Div ini juga berfungsi sebagai latar belakang ul Kunci untuk melabel navigasi ialah sempadan bawah. Selepas membaca semuanya, anda akan mendapati bahawa ia sebenarnya sangat mudah, tetapi kuncinya adalah untuk mempunyai idea. baiklah! Teruskan belajar!