css定义一个导航栏
2007-07-06 16:42
218 查看
导航栏是网页中常用的模块,有很多方法可以实现,下面是用css实现的方法:
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
css代码如下:
#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
/*加菜单间的竖线*/
.menuDiv {width:1px;height:28px;background:#999}
/*定义菜单链接的样式*/
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
解释一下:
<ul></ul>、<li></li>这两个HTML元素它们最主要的作用就是在HTML中以列表的形式来显示一些信息。
当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID
#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px)
display:block;line-height:28px的作用是让文字垂直居中
最终效果如:
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>
css代码如下:
#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
/*加菜单间的竖线*/
.menuDiv {width:1px;height:28px;background:#999}
/*定义菜单链接的样式*/
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
解释一下:
<ul></ul>、<li></li>这两个HTML元素它们最主要的作用就是在HTML中以列表的形式来显示一些信息。
当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID
#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px)
display:block;line-height:28px的作用是让文字垂直居中
最终效果如:
![](http://www.pcstu.com/upimg/allimg/070407/1203467.gif)
相关文章推荐
- css里同一个标签定义了两种样式,哪一个有效?
- 一个渐变的优雅的分割线条(使用css定义)
- 用css定义一个div,如何用js取得样式的属性呢?
- 在Ext(Version2.2 和目前的Version3.1.1 Version3.2) 里面存在一个BUG,就是当设置了 stripeRows:true, 并没有出现斑马线的效果,解决的办法是在定义一个css类,放置在一个独立的css文件里面,页面加以引用。
- css html 当你对一个html定义它的width和height无用时应该怎么做
- CSS学习之创建一个简单的导航栏
- 用CSS编写一个网页导航栏
- CSS定义一个带有颜色的边框
- CSS学习之创建一个简单的导航栏下拉菜单
- css定义中的一个bug
- 使用CSS设计了一个导航栏(仿康盛创想)
- 如何在同一个页面内使用不同的超级链接,如何定义这类CSS。
- CSS伪类链接:点击某一个链接后,刷新页面,其他所有从没点击过的链接都变成a:visited中定义的颜色
- CSS制作一个简单网页的下拉导航栏
- 经典导航栏04,一个精彩的JS+CSS精彩导航实例
- 使用CSS定义一个和屏幕宽度一样正方形容器
- 一个封装好的CSS分页导航栏
- css 固定顶部 怎么用css定义一个固定在页面顶部的层
- css如何在一个工具条中定义向左(或向右)靠的button
- 一个封装好的CSS分页导航栏