Bar navigasi
Penggunaan bar navigasi yang mahir 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 asas HTML standard, bar navigasi diperlukan
. Dalam contoh kami, kami akan membina bar navigasi senarai HTML standard.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>
Bar navigasi menegak
Dalam kod di atas, kami hanya memerlukan gaya elemen <a> untuk mencipta bar navigasi menegak
rreee
Contoh penerangan:
display:block - Memaparkan pautan untuk menyekat elemen, menjadikan keseluruhan kawasan pautan boleh klik (bukan teks sahaja), yang membolehkan kami menentukan lebar
lebar:60px - elemen blok Lalai ialah lebar maksimum. Kami perlu menentukan lebar 60 piksel
Nota: Sila pastikan untuk menentukan lebar elemen <a> Jika anda meninggalkan lebar, IE6 mungkin mempunyai kesan yang tidak dijangka.
Bar Navigasi Mendatar
Terdapat dua cara untuk mencipta bar navigasi mendatar. Gunakan item senarai sebaris atau terapung.
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 Standard sebaris:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>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中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>Contoh resolusi:
float:left - slaid menggunakan elemen blok terapung bersebelahan antara satu sama lain
display:block - memaparkan pautan untuk menyekat elemen, menjadikan keseluruhannya menjadi kawasan pautan yang boleh diklik (bukan hanya teks), ia membenarkan kami Tentukan lebar
lebar:60px - Elemen blok adalah lebar maksimum secara lalai. Kami ingin menentukan lebar 60 piksel
bahagian seterusnya