CSS滑动门

滑动门出现的背景

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


wxx.jpg

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

http://weixin.qq.com/

核心技术

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

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

  • 导航栏内容
  • 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);
        }
    

    总结:

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

    你可能感兴趣的:(CSS滑动门)