Barre de navigation CSS
En utilisant CSS, vous pouvez le transformer en une belle barre de navigation au lieu d'un menu HTML ennuyeux.
Utilisez HTML et CSS pour créer une barre de navigation horizontale
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;/*改動(dòng)的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整體變?yōu)榭牲c(diǎn)擊區(qū)域，而不只是字*/
}
</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>Remarques?:
①Vous pouvez définir une marge pour ul, mais lorsqu'il est défini sur margin:100px auto, ul ne peut pas être centré
La hauteur occupée par ②ul est 0.
③Vous pouvez définir la largeur de li et ajuster la largeur librement.
④ Vous pouvez définir une marge pour li afin qu'il y ait un espace entre li.
⑤ Vous pouvez définir display:block sur a; faisant de toute la zone une zone cliquable.
⑥Si vous souhaitez que les liens aient la même taille, vous devez utiliser float au lieu de display:inline;
li pour définir 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;/*改動(dòng)的地方*/
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>Remarques?:
①Définissez la marge?:?100px auto pour ul, vous pouvez centrer ul à gauche et à droite.
② Même si li n'a pas de marge, il y aura toujours des espaces entre chaque li.
③ Vous pouvez définir display:block sur a pour rendre toute la zone cliquable.
Créer une barre de navigation verticale en utilisant html et 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>Liste en ligne?:
<!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>
