简单的导航条制作

最新推荐文章于 2024-02-03 15:57:49 发布

阿阿阿黄

最新推荐文章于 2024-02-03 15:57:49 发布

阅读量649

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/MBLHQ/article/details/51956956

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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