文档章节

CSS Sprite——CSS雪碧图

上古遗露
 上古遗露
发布于 2015/12/16 00:53
字数 858
阅读 39
收藏 0
点赞 0
评论 0

雪碧图的使用原则

  1. 静态图片,不随用户信息变化而变化

  2. 小图片,图片容量较小

  3. 加载量较大的情况下使用

  4. 大图不建议使用雪碧图

作用

  1. 减少HTTP的请求数量:每请求一次,就会和服务器链接一次,建立连接需要额外的时间

  2. 加速内容的显示

实现原理

通过CSS background-position实现

控制一个层可显示区域范围的大小,通过一个窗口,进行背景图的滑动

实现方式

  1. PS手动拼图,要记住每张图的坐标点

  2. 使用sprite自动生成工具(CssGaga:www.99css.com/archives/1524)

实例

HTML代码:

<html>
<head>
<!--准备一个空白的HTML页面,同时完成css reset样式 -->
<meta charset="utf-8">
<style>
    * {padding:0; margin:0;}
    ul{ list-style-type:none; border:1px solid #555;}
    li {  border-bottom:1px solid #eee;display:block; overflow:hidden; height:32px; line-height:32px;}
    li h3 {font-size:15px; font-weight:400; font-family:“微软雅黑”;}
    .cat { width:150px; background:#f8f8f8;}
</style>
<!--补充完整的样式-->
</head>
<body>
<div class="cat">
    <ul>
        <li>
            <i class="cat_1"></i>
            <h3>服装内衣</h3>
        </li>
        <li>
            <i class="cat_2"></i>
            <h3>鞋包配饰</h3>
        </li>
        <li>
            <i class="cat_3"></i>
            <h3>运动户外</h3>
        </li>
        <li>
            <i class="cat_4"></i>
            <h3>珠宝手表</h3>
        </li>
        <li>
            <i class="cat_5"></i>
            <h3>手机数码</h3>
        </li>
        <li>
            <i class="cat_6"></i>
            <h3>家电办公</h3>
        </li>
        <li>
            <i class="cat_7"></i>
            <h3>护肤彩妆</h3>
        </li>
            <li>
            <i class="cat_8"></i>
            <h3>母婴用品</h3>
        </li>
    </ul>
</div>
</body>
</html>

雪碧图:

实现雪碧图:

li i { 
        background:url(http://img.mukewang.com/539a950e00015ba500710200.jpg); 
        display:inline; 
        float:left; 
        width:30px; 
        height:24px;
        margin:3px 10px 0 0;
    }
    .cat_1 { background-position:0 0; }
    .cat_2 { background-position:0 -24px; }
    .cat_3 { background-position:0 -48px; }
    .cat_4 { background-position:0 -72px; }
    .cat_5 { background-position:0 -96px; }
    .cat_6 { background-position:0 -120px; }
    .cat_7 { background-position:0 -144px; }
    .cat_8 { background-position:-40px -168px; }

效果:

登陆的雪碧图应用

雪碧图:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body>
<div class="login">
    <form method="post" action="" name="loginForm">
        <input type="text" name="username" placeholder="邮箱/手机号/用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="checkbox" name="auto_login" id="auto_login"><label for="auto_login">下次自动登陆</label>
        <a href="javascript:;">忘记密码?</a>
        <input type="submit" name="login_submit" value="登录">
        <input type="submit" name="register_submit" value="注册">
    </form>
</div>
</body>
</html>

效果:

设置CSS样式:

<style type="text/css">
	blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
        margin: 0;
        padding: 0;
    }
    .login {
        background-color:#ebf3fa;
        width:200px;
        overflow:hidden;
        padding:25px;
    }
    .login * {
        border-radius:3px;
        margin:5px 0;
    }
    .login input[type="text"],
    .login input[type="password"] {
        width:190px;
        height:35px;
        text-indent:20px;
        clear:both;
    }
    .login label[for="auto_login"] {
        font-size:10px;
    }
    .login a {
        text-decoration:none;
        font-size:10px;
    }
    .login input[type="submit"],
    .login input[type="login"] {
        width:190px;
        height:35px;
        color:#fff;
        word-spacing:5px;
        text-align:center;
        line-height:35px;
    }
    .login input[name*="submit"] {
        background:url(login.png) 0 0;
    }
    .login input[name*="register"] {
		background:url(login.png) 0 -38px;    
    }
    
</style>

效果:

CSS display:inline和float:left两者区别

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是&ldquo;行布局&rdquo;形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。 那么两者的区别显而易见:display:inline元素不能设置宽高,因为它属于行布局,其特性是在一行里进行布局,所以不能被设定宽高

© 著作权归作者所有

共有 人打赏支持
上古遗露
粉丝 7
博文 21
码字总数 42929
作品 0
苏州
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang ⋅ 2016/11/17 ⋅ 0

切片合并雪碧图--grunt-css-sprite

grunt-css-sprite 这是什么 这是一个帮助前端开发工程师将 css 代码中的切片合并成雪碧图的工具; 其灵感来源于 grunt-sprite,由于其配置参数限制目录结构等,不能满足通用项目需求,重新造...

米空格 ⋅ 2015/01/29 ⋅ 0

QMUI Web 框架正式发布 2.0 版本

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由QMUI 团队出品。 重要更新 本次框架更新版为 2.0 ...

kayo5994 ⋅ 2017/04/11 ⋅ 2

移动端使用 rem 单位时 css sprites 定位问题

现在开发移动端 wap 页面,相信大家都会使用强大的 rem 单位去适配各种机型和屏幕;为了减少网络请求数量,提高网页访问性能,一般都会把多个小 icon 合并成一张 sprite 图,然后根据 backgr...

幽涯 ⋅ 06/17 ⋅ 0

今天是仿淘宝的第一天,CSS sprite

今天是仿淘宝首页的第一天,对于刚入前端门的我来说,仿写淘宝首页不是那么的容易,所以第一天我大致把淘宝首页先分类割化成小块,一点一点攻破~吼吼~然后在网上查了些资料,结合自己的想法,...

Kvera ⋅ 2016/08/18 ⋅ 0

网站常用的小图标实现

在网站上我们经常能见到一些小图标,如小头像,小旗帜,一些勾勾叉叉等小图标。 一般的实现这些小图标有三种实现方案: 将所有常用的小图标罗列在一张大图片上,然后采用"css sprite"(或称"...

麦拂沙 ⋅ 2015/07/26 ⋅ 0

Sprite 图片合并工具--GoPng

Css Sprite,有时也称为雪碧图、精灵图,是每一个前端开都会遇到的问题,也是常见的小图片加载优化手段。相信各位同学都清楚其原理,具体就不赘述了。 之前一直有动机利用html5实现一个合成雪...

匿名 ⋅ 2012/06/01 ⋅ 0

微信团队前端开发工作流工具--WeFlow

这是一个高效、强大、跨平台(macOS & Win)的前端工具,核心基于 tmt-workflow 工作流,代码开源可定制,快来试试吧。 界面 自动化流程 Less -> CSS (Sass 可自行定制) CSS Autoprefixer 前...

hzlzh ⋅ 2016/06/20 ⋅ 26

CSS3技术-雪碧图自适应缩放

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取...

柠檬酷 ⋅ 2015/09/10 ⋅ 0

腾讯 Web UI 解决方案 QMUI Web 正式回迁开源

项目简介 QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。由腾讯广研 QMUI 团队出品。框架主要由一个丰富的 Sass 方法合集与内置的工作流构成。通过 QMUI Web...

kayo5994 ⋅ 2017/08/25 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 22分钟前 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 47分钟前 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

[知乎]SSH框架

网上图书馆管理系统包括管理员管理和图书管理,图书借阅,查询模块等等,网上商城包括前台页面和后台管理页面,两个都是以前别人的实际项目,只是别人用的不是SSH,我把他们改用SSH了,除了S...

颖伙虫 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部