2021_CSS学习笔记第2天: 4.2.6 设计滑动门菜单

网站建设 · 2021-01-03
坚持戒烟、坚持学习、坚持运动0rFIT米工网
4.2.6 设计滑动门菜单0rFIT米工网
使用滑动门后,背景图像会随文字的增减会伸缩,本节是通过两个背景图像的拼接来实现滑动门技术。0rFIT米工网
    0rFIT米工网
每个菜单项包含双层标签,外层是li,里层是a
<li class="first"><a href="#">首页</a></li>
滑动门主要是通过背景图像重叠和滑动来实现滑动门效果的0rFIT米工网
示例代码:
    .menu li.first{
        background:url(images/2.gifno-repeat right top;
    }
    .menu li.first a{
        background:url(images/1.gifno-repeat left top;
        color:#000;
    }
    .menu li.first a:hover{
        color:#fc0;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="menu">
            <ul>
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">CSS教程</a></li>
                <li><a href="#">CSS实例</a></li>
                <li><a href="#">CSS层与布局</a></li>
                <li><a href="#">CSS特效</a></li>
            </ul>
        </div>
        <div class="content"></div>
    </div>
</body>
0rFIT米工网