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 ...

随机推荐

Git 查看远程分支、本地分支、删除本地分支及远程分支
1. 删除本地分支: git branch -d branchName 2. 删除远程分支: // 方法一:将删除的本地分支推到远程(要删除的远程分支在本地有映射) git push origin : ...
导入execl到数据库mysql
GwykhrenyuankuList <body jwcid="$content$"> <span jwcid="@components/AppBord ...
Linux/CentOS防CC攻击脚本
#!/bin/sh cd /var/log/httpd/ cat access_log|awk > a cp /dev/null access_log cp /dev/null error_lo ...
Apache 服务器性能评估
1 查看当前并发连接数 netstat -an | grep ESTABLISHED | wc -l 2 查看当前进程数 ps aux|grep httpd|wc -l
java通过句柄访问对象
在Java里,任何东西都可看作对象.尽管将一切都“看作”对象,但操纵的标识符实际是指向一个对象的“句柄”(Handle),有的人将其称作一个“引用”,甚至一个“指针”. 主类型的数据成员可直接初始化, ...
JMeter-取样器
JMeter取样器: 1.右键点击新建的线程组,选择Add---->Sampler---->HTTP Request:(如图) 2.新建取样器之后的界面如图: 3.根据上图中的数字标识解释 ...
孤荷凌寒自学python第六十七天初步了解Python爬虫初识requests模块
孤荷凌寒自学python第六十七天初步了解Python爬虫初识requests模块 (完整学习过程屏幕记录视频地址在文末) 从今天起开始正式学习Python的爬虫. 今天已经初步了解了两个主要的模块: ...
【Linux运维】LNMP环境配置
安装准备: Centos7.3 MYSQL5.6 PHP5.6 NGINX1.10.3 一.安装Mysql mysql:[root@host129 src]#cd /usr/local/src/ [r ...
Ajax跨域请求解决方式
前端 jQuery方式 .ajax({ type: "POST", url: "http://xxx.com/api/test", dataType: 'jso ...
XmlAutoGo
一个基于 Selenium 3.14.0的脚本执行工具,支持自动化解决方案.Github https://github.com/freeol/XmlAutoGo Document https://xm ...

css sprite应用

css sprite应用的更多相关文章

随机推荐

热门专题