DIV CSS菜单实例：红与黑 具有立体质感的CSS菜单

　　版权声明：原创，未经本站同意，严禁转载！
　　运用UL及LI构建菜单，不但速度上比较快，而且语义更明确，对搜索引擎也非常友好，但很多朋友认为制作起来比较烦，其实不然，CSS菜单的制作其实是非常简单的，今天的这款菜单思路非常简单，但效果还算不错，看下面的效果图：


　　这与前面所介绍的一些菜单有相似之处，我们不难看出，些微的改变就可以制作出不同的效果，你也可以学习前面我们的一些案例，进一步加深菜单制作的有关知识。

　　◎ 简洁的效果 火红的围城 http://www./article.asp?id=422
　　◎ 按钮效果 跳跃的蓝色精灵 http://www./article.asp?id=419
　　◎ 极致而简约的风格 http://www./article.asp?id=405
　　◎ 红蓝炫CSS横向菜单 http://www./article.asp?id=404
　　◎ CSS横向菜单会动的小竖条 http://www./article.asp?id=401
　　◎ CSS横向菜单蓝色地平线 http://www./article.asp?id=399
　　◎ CSS横向菜单蓝绿色调 http://www./article.asp?id=396
　　◎ CSS横向菜单的基础知识 http://www./article.asp?id=395
　　◎ 黑白灰 带有阴影效果的CSS横向菜单 http://www./article.asp?id=502
　　◎ 一张图片实现鼠标的两种状态及CSS当前页效果 http://www./article.asp?id=503

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

Example Source Code [www.]<ul id="menu">
    <li><a href="http://www./" title="">首页</a></li>
    <li class="current"><a href="http://www./" title="">Div+CSS教程</a></li>
    <li><a href="http://www./" title="">CSS布局实例</a></li>
    <li><a href="http://www./" title="">CSS2.0教程</a></li>
    <li><a href="http://www./" title="">CSS酷站欣赏</a></li>
    <li><a href="http://www./" title="">CSS模板下载</a></li>
</ul>
　　没有什么特别之处，需要注意的是我们为第二个列表项“Div+CSS教程”指定了一个类class="current"。这是我们用来让CSS精确的选择到当前页效果的钩子。下面我们逐一看CSS编码：

Example Source Code [www.]* {
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    margin:0;
    padding:0;
}
body {
    background:#ccc;
}
　　整体布局声明：文字大小为13px，加粗，去除装饰线，边距与填充均为零。
　　设置body的背景色为灰色#ccc。

Example Source Code [www.]#menu {

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）