-
看看效果！查看全部
-
不错不错查看全部
-
完整简洁版本查看全部
-
提交，欢迎查看交流~查看全部
-
【2-1 CSS Sprite雪碧图实现方式】 1.PS手动拼图：适用自己的小网站 2.使用sprite工具自动生成：用小图生成大的雪碧图,同时返回给每个小图对应的坐标 点 工具介绍：CSS sprite自动生成工具--CssGaga 官网：http://www.99css.com/ win环境下快速生成雪碧图的工具,同时自动帮我们写好background-position的代码查看全部
-
【1-2 CSS Sprite雪碧图实现原理】 通过CSS background-position来控制 坐标轴,拼合背景图的小图(x,y)为负值 以雪碧图左上角的定点为(0,0)坐标 当需要对坐标系中的某个小图标进行展示的时候，例如(-100,0)，只需要将 background-position:-100,0; 原理： 控制一个层,可显示的区域范围大小, 通过一个窗口,进行背景图的滑动.查看全部
-
【1-1 CSS Sprite雪碧图使用场景】 案例： 1.导航条，上的图标，优化时不适用img标签 2.登陆框，上注册，登陆按钮 3.淘宝首页分析：边栏导航图片；banner按需加载不是雪碧图；有纯色背景的按钮(登 陆，免费注册)，不是图片，通常用css样式写按钮背景；而小的icon是字体文件做出 来的 总结： 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小(单张3k-5k) 3.加载量比较大 一些大图不建议拼成雪碧图 点中淘宝侧栏导航,看到<i></i>样式中给了背景图片是雪碧图，好处： 有效的减少http请求数量,加速内容显示(cause每请求一次,就会和服务器链接一次,建 立链接是需要额外的时间开销) 课程内容：原理>CSS Sprite>完整内容查看全部
-
input[type='button']查看全部
-
对.cat-x 下的i标签设置background-position查看全部
-
完成页面当中的展示列表HTML的结构代码 1.注意标签的语义化，无序列表需使用ul和li。 2.标题部分要使用h3标签。 3.每个li结构当中会有一个i标签用来展示icon。 为列表的容器添加class和样式，同时reset列表本身的容器 1.注意要reset H3的默认样式。 2.li和ul要去掉默认的样式。 3.为ul的容器div增加class，并设置样式。查看全部
-
CSS Sprite图生成工具——CSS Gaga，下载地址：http://www.99css.com/archives/1524查看全部
-
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图生成工具——CSS Gaga，下载地址：http://www.99css.com/archives/1524查看全部
-
实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。主要是在background-position上调整图的位置查看全部
-
CSS Sprite雪碧图运用 1，静态图片，不随用户信息的变化而变化 2，小图片，图片容量比较小 3，加载量比较大 4，大图不建议拼成雪碧图查看全部
举报
0/150
提交
取消