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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- clumsy 0.1 测试工具(延迟\掉包\节流\重发\乱序\篡改)
clumsy : http://jagt.github.io/clumsy/可以模拟以下几种场景: 延迟(Lag),把数据包缓存一段时间后再发出,这样能够模拟网络延迟的状况. 掉包(Drop),随机丢 ...
- 调用WebServiceWebService提示The maximum string content length quota (8192) has been exceeded while reading XML data的解决办法
在web.config中,bindings节点下,对应的服务名称中,原本可能是自动折叠的“/>”,需要改成手动折叠的</binding>,然后在中间加上<readerQuota ...
- Session赋值（备注）
Session赋值也是在后台赋,不是在前台赋 追问 不好意思 那还真能在AJAX中赋值 我已经解决了 加一个接口IRequiresSessionState 就OK 提问者评价 太感谢了,真心有用
- 【COGS & USACO】896. 圈奶牛（凸包）
http://cojs.tk/cogs/problem/problem.php?pid=896 我的计算几何入门题... 看了看白书的计算几何部分,,恩好嘛.. 乃们都用向量!!!! 干嘛非要将2个点 ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置
策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...
- 对socket的一点理解笔记
需要学web service,但是在视频中讲解到了socket套接字编程.以前貌似课上老师有提过,只是没用到也感觉乏味.现在遇到,自己看了些博客和资料.记录一点理解,不知正确与否. 首先说这个名字,叫 ...
- Html - 仿QQ空间右下角工具浮动块
仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...
- 将正确的 HTTP 头转发给后端服务器的一些问题
Apache Software Foundation 的 HTTP 服务器项目(通常称为 Apache)是当今互联网上占据优势的 Web 服务器,它占据了 60% 以上的市场份额.Apache 服务器 ...
- Export-XLSX PowerShell generate real Excel XLSX files without Excel and COM
http://gallery.technet.microsoft.com/scriptcenter/Export-XLSX-PowerShell-f2f0c035
- 修改CSV中的某些值 -- 1
修改前: col1,col2,col3,col4 text1,text2,text3,text4 text5,text6,text7,text8 text9,text10,text11,text12 ...