0035 sliding doors

The first to experience the reality of the sliding doors, sliding doors or you can be called:

Here Insert Picture Description

Sliding doors appear background

Make pages for aesthetic, often you need to set up a special shape for the background page elements, such as micro-channel navigation bar, with raised and sunken feeling, the biggest problem is there is not as much of words, are we supposed to?

In order to make all kinds of special shape of the background elements of Chinese can adaptively how much of this content, the emergence of CSS sliding doors technique. Construction of new angles page, so that the background of various special shapes can be freely slidable stretched to fit inside the text element, better usability. The most common variety in the navigation bar of the sliding door.

http://weixin.qq.com/

Core technologies

The core technology is the use of CSS sprites (mainly background position) and the width of the box padding distraction in order to adapt to different words of the navigation bar.

General classic layout are like this:

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

css styles

* {
      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);
    }

to sum up:

setting a background left, padding distraction suitable width.
BACKGROUND span setting right, padding softened by a word appropriate to continue the expansion width of the remaining width.
The reason why is because the entire span includes a navigation are clickable.

<!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>

Sliding doors appear background

Core technologies

Guess you like