用css定义一条导航栏

html-css011

用css定义一条导航栏,第1张

css定义一条导航栏

首先建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。

然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:

ul {width:宽度值;height:高度值; list-style:none;}

如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}

每个栏目之间分隔的距离可通过margin(外边距)属性来设置。

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html

<!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/htmlcharset=utf-8" />

<title>仿菜单</title>

<style type="text/css">

body{font-size:14px}

ul{margin:0padding:0list-style:none}

a{text-decoration:nonecolor:#000}

#menu{position:absolutetop:0left:100pxwidth:780px}

#menu li{float:leftheight:34pxline-height:34px}

#menu li a{ display:blockfont-weight:boldbackground:url(link.gif) left toppadding-left:20px}

#menu span{display:blockbackground:url(link.gif) no-repeat right toppadding-right:20px}

#menu li a:hover{background:url(hover.gif) no-repeat left topcolor:#C30}

#menu li a:hover span{background:url(hover.gif) no-repeat right top}

#sub_menu {position:absolutetop:35pxfont-size:12pxline-height:2em}

#sub_menu #sub_2{margin-left:150px}

#sub_menu #sub_3{margin-left:250px}

#sub_menu #sub_4{margin-left:350px}

.dis { display:block}

.undis { display:none}

</style>

<script type="text/javascript" language="javascript">

<!--

function show(n){

//如果有N个标签,就将i<=N

for(var i=1i<=6i++){

document.getElementById('sub_'+i).className='undis'

}

document.getElementById('sub_'+n).className='dis'

}

-->

</script>

</head>

<!--急冲冲赶出来的,还没有什么时间去添加一些注析,你要是有什么不明白的,可以问我。其他的一些小细节,你再自己修改啦!-->

<body>

<div id="Nav">

<div id="menu">

<ul>

<li><a href="#" onmouseover="show(1)"><span>凯撒首页</span></a></li>

<li><a href="#" onmouseover="show(2)"><span>最新动态页</span></a></li>

<li><a href="#" onmouseover="show(3)"><span>产品及预定中心页</span></a></li>

<li><a href="#" onmouseover="show(4)"><span>帮助及查询中心页</span></a></li>

<li><a href="#" onmouseover="show(5)"><span>会员俱乐部页</span></a></li>

<li><a href="#" onmouseover="show(6)"><span>凯撒论坛页</span></a></li>

</ul>

</div>

<div id="sub_menu">

<div id="sub_1" class="undis" ></div>

<div id="sub_2" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a></div>

<div id="sub_3" class="undis" ><a href="#">聚焦凯撒</a>| <a href="#">国内新闻</a>| <a href="#">国际新闻</a>聚焦凯撒</a>| <a href="#">国内新闻</a></div>

<div id="sub_4" class="undis" ><a href="#">预定流程</a>| <a href="#">订单查询</a>| <a href="#">在线答疑</a><a href="#">签证服务</a>| <a href="#">出游宝典</a>| <a href="#">网站地图</a></div>

<div id="sub_5" class="undis" ></div>

<div id="sub_6" class="undis" ></div>

</div>

</div>

</body>

</html>

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表,所以使用 <ul>和 <li>元素非常有意义:

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充:

ul {

list-style-type: none margin: 0 padding: 0}