css sprite应用
（一）实现简单的淘宝带图标侧边栏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul,h3{padding: 0;margin:0;
list-style: none;
font-size: 14px;
font-weight: 400}
.cat{width:150px;
background-color: #f8f8f8;
border: 1px solid #bbb;}
li{line-height: 31px;
height: 31px;
border-bottom: 1px solid #dedede;
overflow: hidden;}
li i{background:url(sidebar.png);
display: inline;
width: 30px;
height: 40px;
float: left;
margin-top:6px;
margin-left:25px;
}
.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;}
.cat-9 i{background-position: -40px 0;}
</style>
<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>
<li class="cat-9"><i></i><h3>其他分类</h3></li>
</ul>
</div>
</body>
</html>
效果图：
（二）实现人人网登录页面（登录和提交按钮通过css sprite实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
<style>
input,p,span,ul,li{margin:0;padding: 0;}
.cat{width: 192px;
background-color:#EFFBFE;
padding-left: 15px;
position: relative;}
span{font-size: 14px;
font-weight: 400px;}
input{margin-top: 10px;}
.login{
width: 176px;
height: 32px;
text-indent: 2em;
font-size: 13px;
font-family:sans-serif;
border-radius: 3px;
border:1px solid #bbbbbb;}
a{text-decoration: none;}
hr{width:176px;margin-top: 14px;
position: absolute;left: 15px;}
p{font-size: 12px;
font-family: sans-serif;} /* input[type="button"]{
width:180px;height:38px;
border:0;margin-top:15px;
cursor:pointer;}*/ /*按钮如果不设置长宽的话则图标无法正常显示*/
.login_btn,.reg_btn{
width:180px;height:38px;
border:0;margin-top:15px;
cursor:pointer;}
.login_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position: 0 0;}
.reg_btn{background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
background-position: 0 -38px;}
</style>
</head>
<body>
<div class="cat">
<form action="#" method="post">
<input type="text" class="login"placeholder="邮箱/手机号/用户名"/>
<input type="password" class="login" placeholder="请输入密码">
<br>
<p>
<input type="checkbox" class="auto" checked="">下次自动登录
<a href="#">忘记密码?</a>
</p>
<input type="button" class="login_btn"><br>
<hr>
<br>
<input type="button" class="reg_btn">
</form>
</div>
</body>
</html>
效果图：
参考：慕课网
css sprite应用的更多相关文章
- css sprite，css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- css sprite 调整大张图片中小图标的大小
直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...
- HTML CSS SPRITE 工具
推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- CSS雪碧，即CSS Sprite 简单的例子
CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
- CSS Sprite 图标
HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite的优缺点分析
目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
随机推荐
- maven之package与install的区别
mvn clean package 先看命令的执行过程 mvn clean install 同样先看执行过程 mvn clean package依次执行了clean.resources.compile ...
- c/c++容器操作
C++中的容器大致可以分为两个大类:顺序容器和关联容器.顺序容器中包含有顺序容器适配器. 顺序容器:将单一类型元素聚集起来成为容器,然后根据位置来存储和访问这些元素.主要有vector.list.de ...
- itop-4412开发板学习-内核信号量
1. 翻翻书看下,linux提供两种信号量,内核信号量,由内核控制路径使用,System V IPC信号量,由用户态进程使用.下面的就是内核部分的信号量.内核信号量类似于自旋锁,当锁关闭着时,不允许内 ...
- 责任链模式的使用-Netty ChannelPipeline和Mina IoFilterChain分析
本文来自网易云社区 作者:乔安然 1. Chain of Responsiblity 定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链 ...
- mysql 导入CSV数据 [转]
转自: http://blog.chinaunix.net/uid-23284114-id-3196638.html MYSQL LOAD DATA INFILE命令可以把csv平面文件中的数据导 ...
- 一丶人生苦短，我用python【第一篇】
1 解释器 解释器(英语:Interpreter),又译为直译器,是一种电脑程序,能够把高级编程语言一行一行直接转译运行.解释器不会一次把整个程序转译出来,只像一位"中间人",每次 ...
- 在Kotlin编写RecyclerView适配器（KAD 16）
作者:Antonio Leiva 时间:Mar 14, 2017 原文链接:https://antonioleiva.com/recyclerview-adapter-kotlin/ 通过创建Recy ...
- Android Spiner实现Key-Value
原网址:http://www.eoeandroid.com/thread-29687-1-1.html?_dsign=02d5cd6a 学习到的方法,直接上代码了: 1.定义一个class publi ...
- 1018 Public Bike Management （30 分）（图的遍历and最短路径）
这题不能直接在Dijkstra中写这个第一 标尺和第二标尺的要求 因为这是需要完整路径以后才能计算的 所以写完后可以在遍历 #include<bits/stdc++.h> using n ...
- preparedstatement execute()操作成功！但是返回false
转自http://blog.sina.com.cn/s/blog_963fb3af01013rcs.html Connection con = getConn(); String sql2 = &qu ...