网页导航栏制作

最新推荐文章于 2024-04-14 12:10:13 发布

艳阳天_.

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量869

点赞数 1

本文链接：https://blog.csdn.net/MZ199290/article/details/52547503

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
.bander{
		height:40px; 
	    background-color:#3CF}
		
ul {    
         list-style:none;	
	}
	
li{
	      float:left;
		  width:120px;
		  text-align:center;
		  border-right:1px #999 solid;   
		  height:31px;
		  padding-top:9px;<!--这个是用来设置li里的字体位置的，margin不行，会改变border位置，								                          而padding不会，他只是填充的内部 --> 
	}
a{     
	       text-decoration:none;
	}
a:hover{
	        background-color:orange;
	}	
</style>

</head>

<body>
<div class="bander">
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">PC产品大全</a></li>
 <li><a href="#">Mac产品大全</a></li>
 <li><a href="#">无线产品大全</a></li>
 <li><a href="#">企业产品大全</a></li>
 </ul>
</div>
</body>
</html>