论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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,表格,视频教程

DIVCSS菜单实例:红与黑具有立体质感的CSS菜单

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


  运用UL及LI构建菜单,不但速度上比较快,而且语义更明确,对搜索引擎也非常友好,但很多朋友认为制作起来比较烦,其实不然,CSS菜单的制作其实是非常简单的,今天的这款菜单思路非常简单,但效果还算不错,看下面的效果图:



  我们看今天这款菜单的制作过程,首先看看XHTML代码:

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

  没有什么非凡之处,需要注重的是我们为第二个列表项“Div CSS教程”指定了一个类class="current"。这是我们用来让CSS精确的选择到当前页效果的钩子。下面我们逐一看CSS编码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body {
background:#ccc;
}

  整体布局声明:文字大小为13px,加粗,去除装饰线,边距与填充均为零。
  设置body的背景色为灰色#ccc。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#menu {
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(21shipin.com_b.png) 0 0 repeat-x;
}

  设置Ul即#menu的样式,去除列表项预设标记,设置边框为一象素的白色实线,上下边距为50px,左右边距为自动,实现了菜单的水平居中对齐,设置宽与高分别是:770px、30px。溢出为隐藏,设置背景色为黑色,背景图片为21shipin.com_b.png,位于0 0,水平方向重复。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#menu li {
border-right:1px solid #fff;
float:left;
}
#menu li a {
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}

  列表项li的样式设置,右边框一象素的白色实线,向左浮动。这样设置即实现了菜单有了一个闭合的白线区域,而且浮动让菜单水平方向排列。

  菜单链接A的样式,设置为块元素,文字居中对齐,文字颜色为白色,行高为30px,实现了文字的垂直居中对齐,填充设置为上下0,左右10px,使得文字与左右边线有一定的距离。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#menu li a:hover,#menu li.current {
background:#fff url(21shipin.com_a.png) 0 0 repeat-x;
}

  设置链接A的悬停样式,以及当前页的样式。请注重,这两种状态下它们的表现是一样的,所以我们用群组选择器:“#menu li a:hover,#menu li.current”一次性设置。背景色为白色,背景图片为“21shipin.com_a.png”,位于0 0,水平方向重复。

  好了,致此我们这款菜单的制作就结束了.
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058