您所在位置：主题：求救!~关于用CSS制作导航条
fuqian [专家分：0] 发布于 2006-04-05 12:59:00
CSS水平导航
CSS文件：(nav.css)
#navigation
{
float: left;
width: 200px;
padding: 5px;
}
#navigation ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: 宋体
}
#navigation a, li#current
{
display: block;
width: 180px;
text-decoration: none;
padding: 5px;
border-bottom: #fff solid 1px;
background-color: #630;
color: #fff;
}
#navigation a:hover, #navigation a:active, #navigation a:focus, li#current
{
background-color: #c90;
color: #000;
}
HTML文件：(nav.asp)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Vertical Navigation</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=gb2312" />
<link href="nav.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="navigation">
<ul>
<li id="current">本站首页</li>
<li><a href="/jianzhan"建站指南</a></li>
<li><a href="/news/index.htm"站内新闻 </a></li>
<li><a href="/web"网页制作</a></li>
<li><a href="/program"网络编程</a></li>
</ul>
</div>
</body>
</html>
我上面的代码是想要做一个CSS水平的导航条，可不知道怎么回事各个项目为一行，就是说变成垂直的去了，请哪为高手指点一二。谢谢！~
CSS文件：(nav.css)
#navigation
{
float: left;
width: 200px;
padding: 5px;
}
#navigation ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: 宋体
}
#navigation a, li#current
{
display: block;
width: 180px;
text-decoration: none;
padding: 5px;
border-bottom: #fff solid 1px;
background-color: #630;
color: #fff;
}
#navigation a:hover, #navigation a:active, #navigation a:focus, li#current
{
background-color: #c90;
color: #000;
}
HTML文件：(nav.asp)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Vertical Navigation</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=gb2312" />
<link href="nav.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="navigation">
<ul>
<li id="current">本站首页</li>
<li><a href="/jianzhan"建站指南</a></li>
<li><a href="/news/index.htm"站内新闻 </a></li>
<li><a href="/web"网页制作</a></li>
<li><a href="/program"网络编程</a></li>
</ul>
</div>
</body>
</html>
我上面的代码是想要做一个CSS水平的导航条，可不知道怎么回事各个项目为一行，就是说变成垂直的去了，请哪为高手指点一二。谢谢！~