雪碧图应用
2018-06-24 00:28:15来源:未知 阅读 ()
最近学习了雪碧图的使用,雪碧图的好处这块就不多说了,只说应用部分。
雪碧图的使用依赖于background-position这个属性,属性值分别为x,y轴的值,图片的显示大小由容器决定,简单点说,就是承载该图片的大小是多大显示区间就是多大,起始点就是background-position属性值的坐标。
例写法:.btn2{background-position:0 -38px; }
素材取自慕课网雪碧图课程http://www.imooc.com/code/1992
<!DOCTYPE html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> /*清除默认样式*/ html,body,ul,li,button,div,input,a{ padding:0; margin:0; } a{text-decoration:none} body{ font-size:10px;} .content input::-webkit-input-placeholder {color:#ccc;padding-left:30px;} </style> <style> /*书写样式*/ .content{margin-top:15px;padding:10px; width:190px;height:240px;background-color:#deeaf6;} .content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;} .content .text a{float:right; color:#696BF6;} .content input[type='text']{margin-bottom:15px;border:1px solid #CDCACA;width:100%; height:30px;border-radius:5px;background-color:#fff;} .button button{background:url("http://img.mukewang.com/539a972b00013e9102280177.jpg") no-repeat;width:100%;height:38px; margin-top:15px;border:none; } .button .btn1{background-position:0 0; } .button .btn2{background-position:0 -38px; } .button span{display:inline-block; width:100%;height:15px;border-bottom:1px solid #ccc; } </style> <body> <div class="content"> <input type="text" placeholder="邮箱/手机号/用户名"/> <input type="text" placeholder="请输入密码"/> <div class="text"> <input type="checkbox" id="box"/> <label for="box">下次自动登录</label> <a href="#">忘记密码?</a> </div> <div class="button"> <button class="btn1"></button> <span></span> <button class="btn2"></button> </div> </div> </body> </html>
书写过程中遇到的几个小问题:
清除a标签样式
使用text-decoration:none。其他属性overline——上划线,underline——默认的下划线,line-through——贯穿线
改变placeholder的样式
因为不同浏览器存在兼容性问题,这里主要设置webkit内核浏览器、火狐浏览器、IE浏览器三种,伪类的写法如下:
::-moz-placeholder{color:red;} //ff19+ :-moz-placeholder{color:red} //ff18- ::-webkit-input-placeholder{color:red;} //chrome,safari :-ms-input-placeholder{color:red;} //ie10
复选框与文字不对齐的解决:
这个问题设置默认的margin和padding是无法去掉的,可以为复选框和文字都使用vertical-align:middle属性即可,如文中代码:
.content .text input,.content .text label,.content .text a{ vertical-align:middle;height:20px;line-height:20px;}
去除输入框获取焦点时的浅蓝色边框
设置input属性outline:none
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:img的hover事件闪动
下一篇:网站换肤
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash