masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Bar navigasi CSS

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



Meneruskan pembelajaran
||
<!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: #74ffe9; } </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>
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)  492837 permainan