您的位置：首页 > 其它

简单的导航条制作

2016-07-19 16:25 225 查看
在IE浏览器上的效果如下：



代码如下：

<!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=GBK" />
<title>你好</title>
<style type="text/css">
body,div,ul,li,a{
padding:0;
margin:0;
}
#nav,ul{
width:900px;
height:35px;
}
#nav{
background:#CCC;
margin:0 auto;
margin-top:30px;
}
li{
line-height:35px;
text-align:center;
/*width:100px;*/
list-style:none;
float:left;
/*background-color:red;*/
margin-left:36px;
padding:0 10px;
}
#nav ul li a{ height:35px ;font-size:16px; color:#333; text-decoration:none ;display:block;float:left;padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:none;background:#000;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">W3Cfuns</a></li>
<li><a href="#">厘米学院</a></li>
<li><a href="#">培训课程</a></li>
<li><a href="#">我要充电</a></li>
<li><a href="#">前端职业生涯</a></li>
<li><a href="#">课程答疑</a></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航