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


    　　今天我们具体了解一下它是如何工作的。看下面的最终效果图片：（可点击放大）


    　　首先我们看XHTML代码：

    div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
    <ul id="menu">
    <li><a href="http://www.21shipin.com/">21shipin.com首页<span>21shipin.com首页</span></a></li>
    <li><a href="http://www.21shipin.com/">Div CSS教程<span>Div CSS教程</span></a></li>
    <li><a href="http://www.21shipin.com/">CSS布局实例<span>CSS布局实例</span></a></li>
    <li><a href="http://www.21shipin.com/">CSS2.0教程<span>CSS2.0教程</span></a></li>
    </ul>

    　　我们定义了一个id为menu的无序列表作为菜单的容器，里面的列表项li就是我们的菜单栏了。我们在列表项li中的链接a标签内，放置了一个内联对象span，它就是阴影效果载体，我们通过CSS定义，实现阴影效果。

    　　我们看下面的CSS代码：

    div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
    #menu {
    padding:0;
    margin:0;
    height:2em;
    list-style-type:none;
    border-left:1px solid #bbb;
    }
    #menu li {
    float:left;
    width:8em;
    height:2em;
    line-height:2em;
    border-right:1px solid #bbb;
    position:relative;
    text-align:center;
    }

    　　我们定义menu这个无序列表的填充与边距均为零。高度为2em。清除默认列表项预设标记。定义菜单中的列表项为向左浮动，宽度与高度分别是2em。行高为2em，实现了文字的垂直居中。设置相对定位，并设置文字水平居中对齐。

    　　请注重：我们给ul设置了左边框为1px的实线，颜色是灰色。border-left:1px solid #bbb; 我们给li设置了右边框为1px的实绩，颜色是灰色。border-right:1px solid #bbb; 这样就实现了左右都存在分割的线条了，请看下面的图示（可点击放大）。


    　　我们继续CSS代码的编写：

    div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
    #menu li a, #menu li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    }
    #menu li a span, #menu li a:visited span {
    display:none;
    }

    　　我们定义链接的link与visited状态的样式，设置块元素，没有装饰线，颜色为#000；并且在link与visited状态下链接元素内的span元素为不可见：display:none。

    div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
    #menu li a:hover {
    border:0;
    color:#bbb;
    }
    #menu li a:hover span {
    display:block;
    width:8em;
    height:2em;
    text-align:center;
    position:absolute;
    left:-1px;
    top:-2px;
    color:#000;
    cursor:pointer;
    }

    　　在hover鼠标悬停时，链接的文字颜色为#bbb。即阴影文字的颜色。而此时span内联元素中的文字的设置发生了巨大的变化，我们来看代码。设置成块元素，宽度与高度分别是8em、2em。文字水平居中对齐，采用绝对定位，距左与距顶分别是-1px、-2px。文字颜色为黑色，鼠标指点为：pointer。

    　　实现的原理与思路小结：在正常状态下，链接内的文字是黑色的，而链接span元素内的文字是不可见的。当鼠标悬停时。将链接文字设置为淡灰色的阴影，链接span元素内的文字设置成黑色，并且其位置向左及向上略移一点点。这样就实现了这款菜单的效果。

    　　我们看完整的CSS代码：

    div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
    #menu {
    padding:0;
    margin:0;
    height:2em;
    list-style-type:none;
    border-left:1px solid #bbb;
    }
    #menu li {
    float:left;
    width:8em;
    height:2em;
    line-height:2em;
    border-right:1px solid #bbb;
    position:relative;
    text-align:center;
    }
    #menu li a, #menu li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    }
    #menu li a span, #menu li a:visited span {
    display:none;
    }
    #menu li a:hover {
    border:0;
    color:#bbb;
    }
    #menu li a:hover span {
    display:block;
    width:8em;
    height:2em;
    text-align:center;
    position:absolute;
    left:-1px;
    top:-2px;
    color:#000;
    cursor:pointer;
    }

    视频教程列表
    文章教程搜索
     
    div+css推荐教程
    div+css热门教程