这是由两个div来实现的，首先建立一个外层div并设置宽高，要使宽度随屏幕宽度变化(即浏览器宽度变化)，那么宽度就得设置100%，高度设置为你需要的高度即可，具体属性为 width:100%;height:你自己的高度;background:你需要的颜色; 这样就让该div随屏幕(浏览器)宽度变化而变化了。然后在这个div里面再嵌套一个div给定一个宽高属性，就是你导航的宽高，要使之居中，各人使用的方法也有所不同，但是常用的还是margin属性，具体属性如下 width:你导航的宽度;height:你导航的高度;margin:0 auto; 这样就实现了，如果背景是图片的话就更改background属性即可，还有不明白的随时Hi我。
网页导航菜单栏制作
导航菜单的实现
首先定义导航外围容器的样式：
#left {
width: 178px;
}
现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下：
< div id=navcontainer>
< ul>
< li>< a href=#>Home< /a>< /li>
< li>< a href=#>About me< /a>< /li>
< li>< a href=#>ximicc< /a>< /li>
< li>< a href=#>Articles< /a>< /li>
< li>< a href=#>Photo roll< /a>< /li>
用CSS如何写出的网站导航
看下这个吧，把代码复制到一个文本文档，然后改成html就可以了。
<html xmlns= > <title>无标题页</title></head><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( ) no-repeat top right;} #curNavDemo span{background: url( ) no-repeat top left;} ul.blue li a:hover{color: #0d5f83;background: url( ) no-repeat top right;} ul.blue li a:hover span{background: url( ) no-repeat top left;} /*导航2*/ ul.navigator2{list-style: none;float: left;clear: left;width:460px;background-image:url( );} ul.navigator2 li {float: left;background-image:url( );} ul.navigator2 li div{background-image:url( );float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } ul.navigator2 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} ul.navigator2 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} ul.navigator2 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url( ); background-position:left center; background-repeat:no-repeat; text-decoration:none;} ul.navigator2 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url( ); background-position:right center; background-repeat:no-repeat;} #curNavDemo2{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url( ); background-position:left center; background-repeat:no-repeat;} #curNavDemo2 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url( );background-position:right center; background-repeat:no-repeat;} /*导航3*/ ul.navigator3{list-style: none;float: left;clear: left;width:460px;background-image:url( );} ul.navigator3 li {float: left;} ul.navigator3 li div{background-image:url( );float:left;width:4px;height:34px;font-size:0px;margin:0px 4px;background-repeat:no-repeat; background-position:top; } ul.navigator3 li a.nav{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;} ul.navigator3 li a.nav span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;} ul.navigator3 li a.nav:hover{display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url( ); background-position:left center; background-repeat:no-repeat; text-decoration:none;} ul.navigator3 li a.nav:hover span{display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url( ); background-position:right center; background-repeat:no-repeat;} #curNavDemo3{display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url( ); background-position:left center; background-repeat:no-repeat;} #curNavDemo3 span{display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url( );background-position:right center; background-repeat:no-repeat;}</style><script type=text/javascript language=javascript> function $(objId){ return document.getElementById(objId); } function changeId(idName,obj){ $(idName).id=; obj.id=idName; obj.blur(); }</script><div id=navigatorDemo> <div>导航风格1</div> <ul class=blue> <li><a href=# title=首页 id=curNavDemo onclick=changeId('curNavDemo',this)><span></span>首页</a></li> <li><a href=# title=菜单1 onclick=changeId('curNavDemo',this)><span></span>菜单1</a></li> <li><a href=# title=菜单2 onclick=changeId('curNavDemo',this)><span></span>菜单2</a></li> <li><a href=# title=好长好长的菜单呀 onclick=changeId('curNavDemo',this)><span></span>好长好长的菜单呀</a></li> </ul> <div style=height:5px;clear:both;></div> <div>导航风格2</div> <ul class=navigator2> <li><div></div></li> <li><a href=# id=curNavDemo2 class=nav onclick=changeId('curNavDemo2',this)><span>首页</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo2',this)><span>菜单1</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo2',this)><span>菜单2</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo2',this)><span>好长好长的菜单呀</span></a><div></div></li> </ul> <div style=clear:both;height:15px;margin-top:5px;>导航风格3</div> <ul class=navigator3> <li><div></div></li> <li><a href=# id=curNavDemo3 class=nav onclick=changeId('curNavDemo3',this)><span>首页</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo3',this)><span>菜单1</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo3',this)><span>菜单2</span></a><div></div></li> <li><a href=# class=nav onclick=changeId('curNavDemo3',this)><span>好长好长的菜单呀</span></a><div></div></li> </ul></div></body></html>
- 上一篇： 知名的网络安全公司有哪些？
- 下一篇： 返回列表