论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS实例教程:CSS横向菜单会动的小竖条

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:34

我们可以让我们的菜单更加的美化,加上一些装饰性的效果,同时也提高用户的易用性。今天我们学习《CSS横向菜单会动的小竖条》。最终效果如下:


  HTML非常简单主要是通过CSS实现这款菜单效果

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul id="nav">
<li><a href="http://www.21shipin.com/">Div CSS教程</a></li>
<li><a href="http://www.21shipin.com/">CSS布局实例</a></li>
<li><a href="http://www.21shipin.com/">CSS2.0教程</a></li>
<li><a href="http://www.21shipin.com/">CSS酷站欣赏</a></li>
<li><a href="http://www.21shipin.com/">CSS模板下载</a></li>
</ul>

我们具体的解释与说明CSS代码,看它是如何控制这个UL LI打造CSS横向菜单的:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
font-size:12px;
text-align:center;
}
#nav {
width:520px;
border-bottom:1px solid #06f;
margin:20px auto 0 auto;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
margin-right:5px;
padding:5px 10px 5px 8px;
text-decoration: none;
color:#000;
background:#ffe67d;
border-left: 5px solid #fc0;
}
#nav li a:hover {
color:#060;
border-left: 5px solid #f60;
}

  首页我们进行了整体布局声明,声明了文字大小及居中的对齐方式。需要说明的是,在ff中,我们设置margin:0 auto。即可实现容器的居中了,但在IE中,这还不够,还需要在父容器中声明text-align:center。这一点我们要记得,不然轻易出错。
  声明UL无序列表的宽度为520ox,下边框一象素的实现,颜色为#06f。我们设置了nav这个UL,距离顶部为20px、距离底部为零,左右的距离为auto。这就实现了nav在水平方向内是居中的,垂直方面上距离浏览器窗口20px。
  声明LI列表项为内联(行内)显示,列表预设标记为无。

  我们重点需要理解#nav li a:link,#nav li a:visited的定义,设置链接的样式。
  向左浮动,并且右边距为5px。这是设置链接元素从左向右排行,并且元素之间的右部间隔5px。
  设置填充,顶5px、右10px、下5px、左8px。这一设置可以使我们的链接文字处于合适的位置。
  取消链接文字的下划线,并设置链接文字的颜色为#000。链接元素的背景色为#ffe67d。
  左边框五象素的实线,颜色为#fc0。这一句话形成了我们的小竖条。

  我们通过下面#nav li a:hover形成鼠标激活的样式。
  链接文字的颜色变为#060。左边框五象素的实线,颜色为#f60。
  这样我们会动的小竖条菜单就制作完成了。看最终的效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058