-
作业提交查看全部
-
雪碧图设计： 先对图标区域设置背景图 再将其相应区域撑开，即定义宽高 最后再逐个设置背景图的位置坐标，即：background-position属性 display:inline 为了设置高度和宽度查看全部
-
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可防止元素溢出 （决定浏览器如何处理溢出的步骤： (1) 输入 overflow: 。 (2) 输入 visible ，让元素盒子中的所有内容可见，这是默认项； 或者输入 hidden ，隐藏元素盒子容纳不了的内容； 或者输入 scroll ，无论元素是否需要，都在元素上添加滚动条； 或者输入 auto ，让滚动条仅在访问者访问溢出内容时出现。）查看全部
-
使用雪碧图：1.静态图片，不随用户信息变化而变化。2.小图片，图片容量小。3.加载量比较大。一些大图不建议拼成雪碧图。减小http请求数，加速时间。能减少请求就要减少请求。 浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动设备上尤为明显。为了解决这一问题，可以将多个图像拼合成单个背景图像（sprite），再通过 CSS 控制具体显示图像的哪一部分。其中的秘密就是 background-position 属性。查看全部
-
过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0;查看全部
-
使用雪碧图情况： 1，静态图片，不随用户信息变化而变化。 2，小图片，图片容量小。 3，加载量比较大。一些大图不建议拼成雪碧图。 目的：减小http请求数，加速时间。能减少请求就要减少请求。查看全部
-
雪碧图实现方式： spite生成工具：CSS Gaga 下载地址：http://www.99css.com/archives/1524查看全部
-
雪碧图就是为了减少http请求次数，而使用的不会被频繁更换的图片用css样式的方法去表现出来查看全部
-
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 -118px;} .cat-7 i{background-position:0 -140px;} .cat-8 i{background-position:0 -164px;}查看全部
-
雪碧图设计： 先对图标区域设置背景图 再将其相应区域撑开，即定义宽高 最后再逐个设置背景图的位置坐标，即：background-position属性 display:inline 为了设置高度和宽度查看全部
-
body,ul,li,i,h3{margin:1px;padding:1px;} .cat{width:180px; border:1px solid #8E8E8E;} .cat ul{list-style:none;} .cat li{width:150px;border-bottom:1px solid #cccccc; margin-bottom:5px; text-align:center; margin-left:15px; } .cat .cat-8{border:none;} .cat li h3{font-size:14px; font-weight:500;} .cat a{text-decoration:none; color:#666666;height:31px;line-height:31px;padding:8px 0;}查看全部
-
雪碧图实现方式： spite生成工具：CSS Gaga 下载地址：http://www.99css.com/archives/1524查看全部
-
过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。查看全部
-
使用雪碧图的情况： 目的：http的请求数，加速内容显示 建立链接需要额外的时间查看全部
-
<div>li{didplay:block;overflow:hidden;boder-buttom :1px solid #ccc} <ul> <li></li> <h3>服装内衣</h3> </ul> </div>查看全部
举报
0/150
提交
取消