Bar Navigasi CSS
Bar Navigasi
Penggunaan bar navigasi yang cekap adalah sangat penting untuk mana-mana tapak web .
Menggunakan CSS anda boleh mengubahnya menjadi bar navigasi yang cantik dan bukannya menu HTML yang membosankan.
Bar navigasi = senarai pautan
Sebagai HTML standard, bar navigasi diperlukan
Dalam contoh kami, kami akan Mencipta HTML standard bar navigasi senarai.
Bar navigasi pada asasnya ialah senarai pautan, jadi menggunakan elemen <ul> dan <li> sangat masuk akal:
Contoh
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p> </body> </html>
Sekarang, mari kita keluarkan margin dan padding daripada senarai:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Contoh analisis:
- list-style-type:none - alih keluar tanda kecil di hadapan senarai. Bar navigasi tidak memerlukan tag senarai
- Alih keluar tetapan lalai penyemak imbas dan tetapkan margin dan padding kepada 0
Kod dalam contoh di atas adalah untuk bar navigasi menegak dan mendatar Kod standard digunakan.
Bar navigasi menegak
Dalam kod di atas, kami hanya memerlukan gaya elemen <a> untuk membuat bar navigasi menegak:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>Contoh penerangan:
- paparan:blok - paparan elemen blok Pautan menjadikan keseluruhan kawasan pautan (bukan hanya teks) boleh diklik, yang membolehkan kami menentukan lebar
- lebar:60px - lebar maksimum untuk elemen blok secara lalai. Kita perlu menentukan lebar 60 piksel
Nota: Sila pastikan untuk menentukan lebar elemen dalam bar navigasi menegak.
Bar Navigasi Mendatar
Terdapat dua cara untuk mencipta bar navigasi mendatar. Gunakan sebaris atau terapung untuk item senarai.
Kedua-dua kaedah adalah baik, tetapi jika anda mahu pautan mempunyai saiz yang sama, anda perlu menggunakan kaedah apungan.
Item senarai sebaris
Salah satu cara untuk mencipta bar navigasi mendatar ialah dengan menentukan elemen
Kod di atas ialah Inline dalaman standard:Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Penghuraian Instance:
- display:inline; - secara lalai ,
- elemen ialah elemen blok. Di sini kami mengalih keluar baris baharu sebelum dan selepas setiap item senarai untuk memaparkan satu baris.
Item senarai terapung
Dalam contoh di atas pautan mempunyai lebar yang berbeza.
Untuk semua pautan mempunyai lebar yang sama, apungkan elemen <li> dan nyatakan lebar elemen <a>:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</body>
</html>Contoh analisis:
- float:left - Slaid menggunakan elemen blok terapung bersebelahan antara satu sama lain
- display:block - Paparkan pautan untuk menyekat elemen, menjadikan keseluruhannya kelihatan Hidup klik pada kawasan pautan (bukan hanya teks), ia membolehkan kami menentukan lebar
- lebar:60px - lebar maksimum untuk elemen blok secara lalai. Kami ingin menentukan lebar 60 piksel
