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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- BZOJ2819 Nim（DFS序）
题目:单点修改.树链查询. 可以直接用树链剖分做.. 修改是O(QlogN),查询是O(QlogNlogN),Q=N=500000: 听说会超时.. 这题也可以用DFS序来做. 先不看修改,单单查询: ...
- POJ2115 C Looooops（线性同余方程）
无符号k位数溢出就相当于mod 2k,然后设循环x次A等于B,就可以列出方程: $$ Cx+A \equiv B \pmod {2^k} $$ $$ Cx \equiv B-A \pmod {2^k} ...
- 浅谈MySQL索引背后的数据结构及算法
摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...
- 【转】eclipse插件开发，调试运行，导出与安装
[转自]http://www.kankanews.com/ICkengine/archives/61043.shtml 文章来自KENGINE | Kankanews.com 摘要: 本文主要讲ecl ...
- 如何对Backbone.Collection进行过滤操作
首先我想说的是这篇文章的题目起的很怪,因为我不知道起个什么名字比较好.渲染列表是我们应用中最常见的操作了吧,在运用Backbone的应用中,我们一般会把列表作为一个Collcetion,然后指定一个V ...
- 4.1 avd
6.接着我们回到文件夹界面,运行 AVD Manager.exe. 7.打开 AVD Manager.exe后,点击“New"创建新的模拟器: 8.创建一个新的 Android Virtua ...
- 清除 WD MyCloud 自动生成的 .wdmc 目录
1. 先 SSH,停止相应服务 /etc/init.d/wdmcserverd stop/etc/init.d/wdphotodbmergerd stop 2. 禁止服务自启动 update-rc.d ...
- 从JAVA客户端访问Redis示例(入门)
转自:http://blog.csdn.net/kkdelta/article/details/7217761 本文记录了安装Redis和从JAVA端访问Redis的步骤 从http://downlo ...
- CentoS 下安装gitlab
curl https://raw.github.com/mattias-ohlsson/gitlab-installer/master/gitlab-install-el6.sh | bash 报错 ...
- git 基于发布分支的开发
创建发布分支: (1) 软件hello-world的1.0发布版本库中有一个里程相对应. /home/jackluo/workspace/user1/workspace/hello-worldgit ...