1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。
2、在html页面body里面编写导航栏内容，可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航。
3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。
4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。
5、也可以制作成水平导航栏，overflow: hidden代码的意思是超出高度和宽度的部分自动隐藏，float: left使导航栏水平显示。
6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。
实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，CSS起到固定背景的作用，也算是一种独特的实现方法。顶部拖动无闪烁菜单栏
*
{
margin:
0px
padding:
0px
}
body
{
background-image:
url()
background-attachment:
fixed
}
#topNavWrapper
{
width:
980px
text-align:
left
height:
31px
margin:
0px
auto
z-index:100
_position:
relative
_top:0px
}
#topNav
{
width:
980px
float:
left
display:
block
z-index:
100
overflow:
visible
position:
fixed
top:
0px
/*
position
fixed
for
IE6
*/
_position:
absolute
_top:
expression(documentElement.scrollTop
+
"px")
background-image:
url(/upload/2010-3/20100303232637297.gif)
background-repeat:
no-repeat
background-position:
right
height:
31px
}
脚本之家
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]
导航栏-->Nav顶部-->Top
除了一些关键性质的部分,例如logo,menu,content,header,footer,其他一般都是自己来做决定,主要是为了别人在回头修改时候能找的到,容易理解是什么.
结构清晰比什么都好~
