div+css 顶部导航效果

最新推荐文章于 2024-07-23 21:45:47 发布

Sunnyyou2011

最新推荐文章于 2024-07-23 21:45:47 发布

阅读量1.1k

点赞数

文章标签： css div float

本文链接：https://blog.csdn.net/Sunnyyou2011/article/details/7614542

版权

<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>