绿色下划线的简洁CSS导航代码,Css代码库,德仔网

代码语言

代码分类

【Css】绿色下划线的简洁CSS导航

作者:Dezai.CN / 发布于2013/9/25/ 804


	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>懒人图库</title>
	<style>
	body{background-color:#292929;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-align:center}
	#navcontainer{width:778px}
	#navlist
	 {
	 margin: 0;
	 padding: 0 0 20px 20px;
	 border-bottom: 1px solid #444;
	 }
	
	 #navlist ul, #navlist li
	 {
	 margin: 0;
	 padding: 0;
	 display: inline;
	 list-style-type: none;
	 }
	
	 #navlist a:link, #navlist a:visited
	 {
	 float: left;
	 line-height: 14px;
	 margin: 0 10px 4px 10px;
	 text-decoration: none;
	 color: #999;
	 }
	
	 #navlist a:link#current, #navlist a:visited#current, #navlist a:hover
	 {
	 border-bottom: 1px solid #76B41C;
	 padding-bottom: 5px;
	 background: transparent;
	 color: #fff;
	 }
	
	 #navlist a:hover { color: #fff; }
	</style>
	</head>
	<body>
	 
	 
	<div id="navcontainer">
	<ul id="navlist">
	<li><a href="http://www.lanrentuku.com/" target="_blank" id="current">Link 01</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 02</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 03</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 04</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 05</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 06</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 07</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 08</a></li>
	<li><a href="http://www.lanrentuku.com/" target="_blank">Link 09</a></li>
	</ul>
	</div>
	
	</body>
	</html>

试试其它关键字

　CSS导航　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)