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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- HDU3586 Information Disturbing（树形DP）
题目大概说一棵树有边权,要删掉一些边,使叶子到达不了树根1且删掉边的权和小于等于m,问删掉边中最大权的最小值能是多少. 考虑问题规模,与转移的时间复杂度,用这么个状态dp: dp[u][k]表示在u结 ...
- PO3281 Dining（最大流）
如果只有食物或者饮料那就是个二分图最大匹配. 三个真想不出来..然后看题解..从源点到食物到牛到饮料到汇点,这样建图. 所以思维不能太局限了,不懂得把食物和饮料放到牛两边,以为牛吃食物饮料.食物饮料被 ...
- ZOJ3791 An Easy Game（DP）
给两个长n的01串s1和s2,要对s1进行k次修改,每次修改m个不同位置,问有几种方式修改成s2. 想偏了,只想到原始的01数值是不重要的,因为每个位置修改次数的奇偶性是确定的这一层.. 其实,这题只 ...
- ANSYS:Negative pivot encountered
做柔性体仿真,从ANSYS导入模态中性文件时有这个报错. Negative pivot encountered. This is likely caused by insufficient disp ...
- Revit二次开发示例：Journaling
关于Revit Journal读写的例子. #region Namespaces using System; using System.Collections.Generic; using Sys ...
- 【总结】String in Java
摘自:爪哇人的博客:http://hxraid.iteye.com/blog/522167/ J2SE - 语言基础与API JavaJVM虚拟机多线程数据结构 作者:每次上网冲杯Java时,都能看 ...
- android环境安装之android4.2安装(转)
准备学习android,着手安装android时听说很麻烦,在网上看了很多android安装说明,都是android比较早的版本,我这里安装了android4.2,简单记录一下. 安装分为几步,首先申 ...
- IntelliJ IDEA 14 SVN无法正常使用问题
通过SVN导入项目 SVN checkout时候会出现如下错误: Cannot run program "svn" (in directory "E:\Projects& ...
- jquery面试题里 缓存问题如何解决?
jquery面试题里 缓存问题如何解决? 如果直接用jQuery里的$.ajax()方法的话,去除缓存很简单,只需要配置一下缓存属性cache为false,但如果想要简单写法getJSON(),去除缓 ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...