黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 王晓燕    时间: 2020-3-2 20:46
标题: 技术贴
精灵技术

首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。
2. 给盒子指定小背景图片时， 背景定位基本都是 负值。



滑动门

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

    <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);

  }

总结：

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2