文档章节

CSS Sprite——CSS雪碧图

上古遗露
 上古遗露
发布于 2015/12/16 00:53
字数 858
阅读 92
收藏 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元素不能设置宽高,因为它属于行布局,其特性是在一行里进行布局,所以不能被设定宽高

上一篇: JS动画
上古遗露
粉丝 8
博文 56
码字总数 42929
作品 0
苏州
私信 提问
加载中
请先登录后再评论。
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
7.9K
8
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.9K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.3K
1
实时分析系统--istatd

istatd是IMVU公司工程师开发的一款优秀的实时分析系统,能够有效地收集,存储和搜索各种分析指标,类似cacti,Graphite,Zabbix等系统。实际上,istatd修改了Graphite的存储后端,重新实现了...

匿名
2013/02/07
3.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-08-15

最后更新时间: 2020-08-15 04:01 Welders set off Beirut blast while securing explosives - (maritime-executive.com) 焊工在固定炸药的同时引爆了贝鲁特爆炸 得分:215 | 评论:209 Factor......

FalconChen
今天
24
0
OSChina 周六乱弹 —— 老椅小猫秋乡梦 梦里石台堆小鱼

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @小小编辑 :《MOM》- 蜡笔小心 《MOM》- 蜡笔小心 手机党少年们想听歌,请使劲儿戳(这里) @狄工 :腾讯又在裁员了,35岁以上清退,抖音看到...

小小编辑
今天
71
1
构建高性能队列,你不得不知道的底层知识!

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥。 上一节,我们一起学习了如何将递归改写为非递归,其中,用到的数据结构主要是栈。 栈和队列...

彤哥读源码
今天
17
0
Anaconda下安装keras和tensorflow

Anaconda下安装keras和tensorflow 一、下载并安装Anaconda: Anaconda下载 安装步骤: 如果是多用户操作系统选择All Users,单用户选择Just Me 选择合适的安装路径 然后勾选这个,自动配置环境...

Atlantis-Brook
今天
15
0
滴滴ElasticSearch千万级TPS写入性能翻倍技术剖析

桔妹导读:滴滴ElasticSearch平台承接了公司内部所有使用ElasticSearch的业务,包括核心搜索、RDS从库、日志检索、安全数据分析、指标数据分析等等。平台规模达到了3000+节点,5PB 的数据存储...

滴滴技术
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部