css Sprites小实例代码(css实战案例)

编辑：rootadmin

这是一个很简单的应用，不过在设计中，这样做可以减轻服务器的压力，是请求次数减少，是一个不错的方法。特别要说明的是，在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少，不过有一个问题，就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。（时间长短视服务器的响应速度和图片大小而变化）下面是css的部分： body { font-family: "Lucida Sans", "Lucida Sans Unicode"; font-size: px; line-height: px; } ul { list-style-type: none; } li { float: left; } a{ background-image: url(bg.gif); height: px; background-position: px 0px; display: block; margin-right: px; width: px; text-align: center; color: #; } li a:link { text-decoration: none; } li a:visited { text-decoration: none; } li a:hover { text-decoration: none; background-position: 0 0px;//在这里规定从某一坐标开始显示图片} 从上面的代码不难看出，这里面起决定性作用的是 background-position:* *px; 这样，在复杂的css应用中，我们便可以解决背景图片从新加载的问题

推荐整理分享css Sprites小实例代码(css实战案例)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css案例制作,css 案例,css例子,css应用实例,css示范例子,css实例教程,css实例教程,css实例教程,内容如对您有帮助，希望把文章链接给更多的朋友！

用css实现图片垂直居中的使用技巧题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box{/*非I

CSS List Grid Layout 图片垂直居中 CSSListGridViewLayoutCSSListGridLayoutCompatibleandtestedwithIE6,IE7,Safari2,Safari3,Firefox2,Opera9.ListGridViewsodalesportalibero.nsodalesporterat.Nunceurisusutdolorbibendumadipiscing.Proinsodales

IE6网页神奇BUG 标题就是title拉萨尔--莱佛士教育/title，调试了很久发现当把title拉萨尔--莱佛士教育/title删掉后，显示了。。。。。找原因，没找到。后来有吧中间的"--

标签: css实战案例

本文链接地址:https://www.jiuchutong.com/biancheng/375273.html 转载请保留说明！

上一篇：DIV border边框显示不完全问题的解决方法(div显示边框线)

下一篇：用css实现图片垂直居中的使用技巧(css图片垂直居中对齐)