0035 滑动门

先来体会下现实中的滑动门,或者你可以叫做推拉门：

在这里插入图片描述

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

http://weixin.qq.com/

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }

总结：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*1. a 是 设置 左侧 背景 （左门）*/
        a {
             /*因为我们是滑动门，左右推拉 跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/
            display: inline-block;
            height: 33px;
            background: url(images/to.png) no-repeat;
            margin: 100px;
            padding-left: 15px;
            color: #fff;
        }
        /*2. span 是设置 右侧 背景 （右门）*/
        a span {
            display: inline-block;
            height: 33px;
            /*一定注意 span 需要背景图片 右对齐*/
            background: url(images/to.png) no-repeat right top;
            padding-right: 15px;
        }
        /*3 因为整个导航栏都是 链接 所以 a 要包含 span */
        
    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
    <a href="#">
        <span>公司新闻</span>
    </a>
</body>
</html>

滑动门出现的背景

核心技术

猜你喜欢