滑动门学习第二步

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>滑动门第二步</title>
    <style type="text/css">
        /*重写ul,li.避免造成不同浏览器的兼容性问题。*/
        ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
       
        li
        {
            list-style: none;
        }
       
       
        /*定义外围容器*/
        .tabmenu
        {
            overflow: hidden;
            width: 300px;
            font-size: 12px;
        }
       
        /*定义左侧的背景样式,请查看l.gif图片的样式*/
        .tabmenu li
        {
            background: url(images/l.gif) no-repeat;
            float: left;
        }
       
        /*定义右侧的背景样式,注意这里的 background-position: right top;不能省略,另外需要将a标签设置为容器元素请查看r.gif的效果*/
        .tabmenu li span
        {
            background: url(images/r.gif) no-repeat;
            display: block;
            background-position: right top;
            padding: 5px 18px;
        }
       
        /*定义鼠标移上去的时候的效果,这里的几个定位属性我改变了一下,没有调试其他的浏览器,大家可以完善一下。*/
        .tabmenu li a:hover
        {
            background: url(images/l.gif) no-repeat;
            background-position: left 80%;
            display: block;
        }
       
        .tabmenu li a:hover span
        {
            background: url(images/r.gif) no-repeat;
            background-position: right 80%;
            display: block;
        }
       
        /*总结,这个例子也是一个非常非常简单的例子,只是在原来的基础上加了一个鼠标移上的效果,然而上面的代码在IE6下是无鼠标移上的效果的,因为hover属性在IE6下只有a标签才会有,下面我们对上面和下面的代码进行一下改造。*/
    </style>
</head>
<body>
    <ul class="tabmenu">
        <li><span>语文</span></li>
        <li><span>高等数学</span></li>
        <li><span>中华人民共和国史</span></li>
    </ul>
    <ul class="tabmenu">
        <li><a href="#"><span>语文</span></a></li>
        <li><a href="#"><span>高等数学</span></a></li>
        <li><a href="#"><span>中华人民共和国史</span></a></li>
    </ul>
</body>
</html>

posted on 2010-07-21 15:45  senly  阅读(334)  评论(0编辑  收藏  举报

导航