css spprite应用
（一）实现简单的淘宝带图标侧边栏效果
<!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 spprite应用的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- ural 1437. Gasoline Station
1437. Gasoline Station Time limit: 1.0 secondMemory limit: 64 MB Once a gasoline meter broke at a fi ...
- tiledmap2
1 1.1 将tiledmap 保存为xml格式 1.2 在unity当中设置摄像机为"Orthogonal", 1.3 拖拽tiledmap prefab从project视图到H ...
- JSTL 的 if else : 有 c:if 没有 else 的处理
jstl的c:if 没有else 想要实现if...else...: 可以用下面的解决 -------------------------------------------------------- ...
- UVA 11235 (游程编码+ST算法)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=23846 题目大意:给定一个升序序列,有q次询问,每次询问(L,R) ...
- 【BZOJ】2818: Gcd（欧拉函数/莫比乌斯）
http://www.lydsy.com/JudgeOnline/problem.php?id=2818 我很sb的丢了原来做的一题上去.. 其实这题可以更简单.. 设 $$f[i]=1+2 \tim ...
- Idea_编译报错 javacTask: 源发行版 1.6 需要目标发行版 1.6
在idea中编译时发生如下的错误 Information:Using javac 1.7.0_75 to compile java sources Information:java: javacTas ...
- ajax无刷新获取php后台数据
$.ajax({ url:"result.php", //data:{"page":i}, dataType:"json", beforeS ...
- php 过时的sql操作库（学习使用）
学习地址:http://www.imooc.com/video/2459 <?php /** * 连接数据库 * @return resource */ function connect(){ ...
- 中科大各Linux发行版的更新源列表
sudo vi /etc/apt/sources.list Raspberry Pi deb http://mirrors.ustc.edu.cn/raspbian/raspbian/ jessie ...
- CodeForces 625A 思维
题意是说一个人喝酒 有两种办法 买塑料瓶的 a块钱 喝了就没了 或者是买玻璃瓶的b块钱 喝完还能卖了瓶子c块钱 求最多能喝多少瓶 在开始判断一次 a与b-c的关系 即两种方式喝酒的成本 如果a< ...