微信导航栏的双拉门设计

微信导航栏双拉门设计
1.微信导航栏采用双拉门设计，使导航栏呈现一种凹凸感，但是并不是用背景色来实现，他的导航栏背景是一张长条状的图，如图所示：

微信导航栏可以根据字体数量而变化，并且背景图都能够显示两边的圆角，原本认为可以通过改变背景图大小 即使用 background-size 100% 100% 来实现，发现效果并不一样。下面就说一下双拉门的设计：
结构如下：

	<div class="box">
        <div class="nav">
            <ul>
                <!-- 两个盒子  a + span 一个盒子放背景图 位置 0px 0px 
                另一个盒子放背景图的右上角 right top /100% center  -->
                <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>
    </div>

css样式如下：

  /* a插入左上角的背景图 */
    .nav ul li a {
      
        /* 行内块---> 行高才体现 才有高度 */
        display: inline-block;
        background: url(./image/image/bg01.png);
        background-position: 0 0;
        /* 背景图的大小 100% = 背景盒子的宽高*/
        /* background-size:100% 100% ; */
        padding-left: 15px;
    }
    /* span插入的右上角的背景图 */
    .nav ul li a  span {
        line-height: 33px;
        display: inline-block;
        background: url(./image/image/bg01.png);
        background-position: right top;
        padding-right: 15px;

    }

原本的导航栏中不写span标签，但是为了实现双拉门设计，加入一个span标签，让背景图由a的背景和span的背景拼合起来达到该效果。 a标签插入改该背景图，并让其显示背景图的左侧，span标签插入该背景图，让其显示背景图的右半部分。但是这样span会被覆盖，所以a 设置左内边距 span设置右内边距。