CSS网页制作技巧:节约网页代码编写时间

作者佚名技术来源 CSS技术浏览发布时间 2012-02-27

3.方便的CSS调试器

这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4.使一个未设定宽度的DIV居中

对于一个有固定宽度的DIV容器，你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话，你可以使用下面的CSS代码：

.content {
	margin: 0 auto 8px;
	display: table;
	}
 
.content div {
	display: table-cell;
	}
 
<!--[if IE]>
.content {
	display: block;
	text-align: center;
	}
.content div {
	display: inline;
	zoom: 1;
}
< ![endif]-->

5.为大图片添加伪AJAX的载入图标

等待图片下载是浏览网页是意见烦人的事，但用JavaScript动态载入图片技术难度又比较大。你可以用CSS加上一个载入图标，缓解访客等待加载时的情绪。

1	img { background: url(loading.gif) no-repeat center center; }

6.CSS图像预载

如果你要在HTML文件加载完成前预载图片，你可以把图片设置为一个DIV容器的背景图，并且把这个容器设为不可见。当HTML加载后再把这个DIV容器插入页面里。

div.loader {
	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}

7.CSS透明度

由于老式浏览器对页面元素透明度处理不好，你必须为透明的元素写hack。

selector {
	filter: alpha(opacity=60); /* MSIE/PC */
	-moz-opacity: 0.6; /* Mozilla 1.6 and older */
	opacity: 0.6;
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 收集分享的3个讲解css及标签的视频下一篇: CSS初学者入门:使用table布局网页不明智

关于CSS网页制作技巧:节约网页代码编写时间的所有评论

随机推荐