div+css 顶部导航效果

来源:互联网 发布:dc影业 知乎 编辑:程序博客网 时间:2024/04/30 14:23

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实现导航效果</title>
<style type="text/css"">

 #mydiv{
  margin:2px,4px,2px,4px;
  padding:2px,0px,2px,0px;
  border: #fff 1px solid;
  background: #dfdfdf;
  height:25px;
  text-align:center;
 }
 #mydiv ul{
  display:inline;   
 }
 
 #mydiv li {
 float:left; 
 display:block;
 text-align:center;
 }
 
 #mydiv li a{
    padding:2px,10px,2px,10px;
    font-weigth:blod;
  text-align:center;
  text-decoration:none;

 }
 #mydiv li a:hover{
  background:green;
  color:red;
 }
</style>
</head>
<body>
<div id="mydiv">
 <ul>
  <li><a href="#">index</a></li>
  <li><a href="#">baidu</a></li>
  <li><a href="#">iteye</a></li>
  <li><a href="#">csdn</a></li>
  <li><a href="#">google</a></li>
 </ul>
</div>
</body>
</html>