首先建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置。
导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html
#navmenu2{width:150px
text-align:center
float:left
}
#navmenu2 ul{
padding:0px
margin:0px
list-style:none
}
#navmenu2 li{
margin:0px
}
#navmenu2 a{
display:block
text-decoration:none
width:120px
border:1px
border-right:10px
border-left:20px
border-color:#60C
border-style:solid
background-color:#00F
color:#FFF
padding:7px 0px 7px 0px
}
#navmenu2 a:hover {
background-color:#000
color:#09F
border-left-color:#09f
border-right-color:#09f
border-top-color:#60c
border-bottom-color:#60c
}
提供三种自定义导航栏悬浮的方法
在自定义组件中设定css 样式:
利用 position: fixed
利用 position: fixed