红与黑具有立体质感的CSS菜单

来源:www.52css.com 时间:07-11-12 点击数:

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

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

<ul id="menu">
    <li><a href="http://www.52css.com/" title="">52CSS.com首页</a></li>
    <li class="current"><a href="http://www.52css.com/" title="">Div+CSS教程</a></li>
    <li><a href="http://www.52css.com/" title="">CSS布局实例</a></li>
    <li><a href="http://www.52css.com/" title="">CSS2.0教程</a></li>
    <li><a href="http://www.52css.com/" title="">CSS酷站欣赏</a></li>
    <li><a href="http://www.52css.com/" title="">CSS模板下载</a></li>
</ul>

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

* {
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    margin:0;
    padding:0;
}
body {
    background:#ccc;
}

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

#menu {
    list-style-type: none;
    border:1px solid #fff;
    margin:50px auto;
    width:770px;
    height:30px;
    overflow:hidden;
    background:#000 url(52css.com_b.png) 0 0 repeat-x;
}

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

#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，使得文字与左右边线有一定的距离。

#menu li a:hover,#menu li.current {
background:#fff url(52css.com_a.png) 0 0 repeat-x;
}

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

好了，致此我们这款菜单的制作就结束了！

loading... 免责声明：本站刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。
对本文有任何异议，请联络：cipin@163.com 转载要求：作者及来源信息必需保留。转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印。

红与黑具有立体质感的CSS菜单

来源:www.52css.com 时间:07-11-12 点击数:

推荐导读

热门排行

红与黑 具有立体质感的CSS菜单

来源:www.52css.com 时间:07-11-12 点击数:

推荐导读

热门排行

红与黑具有立体质感的CSS菜单