用CSS制作简单导航栏

纯css实现的简单导航栏。

前端开发基础中的基础。。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航栏练习-01</title>
		<style type="text/css">
			/* ul与div样式 */
			#nav ul{
				list-style-type: none;
				display: inline-block;		
			    margin: auto 25%;	
			    line-height: 50px;
			}
			#nav ul li{
					float: left;
					margin: 0px 20px;							
			}
			#nav{
				height: 10%;
				width: 60%;
				background-color: rgb(106,106,106);
				font-family: "微软雅黑";				
				margin: 0 auto;
				border-radius: 10px;							
			}
			/* 链接样式 */
			a:link{
				color: whitesmoke;
				text-decoration:none;				
			}
			a:visited{
				color: whitesmoke;	
				text-decoration:none;			
			}
			a:hover{
				color: rgb(186,182,182);
				text-decoration:none;
			}
			a:active{
				color: whitesmoke;	
				text-decoration:none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">商城</a></li>
				<li><a href="#">新闻</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>		
		</div>
		
	</body>
</html>

　　

posted @ 2017-02-23 20:25  MJwilson  阅读(899)  评论(0)  编辑  收藏  举报