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="">下次自动登录

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         <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>  <!-- 以上是Sublime Text ...
CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
CSS Sprite的优缺点分析
目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...
CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图代码 &l ...

随机推荐

WCF入门四[WCF的通信模式]
一.概述 WCF的通信模式有三种:请求/响应模式.单向模式和双工通信. 二.请求/响应模式请求/响应模式就是WCF的默认模式,前面几篇随笔中的示例都是这种模式,当客户端发送请求后(非异步状态下),即 ...
[【转】ubuntu 16.10 Server 安装及基本部署
一.Ubuntu Server 16.10 LTS 系统安装 Ubuntu 16.10 分为桌面版 (desktop)和服务器版(Server).两者对于用户而言,最大的区别在于桌面版有图形操作界面 ...
CC3200在sl_Start函数处不断重启复位的原因解析
1. 使用过程中,自己写的工程,发现CC3200一直重启,首先需要定位出现重启的函数?看门狗复位,还是程序跑飞复位?NWP的版本不匹配?经过测试找到出问题的函数,这个函数是启动网络的函数. lRetV ...
NOI2018 游记
day-2 飞向长沙上午收拾了收拾东西,下载了动画<爱吃拉面的小泉同学>的前五集. 吃过午饭,就准备坐车去运城机场.高铁飞速,转眼间就到了.我没坐过几次飞机,而且比较恐飞,就很难受qwq ...
iOS URL加解密
URL加解密背景介绍 iOS 下URL加解密,项目使用AFNetworking 虽然是使用HTTPS,但是从安全方面考虑,在很多情况下还是需要对url的参数进行加密的. 接口如 https://19 ...
Git 使用粗糙记录
版本控制应该是每一个开发人员应该会的东西,奈何,学校没有学习,随着写代码的时间的加长,越来月觉得版本控制的必要性了. 记得在实习的公司,同一痛的都是SVN. 至于GIt和SVN的区别,直接看连接 ht ...
linux ----- Vim进入和退出命令
Vim进入和退出命令本来不想写任何关于vim的文章的,无奈我今天又忘记怎么退出vim了,常用命令是ESC,然后:wq(保存并退出),:q!(不保存并强制退出),i进入vim模式.另外还有其它 ...
孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5
孤荷凌寒自学python第七十五天开始写Python的第一个爬虫5 (完整学习过程屏幕记录视频地址在文末) 今天在上一天的基础上继续完成对我的第一个代码程序的书写. 直接上代码.详细过程见文末屏幕录像 ...
剑指offer-数值的整数次方12
class Solution: def Power(self, base, exponent): # write code here if base==0: return 0 if exponent= ...
关于缺失值（missing value）的处理---机器学习 Imputer
关于缺失值(missing value)的处理在sklearn的preprocessing包中包含了对数据集中缺失值的处理,主要是应用Imputer类进行处理. 首先需要说明的是,numpy的数组中 ...

css sprite应用

css sprite应用的更多相关文章

随机推荐

热门专题