CSS tulen untuk merealisasikan navigasi label production_Experience exchange-tutorial css-php.cn

CSS tulen untuk merealisasikan navigasi label production_Experience exchange

WBOY

Lepaskan： 2016-05-16 12:06:26

asal

1819 orang telah melayarinya

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!

<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 ;                                                                                                                             🎜> 




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! 