Menggunakan CSS anda boleh berubah menjadi bar navigasi yang cantik dan bukannya menu HTML yang membosankan.
Gunakan html dan css untuk mencipta bar navigasi mendatar
li set float:left; 🎜> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
text-align:center;
font-size:14px;
}
li{
float:left;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整体变为可点击区域，而不只是字*/
}
</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>
Catatan:
①Anda boleh menetapkan margin untuk ul, tetapi apabila ditetapkan kepada margin:100px auto, ul tidak boleh berpusat
Ketinggian yang diduduki oleh ②ul ialah 0. ③ Anda boleh menetapkan lebar untuk li dan melaraskan lebar secara bebas.
④Anda boleh menetapkan margin untuk li supaya terdapat ruang antara li.
⑤ Anda boleh menetapkan paparan:sekat pada a; menjadikan seluruh kawasan boleh diklik.
⑥Jika anda mahu pautan mempunyai saiz yang sama, anda mesti menggunakan float dan bukannya display:inline;
li untuk menetapkan display:inline-block ; <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px;
text-align:center;
font-size:14px;
}
li{
display:inline-block;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;
}
</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>
Catatan:
①Tetapkan margin:100px auto untuk ul anda boleh memusatkan ul di sebelah kiri dan kanan. ② Walaupun li tiada jidar, masih ada ruang antara setiap li.
③ Anda boleh menetapkan paparan:sekat pada a untuk menjadikan seluruh kawasan boleh diklik.
Buat bar navigasi menegak menggunakan html dan css<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}
li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff;
border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;}
</style>
<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
Senarai sebaris:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0;}
li{display:inline;}
</style>
<body>
<div>
<ul>
<li>奇才</li>
<li>村村</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</div>
</body>
</html>
bahagian seterusnya
