CSS3—雪碧图和滑动门

最新推荐文章于 2023-05-29 14:30:14 发布

脑袋不灵光的小白羊

最新推荐文章于 2023-05-29 14:30:14 发布

阅读量298

点赞数

分类专栏： HTML+CSS+JS 文章标签： css html

本文链接：https://blog.csdn.net/qq_42588990/article/details/107590596

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、CSS Sprite（雪碧图）

CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。
在这里插入图片描述

CSS Sprite原理：

其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprite优点：
1. 利用CSS Sprite能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS sprite能减少图片的字节，(网络传输以字节为单位，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。
3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名

用一句话来概述就是
“CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。”

怎么制作CSS Sprite图

我们程序员一般通过雪碧图生成工具来制作雪碧图
在这里插入图片描述

在这里插入图片描述

如何使用雪碧生成工具

1.用PS把需要的图切出来
2.打开CssSprite.exe文件
下载地址：http://download.csdn.net/detail/wx247919365/8641795
3.点击左上角按钮打开图片
4.排列图片
可以点击按钮来排列，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图
5.是否是手机端
勾选后雪碧图的大小会缩小2倍
6.代码生成
有sass和css两个选项，选择后者。sass是一种CSS预处理语言，能清晰的、结构化的描述文件样式。
7.大图类型要选择png，图片背景色为Transparent透明

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style>
        div{
            width: 131px;
            height: 130px;
            border: 1px solid red;
            background-image: url("img/img.png");
        }
        .two{
            width: 131px;
            height: 162px;
           background-position: -131px 0;
        }
        .three{
            width: 131px;
            height: 162px;
            background-position: -262px 0;
        }
    </style>
</head>
<body>
    <div  class="one"></div>
    <div  class="two"></div>
    <div  class="three"></div>
    <div  class="fore"></div>
    <div  class="five"></div>
    <div  class="six"></div>
</body>
</html>

二、滑动门

1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>滑动门</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
          margin: 100px;
          display: inline-block;
          /*千万不能设置宽*/
           height: 33px;
            background: url("img/lTcb_ve.png") no-repeat;
            padding-left: 15px;
            color: #fff;
            text-decoration: none;
            line-height: 33px;
        }
        a  span{
            display: inline-block;
            /*千万不能设置宽*/
            height: 33px;
            background: url("img/lTcb_ve.png") no-repeat  right;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
    <a href="#">
        <span>开发平台</span>
    </a>
    <a href="#">
        <span>北京尚学堂</span>
    </a>
</body>
</html>

微信导航栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>微信导航栏(一)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        body{
            background: url("img/wrap.jpg")  repeat-x;
        }
        .nav{
            height: 75px;
        }
        .nav li a{
            display: block;
            background: url("img/lTcb_ve.png")  no-repeat;
            padding-left: 15px;
            color: #fff;
            font-size: 14px;
            line-height: 33px;
            text-decoration: none;
        }
        .nav li a span{
            display: block;
            line-height: 33px;
            background: url("img/lTcb_ve.png") no-repeat right  center;
            padding-right: 15px;
        }
        .nav li a:hover{
            background-image: url("img/ao.png") ;
        }
        .nav li a:hover span{
            background-image: url("img/ao.png") ;
        }
        .nav li{
            float: left;
            margin: 0 10px;
            padding-top: 21px;
        }
    </style>
</head>
<body>
    <div  class="nav">
        <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> <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>
    </div>
</body>
</html>

脑袋不灵光的小白羊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3—雪碧图和滑动门

一、CSS Sprite（雪碧图）CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。CSS Sprite原理：其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、backg
复制链接

扫一扫