css滑动门技术

滑动门的核心技术：

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，以使自由拉伸滑动

利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便适应不同字数的导航栏
一般经典布局
<li>
    <a href="#">
    <span>导航内容</span>
    </a>
</li>

样式设置
a {
            margin: 100px;
            display: inline-block;
            height: 33px;
            background: url(image/ao.png) no-repeat;
            padding-left: 15px;
            
}
a span {
    height: 33px;
    display: inline-block;
    background: url(image/ao.png) no-repeat right;
    padding-right: 15px;
}
总结： 
1. a设置背景左侧， padding撑开合适宽度
2. span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度
3. 之所以a包含span就是因为整个导航都是可以点击的

微信导航栏练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        body {
            background: url(image/wx.jpg) repeat-x;
        }
        .nav {
            height: 75px;
            

        }
        .nav li {
            float: left;
            margin: 0 15px;
            padding-top: 21px;
        }
        .nav li a {
            display: block;
            height: 33px;
            background: url(image/to.png) no-repeat;
            color: #fff;
            font-size: 14px;
            line-height: 33px;
            text-decoration: none;
            padding-left: 15px;

        }
        .nav li a:hover {
            background-image: url(image/ao.png);
        }
        .nav li a:hover span {
            background-image: url(image/ao.png);
        }

        .nav li a span {
            display: block;
            line-height: 33px;
            background: url(image/to.png) no-repeat right;
            padding-right: 15px;

        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>帮助与反馈</span>
                </a>
            </li>
                <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            
            </li>
            <li>
                <a href="#">
                    <span>帮助与反馈</span>
                </a>
            </li>
                <li>
                <a href="#">
                    <span>公众平台</span>
                </a>
            
            </li>
        </ul>
    </div>
</body>
</html>
View Code

 

posted @ 2019-11-26 15:47  ivy_wang  阅读(376)  评论(0)  编辑  收藏  举报