滑动门技术实现的导航菜单

最新推荐文章于 2024-09-21 16:49:01 发布

weixin_33845881

最新推荐文章于 2024-09-21 16:49:01 发布

阅读量423

点赞数

站在css2.1的角度实现的demo，在不使用css3多背景的情况下，带有圆角的导航菜单，并且无论菜单文字的多少都能自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 滑动门的核心，小图压大图，大图在伸展 */
        ul.nav {
            padding: 0;
            margin: 0;
            list-style: none;
            overflow: hidden;
        }
        ul.nav li {
            background: url('img/tab-right.gif') no-repeat top right;
            float: left;

        }
        ul.nav a {
            background: url('img/tab-left.gif') no-repeat  top left;
            display: block;
            line-height: 1.5em;
            padding: 0 0.8em;
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">滑动菜单1</a></li>
        <li><a href="#">滑动菜单2</a></li>
        <li><a href="#">滑动菜单3</a></li>
        <li><a href="#">滑动菜单圆角4</a></li>
        <li><a href="#">滑动菜单5</a></li>
    </ul>
</body>
</html>