欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS菜单栏制作教程

程序员文章站 2024-01-25 16:22:04
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;   /*手型*/
}

图示:

CSS菜单栏制作教程

方法:

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;
}

图示:

CSS菜单栏制作教程

PS:由于导航条没有设置宽,不能有 margin:0 auto;的方法。

所以使用 nav{text-align: center; } ul{display: inline-block; }。