-
<style type="text/css"> *{padding: 0;margin: 0; } .container{ width: 220px;height: 280px;background-color: #ebf2fa; } .myform{margin: 10px;overflow: hidden;} .username,.pass,#login,#enroll{display: block;height: 38px;width: 190px;margin: 15px auto;border: 1px solid gray;} .username,.pass{text-indent: 1.8em;font-size: 16px;border-radius:5px;/*边框角圆半径*/ } #autologin,.myform label,.myform a{display: inline-block;line-height: 12px;font-size: 12px; /*以下三条摘自张鑫旭博客，解决文字与复选框对齐问题*/ vertical-align: middle; margin-top: -2px; margin-bottom: 1px; } #autologin{ margin-left: 5px; } .myform a{text-indent: 3em;text-decoration: none; } #login{ background: url("http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg") 0 0;) } #enroll{ background: url("http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg") 0 -39px;) } hr{ border:0; height:1px; background:#D1D9E5;margin: 15px auto;width: 190px;} </style>查看全部
-
<body> <div class="container"> <form action="#" method="post" class="myform"> <input type="text" name="username" value="" placeholder="邮箱/手机号/用户名" class="username" /> <input type="password" name="password" value="" placeholder="请输入密码" class="pass" /> <input type="checkbox" name="checkbox" id="autologin" > <label for="autoligin">下次自动登录</label> <a href="#">忘记密码？</a> <input type="button" id="login"> <hr/> <input type="button" id="enroll"> </form> </div> </body> </html>查看全部
-
分割线怎么弄透明啊？？查看全部
-
i{background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);} .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;}查看全部
-
给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/（不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义） width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ margin:3px 10px 0 0;/*微调*/ } 然后再，根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}查看全部
-
给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/（不同浏览器默认值有些不一样，所以网页设计时，最好都明确定义） width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; /*浮动元素会生成一个块级框，从而可以设置宽高*/ margin:3px 10px 0 0;/*微调*/ } 然后再，根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}查看全部
-
1常用<i></i>来放小图片 2为给小图片设置background-position属性，需要给<li>定义一个类名<li class="cat-数字"> 3去掉<ul>标签下<li>标签的小黑点，在<style>标签下ul{list-style:none} 4不依赖于浏览器自身所设定的margin、padding，通过对<li>的行高已经margin、padding的设置来展示样式以便在各个浏览器下效果相同：先将display属性设置为block，否则设置行高什么的没用，overflow：hidden可防止元素溢出查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值 下载地址：http://www.99css.com/archives/1524查看全部
-
1、通过css的背景定位属性：background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 2、实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
-
雪碧图生成工具:CssGaga查看全部
-
雪碧图使用： 1.静态图片，不随用户信息的变化而变化。 2.小图片，图片容量比较小。 3.加载量比较大。 一些大图不建议拼成雪碧图。查看全部
-
CSS Sprite雪碧图实现方式 1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站 2.使用spite工具自动生成雪碧图 CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值 下载地址：http://www.99css.com/archives/1524查看全部
-
cssscrpite雪碧图 静态图片，不随用户信息变化而变化。 小图片，容量比较小 加载量比较大。（目的是：有效的减少http请求的数量） 大图不建议拼成雪碧图，加载时间长查看全部
-
li i { display: inline; float: left; margin: 3px 10px 0 0; height: 24px; width: 30px; }查看全部
-
i{background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);} .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;}查看全部
举报
0/150
提交
取消