css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量
1、制作一张具有多状态的拼合图片,需要按照一定规律处理
2、给要显示背景的盒(一个固定尺寸,宽width、高height),以背景的方式加载,让其局部显示
3、通过背景图定位(background-position)控制不同的显示状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图实现原理</title>
</head>
<style>
ul,h3{
margin: 0;
padding: 0;
}
h3{
display: block;
margin: 0;
padding: 0;
}
.cat{
position: relative;
width: 150px;
background-color: #f8f8f8;
border: 1px solid #bbb;
}
li{
z-index: 2;
position: relative;
display: block;
height: 31px;
line-height: 31px;
overflow: hidden;
margin: 1px 10px 0;
vertical-align: bottom;
border-bottom: 1px solid #dedede
}
li:hover{
background-color:#666666;
}
li h3{
font-size: 13px;
font-weight: 400;
}
li i{
display: inline;
float:left;
margin: 3px 10px 0 0;
height: 24px;
width: 30px
}
/* 在这里补充雪碧图的样式 */
li>i{
background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
}
.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;
}
</style>
<body>
<div class="cat">
<ul>
<li class="cat-1"><i></i><h3>服装内衣</h3></li>
<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat-3"><i></i><h3>运动户外</h3></li>
<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
<li class="cat-5"><i></i><h3>手机数码</h3></li>
<li class="cat-6"><i></i><h3>家电办公</h3></li>
<li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
<li class="cat-8"><i></i><h3>母婴用品</h3></li>
</ul>
</div>
</body>
</html>
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。
js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度
禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放;设置元素在另一个元素的最底部;设置背景颜色,不透明度
CSS便捷开发小工具汇总:包括:prefixfree前缀补全插件(或其他后缀-o-,-ms-,-moz-)、Normalize.css一个CSS Reset工具、Grunt 常用的包括CSS/JS的自动合并压缩, LESS/SASS 的自动编译等
这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性
作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;
在html中内容中的多个空格一般会被视为一个,连续的多个空格符被自动合并了,同时内容前后的空格也会被清除。HTML空格保留的方式、CSS空格保留的方式。
说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题
css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位。
当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!