石家庄网站制作 石家庄网站建设自己做网页设计一些年的经验,简单的总结一下.

1、DIV起初布局和CSS的大方向规划

* {margin:0; padding:0;word-break:break-all;}
body {background:#eeeeee url(../images/QZZT_head_bg.jpg) top center no-repeat;padding:0; margin:0; color:#333333; font-family:"宋体"; }
a {color:#333333;text-decoration:none; }
a:hover {color:#ba2636;text-decoration:underline; }
ul, li, span, img{ padding:0; margin:0; list-style:none; }
img{border:none;}
.F12 { font-size:12px; }
.F12 { color:#333333; }
.red { color:#CC0000; }
a.red { color:#CC0000; text-decoration:none; }
a.red:hover { color:#CC0000; text-decoration: underline; }
/*-------边框?--------------*/
.border3 { border:1px solid #e6e6e6; }
.border2 {border-left:1px solid #d78327;border-right:1px solid #d78327;border-bottom:1px solid #d78327;}
.border1 {border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
/*通用样式*/
.divline { height:10px; line-height:10px; width:auto; overflow:hidden; clear:both; }/*分割空间 折行*/
.clearboth { width:auto; height:1px; margin-top:-1px; overflow:hidden; clear:both; }/*清除浮动实现自动折行 无高度*/

先拿这段代码来说吧，这是我以前曾经写过的一段样式。

页面起初的CSS设定一定要关系到你后面再操作中的便利和出错，所以这段代码的使用，是防止后面可能出现的错误。

“*”这个大家都知道，是通配符，也就是所有的页面内定义的对象，都会配置这一样式，里面的word-break:break-all是要求必须在限定范围内折行，这样你做出的框内文字才会在限定范围内折行。当然，如果不折行，而是自动适应，那就没有必要用这段样式了。

body中的定义我想就不用多说了，padding,margin,border不特殊情况下，都为0。

整体的链接样式，大方向的，也就是默认的，可以设定一个a和a:hover，这个是你页面中出现最对颜色的链接样式。

ul,li.span,img这些也最好把padding和margin的值设为0，另外ul和li中的列表标记设成none，便于后续操作中可以自己调整。

文字的大小，文字的颜色，可以用组合样式，比如上面的F12,代表12px字体，如果我现在用12px的红色字体，那么class="F12 red"。

边框也是单独设定，然后用组合样式。注意：再具体限定高度和宽度的div时用到组合边框，一定要考虑边框所占得1px。

关键来啦，有人可能遇到这样的问题，就是为什么我的页面是按照块做的，可惜两块怎么叠加到一起了呢？而不是一块块按照顺序向下排列的呢？那就就用这个来调，把divline的样式附加在一个空白div上，然后放在两个块中间，这样就不会使块与块之间干扰了。如果是无缝的，就用clearboth这个样式，它是无高度的。这个方法可能笨点儿，但是很奏效。

好啦，上面的我讲完啦，不知道对你们是否有所帮助。

下面我们讲DIV的布局

2、把握大方向 布局有技巧

CSS样式写法要明确，这样便于以后维护查找方便。而且要写好注释。石家庄网站制作 石家庄网站建设/编辑