码迷,mamicode.com
首页 > 其他好文 > 详细

水平导航栏制作

时间:2014-06-19 06:39:50      阅读:320      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ext   color   com   

在网页中水平导航栏是每一张网页都有的。

现在做一个简单的导航栏:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html" charset="utf-8">
<style type="text/css">
ul#nav{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul#nav li{display: inline;}
ul#nav li a{
padding: 5px 20px;
margin: 0px 2px;
border: 1px solid #666;
background-color: #ccc;
text-decoration: none;
text-align: center;
}
ul#nav li a:hover{
background-color: #333;
color: #fff;
}
</style>
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="/">Water</a></li>
<li><a href="/">Fire</a></li>
<li><a href="/">Air</a></li>
<li><a href="/">Earth</a></li>
<li><a href="/">Beyond</a></li>
</ul>
</body>
</html>

结果如图:

bubuko.com,布布扣

水平导航栏制作,布布扣,bubuko.com

水平导航栏制作

标签:style   blog   http   ext   color   com   

原文地址:http://www.cnblogs.com/chencyl/p/3789524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!