滑动门技术

原创于 2019-07-23 17:21:10 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

Web前端疑难点专栏收录该内容

8 篇文章

订阅专栏

产生背景：不同的字数宽度不同，因此我们不方便给固定的宽度这时就需要一种能够自由拉伸的技术

滑动门案例
在这里插入图片描述
滑动门：让我们的背景大小可以根据内容大小自己撑开这就是滑动们技术，使背景根据文字内容的大小自由拉伸，一般适用于导航栏

思路

a标签获取背景图片左角
span标签获取背景图片右角
内边距撑开盒子

代码实例

   <style>
        li{
            float: left;
            list-style: none;
            margin: 10px 20px;
        }
        a{
        	/*可以看到a标签没有设置宽度但是我们设置了一个内边距，利用内边距来撑开了一个盒子*/
            display: inline-block;  /*行内元素无法设置高度因此转化行内块*/
            height: 33px;
            padding-left: 15px;  /*我们给一个内边距撑开一部分盒子来放左边角*/
            background: url("nav.png") no-repeat left center; /*背景图片默认左上角对齐 left top 不受内边距影响*/
        }
        span{
            display: inline-block;
            height: 33px;
            line-height: 33px;
            text-decoration: none;
            color: #cccccc;
            padding-right: 15px;
            background: url("nav.png") no-repeat right center;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <a href="">
            <span>首页</span>
        </a>
    </li>
    <li>
        <a href="">
            <span>帮助与反馈</span>
        </a>
    </li>
    <li>
        <a href="">
            <span>公众平台</span>
        </a>
    </li>
</ul>

效果
在这里插入图片描述
总结