技巧应知道：CSS常见技巧及问题处理

1.解决背景不能延伸的问题
<div id="content"><div id="main"> <div id="maincol"></div> <div id="xcol"></div></div><div id="subcol"></div></div>

<style type="text/css">
<!--
#content{width:700px; background:url(img/bg.png)repeat-y;}#subcol {float:left; width:200px;}#main {width:500px; float:right;}#maincol {width:300px;float:left;}#xcol {width:200px; float:right;}
-->
</style>

上面的问题，背景的自适应高度并不继承float的高度，解决办法：
在所有float下方加上<div style="clear:both;"></div>

2.网页如何居中对齐？
body{ margin:0;padding:0;text-align:center;}
#container{width:760px;margin:0 auto;text-align:left;position:relative;}

说明:body把margin与padding设置为0，这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中，这样就包括了#container也一起居中了。container的margin中的第一个0是上下、第二个auto是左右。上下为0左右让其自控。再加上定位为相对，只有定位为相对的元素才可以有位置移动！

3.用CSS制作鼠标经过图像
用DW（Dreamweav）中的“鼠标经过图像”当网速不太快的时候，鼠标经过后的图片还没有下载下来，看到白图的现象，看上去很不美观。事实上用CSS就可以解决这个问题，并且非常的简单，下载快，不会出现鼠标经过后的图片还没有下载下来这种情况。
具体做法参考：http://www.webjx.com/htmldata/2007-01-26/1169772749.html

4.结构中id与class的使用原则与技巧
ID与CLASS的使用原则
据说W3C对于ID与CLASS的设定是ID具有唯一性，CLASS具有普遍性。ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。
ID与CLASS的使用技巧
A.子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
B.CLASS中的子级最好不用ID。当然特殊情况特殊对待。
C.CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

5.解读absolute与relative
http://www.webjx.com/htmldata/2006-11-13/1163395918.html

6.澄清display:inline;与float:left;的用途
http://www.webjx.com/htmldata/2007-01-26/1169772809.html

7.标准下隔行换色的思考
http://www.webjx.com/htmldata/2007-01-26/1169772874.html

8.《網頁設計技巧》系列之二 淺談布局
http://www.webjx.com/htmldata/2007-01-26/1169773077.html

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有