css怎么写导航( 二 )


<li><a href="http://www.xuexi88.com/zhishi/#">;关于我们</a></li>
</ul></div>
</body>
</html>
4. 用CSS如何写出的网站导航 看下这个吧,把代码复制到一个文本文档,然后改成html就可以了 。
无标题页<body><style type="text/css">#navigatorDemo{height:230px;width:500px;background:white;margin:0 auto;} /*导航栏CSS*/ /*导航1*/ ul.blue {padding: 5px;list-style: none;background-color: #fff;border-bottom: 1px solid #e7e7e7;float: left;clear: left;} ul.blue li {float: left;} ul.blue li a {float: left;text-decoration: none;color: #ccc;padding: 4px 15px 0 0;margin-right: 8px;font: 900 14px "Arial", Helvetica, sans-serif;} ul.blue li a span {float: left;padding-right: 15px;display: block;margin-top: -4px;height: 24px;} #curNavDemo{color: #0d5f83;background: url( +css做一个导航条 首先要建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>;无序列表,导航共有几个栏目,就为列表添加几个<li>;的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面 。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项<li>;标签设置左浮动的样式,代码为:li {float:left;}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置 。
6. html5 css怎么写导航栏 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>;导航栏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nav {
width: 960px;
height: 60px;
border: 1px solid red;
margin: 100px auto;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
background-color: #e7ffb0;
}
.nav ul li a {
display: block;
width: 120px;
text-align: center;
line-height: 60px;
text-decoration: none;
color: #5a3467;
}
.nav ul li a:hover {
cursor: pointer;
background-color: #645e55;
color: #cdff83;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
<li><a href="http://www.xuexi88.com/zhishi/#">;网站导航</a></li>
</ul>
</div>
</body>
</html>
7. 请问这个导航条的CSS样式怎么写