CSS精灵图、滑动门详解

2017-07-04 本文已影响538人楚简约

1.精灵图

名称：精灵图 Sprite chart。它的由于来，每次请求网站的时候都会去请求图片，太麻烦。

网站中有很多的小的图片，为了将服务器处理太多的请求，我们把一些小的不经常变化的图片放在一张大图上面，来方便请求。

淘宝的精灵图.png

就是将网站上面一些不太变化的小的背景图标放在一个大的图片上在请求的时候一次性的将这些图片拿过来。

精灵图应用:

Background-positioin: x坐标 y坐标;
eg:
background-positioin: url(images/taobao.png) no-repeat 0 -133px;

改变容器的位置是不会影响背景图片的！！

精灵图坐标.png

精灵图的制作:
使用Adobe Fireworks CS5

Adobe Fireworks CS5.png

1. 放的都是一些小的不太变化的背景图片。
2. 精灵图的宽度一定要大于图片上最大小背景图。
3. 两个精灵图之间一定留一定的间隙
4. 精灵图的下面一定要留足空间，（是为了将来继续向精灵图中添加新的图片）

注意：如果给一个行内元素设置了position:absolute，那么这个行内元素会自动转成行内块元素。

行内元素：span,u,b,i,strong
块级元素：h1,h2,h3--h6,div,p
eg:
<span class="new"></span>
.new {
      width: 25px;
      height: 20px;
      position: absolute;
}

text-indent首行缩进属性

使用场景:
比如京东，在使用的时候是在一个a标签中放入京东的文字，再通过这个属性将文字缩进屏幕之外，然后给a标签一个背景图片。仅仅只是为了添加页面的一个权重。这个文字所占的权重就要高。这个文字不是给用户看的，而是给搜索引擎看的。

text-indent.png

注意：负值是允许的。如果值是负数，将第一行左缩进。默认值0, 能继承。

2.滑动门

它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用几张单独的背景图片, 就可以实现.

滑动门.png

应用在页面的布局上面时,制作圆角导航栏。
①有三个背景图片：

三个背景图片.png

在导航栏中放入一个ul标签，ul标签中有三个li标签。
分别在第一个中放入左圆角图片，在第二个中平铺第二图片，第三个li中放入右圆角图片。

圆角导航栏.png

 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Document</title>
    <style type="text/css">
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input, button {
             margin:0; 
             padding:0; 
     }
    ul {
         list-style: none;
    }
      div {
        width: 980px;
        height: 74px;
        margin: 0 auto;
        background: red;
      }
      .left {
        background: url(./huadongmeng/yuanjiao/yuanjiao_r1_c1.jpg) no-repeat;
        width: 22px;
        height: 74px;
        float: left;
      }
      .content {
        background: url(./huadongmeng/yuanjiao/yuanjiao_r1_c3.jpg) repeat-x;
        height: 74px;
        width: 938px;
        float: left;
      }
      .right {
        float: right;
        background: url(./huadongmeng/yuanjiao/yuanjiao_r1_c5.jpg) no-repeat;
        width: 20px;
        height: 74px;
      }
    </style>    
</head>
<body>
    <div>
        <ul>
            <li class="left"></li>
            <li class="content"></li>
            <li class="right"></li>
        </ul>
    </div>
</body>
</html>

②得到左边圆角，以级后整个背景

得到左边圆角，以级后整个背景.png

设置导航栏，在li标签中放入一个a标签，在标签中再嵌套一个span.
然后给a设置左圆角，给span设置背景（注意，背景是靠右的，并且span中要有padding-right,设置的值为后面角的长度。）

    <style type="text/css">
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input, button {
             margin:0; 
             padding:0; 
     }
        ul {
            list-style: none;
        }
        li {
            float: left;
        }
        a {
            display: inline-block;
            height: 35px;
            padding-left: 6px;
            background: url(04huadongmeng/l.png) no-repeat ;
        }
        a:hover  {
            color: #9CB906;
        }
        span {
            display: inline-block;
            height: 35px;
            background: url(04huadongmeng/r.png) no-repeat right;
            padding-right: 28px;
            line-height: 35px;
            text-align: center;
        }
    </style>

<body>
    <ul>
        <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>

</body>

②.png

这个地方需要注意:

a.背景图片的大小是不会影响容器的大小
b.父容器的位置改变是不会影响图片的显示位置

我是楚简约，感谢您的阅读，

喜欢就点个赞呗，“❤喜欢”，

鼓励又不花钱，你在看，我就继续写~

非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~

CSS精灵图、滑动门详解

1.精灵图

text-indent首行缩进属性

2.滑动门

CSS相关文章

猜你喜欢

热点阅读