CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标、登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图。
两个小例子:
- 淘宝首页的侧栏图
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
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;
} h3 {
display: block;
margin: 0;
padding: 0;
}
.cat {
position: relative;
width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
} ol, ul {
list-style: none;
} li{
z-index: 2;/*设置元素的堆叠顺序,初始为0,2表示优先级更高*/
position: relative;/*相对定位*/
display: block;/*规定元素应该生成的框的类型,此元素将显示为块级元素*/
height: 30px;
line-height: 30px;
overflow: hidden;/*内容溢出元素框时发生的事情*/
margin: 1px 10px 0;/*元素的所有外边距*/
vertical-align: bottom;/*元素的对齐方式*/
border-bottom: 1px solid #dedede;
} li h3 {
font-size: 14px;
font-weight: 400;
} li i {
display: inline;
float: left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
} .cat i{
background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg )
}
.cat-1 i{
background-position: 0 0;
}
.cat-2 i{
background-position: 0 -24px;
}
.cat-3 i{
background-position: 0 -48px;
}
.cat-4 i{
background-position: 0 -72px;
}
.cat-5 i{
background-position: 0 -96px;
}
.cat-6 i{
background-position: 0 -120px;
}
.cat-7 i{
background-position: 0 -144px;
}
.cat-8 i{
background-position: 0 -168px;
} </style>
<title>Document</title> </head>
<body>
<div class="cat">
<ul>
<li class="cat-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="cat-3">
<i></i>
<h3>户外运动</h3>
</li>
<li class="cat-4">
<i></i>
<h3>珠宝手表</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手机数码</h3>
</li>
<li class="cat-6">
<i></i>
<h3>家电办公</h3>
</li>
<li class="cat-7">
<i></i>
<h3>护肤彩妆</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母婴用品</h3>
</li>
</ul>
</div>
</body>
</html>效果:
雪碧图:
- 代码
- 登录页面:
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.inner{width:190px;
background-color:#d5f4f5;
padding:10px 20px;} .tp{
width:190px;
height:30px;
text-indent:20px; }
input[type="password"]{
margin-top:10px; }
p{
font-size:12px;
margin-top:10px;
overflow:hidden; }
p input{
vertical-align:top;
margin-right:4px; }
p a{
ext-decoration:none;
float:right;
}
input[type="button"]{
width:190px;
height:37px;
border:0;
margin-top:15px;
cursor:pointer; }
#login{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);}
#enroll{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -37px;}
hr{
margin-top:20px;
color:#f5f5ef; }
</style>
</head> <body>
<div class="inner">
<form>
<input class="tp" type="text" placeholder="邮箱/手机号/用户名" />
<input class="tp" type="password" placeholder="请输入密码" />
<p>
<input type="checkbox" />下次自动登录<a href="javascript:;">忘记密码?</a>
</p>
<input id="login" type="button">
<hr />
<input id="enroll" type="button">
</form>
</div> </body>
</html>
效果图:
雪碧图:http://img.mukewang.com/539a972b00013e9102280177.jpg
CSS Sprite雪碧图的更多相关文章
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
- Css Sprite(雪碧图、精灵图)<图像拼合技术>
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...
随机推荐
- 变分自编码器(Variational Autoencoder, VAE)通俗教程
原文地址:http://www.dengfanxin.cn/?p=334 1. 神秘变量与数据集 现在有一个数据集DX(dataset, 也可以叫datapoints),每个数据也称为数据点.我们假定 ...
- 单机多es容器服务部署的网络模式
3.1 Bridge模式的拓扑 当Docker server启动时,会在主机上创建一个名为docker0的虚拟网桥,此主机上启动的Docker容器会连接到这个虚拟网桥上.虚拟网桥的工作方式和物理交换机 ...
- xPath Helper插件
xPath Helper插件 xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的xPath,程序员就再也不需要通过搜索html源代 ...
- angular2 图片赋值的时候前面自动加 unsafe:xxx 导致图片信息不显示问题
需要创建一个pipe 代码如下 import { Pipe, PipeTransform } from '@angular/core'; import {DomSanitizer} from '@an ...
- elsticsearch在kibanna中的操作
#建立索引 PUT /es_note_tel{ "settings": { "number_of_shards": 1 }, "mappings&qu ...
- Centos安装Consul微服务
一.简介 Consul([ˈkɒnsl],康搜)是注册中心,服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离.除了Consul之外,还有Eureka.Zoo ...
- How Classes are Found
转载自: https://docs.oracle.com/javase/7/docs/technotes/tools/findingclasses.html How Classes are Found ...
- Scrapyd 改进第一步: Web Interface 添加 charset=UTF-8, 避免查看 log 出现中文乱码
0.问题现象和原因 如下图所示,由于 Scrapyd 的 Web Interface 的 log 链接直接指向 log 文件,Response Headers 的 Content-Type 又没有声明 ...
- 指针*p,p,&p等辨别
#include<iostream> #include<iomanip> #include<cmath> using namespace std; int main ...
- Java - Multithreading zz
Java is a multi-threaded programming language which means we can develop multi-threaded program usin ...