masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Bar navigasi CSS

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492446 permainan