CSS菜单栏制作教程
程序员文章站
2022-05-07 21:17:09
1纵向菜单：
html:
1纵向菜单：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<nav class="list"><!--导航栏-->
<ul>
<li><a href='#'>链接1</a></li>
<li><a href='#'>链接2</a></li>
<li><a href='#'>链接3</a></li>
<li><a href='#'>链接4</a></li>
<li><a href='#'>链接5</a></li>
<li><a href='#'>链接6</a></li>
<li><a href='#'>链接7</a></li>
</ul>
</nav>
</body>
</html>
css:
*{
margin: 0 ;
padding: 0;
}
nav{
width: 150px;
margin: 10px;
background: #ccc;
}
.list ul{
border: 1px solid #f00;
}
.list ul li{
list-style-type: none; /*去掉圆点*/
}
.list li + li a{ /*非首位子元素*/
border-top:1px solid blue;
}
.list ul li a{
text-align: center;
text-decoration: none;
/*background: #ffed53;*/
color: #000;
display: block;
padding: 3px 10px;
}
.list ul li a:hover{
color: red;
background: #666;
cursor: pointer; /*手型*/
}
图示：
方法：
1） 添加一个普通列表；将padding和margin设为0。
2）设置css : 属性一定要对应。尽量不要设置a元素的背景颜色和padding。
2 横向菜单：
html:同上。
css：
*{
margin: 0 ;
padding: 0;
}
nav{
text-align: center;
/*margin:0px auto; /*没有宽度不能居中*/
}
ul{
display: inline-block;/*ul设为内联元素便于居中*/
}
.list ul li{
float: left;
list-style-type: none; /*去掉圆点*/
}
.list ul li + li{
border-left: 1px solid #333;
}
.list ul li a{
background: #999;
text-align: center;
text-decoration: none;
color: #000;
display: block;
padding: 3px 10px;
}
.list ul li a:hover{
color: red;
background: #333;
cursor: pointer;
}
图示：
PS：由于导航条没有设置宽，不能有 margin:0 auto;的方法。
所以使用 nav{text-align: center; } ul{display: inline-block; }。