前端代码收藏

一、经典导航栏

查看效果

<div id="nav">
	<ul>
		<li><a href="/">首页</a></li>
		<li><a href="/">广场</a></li>
		<li><a href="/">讨论</a></li>
		<li><a href="/">关于</a></li>
	</ul>
</div>

 

 

div,ul,li{
	margin: 0;
	padding: 0;
}
#nav{
	width: -webkit-fit-content;
	height: 35px;
	background-color: #5e5e5e;
	margin: 0 auto;
}
li{
	float: left;
	list-style: none;
	height: 35px;
	margin: 0 1px;
	padding: 0 10px;
	line-height: 35px;
}
a{
	text-decoration: none;
	color: darkgray;
	font-size: 18px;
	display: block;
	height: 35px;
}
a:hover{
	text-decoration: underline;
	color: gray;
}