浅谈divcss网页制作快速布局

《浅谈divcss网页制作快速布局》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、我从事网页设计行业，已经有两年光景了，浏览器对CSS的识别是让我最头疼的，我曾经彷徨了好一阵，然后不断的收集资料，不断地研究，终于有一点儿小小的经验适用到我的工作中去了。可能这点儿经验不算什么，但是我想还是有帮助的，特别是对于刚接触CSS不久，然后仍然徘徊的初学者们，希望对你们有所帮助和借鉴。好啦，闲话少说，咱们言归正传.....comeon,let'sgo!!1、DIV起初布局和CSS的大方向规划*{margin:0;padding:0;word-break:break-all;}body{background:#ee

2、eeeeurl(../images/QZZT_head_bg.jpg)topcenterno-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;}.F1

3、2{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:1pxsolid#e6e6e6;}.border2{border-left:1pxsolid#d78327;border-right

4、:1pxsolid#d78327;border-bottom:1pxsolid#d78327;}.border1{border-left:1pxsolid#d8d8d8;border-right:1pxsolid#d8d8d8;border-bottom:1pxsolid#d8d8d8;}/*通用样式*/.divline{height:10px;line-height:10px;width:auto;overflow:hidden;clear:both;}/*分割空间折行*/.clearboth{width:auto;h

5、eight:1px;margin-top:-1px;overflow:hidden;clear:both;}/*清除浮动实现自动折行无高度*/先拿这段代码来说吧，这是我以前曾经写过的一段样式。页面起初的CSS设定一定要关系到你后面再操作中的便利和出错，所以这段代码的使用，是防止后面可能出现的错误。“*”这个大家都知道，是通配符，也就是所有的页面内定义的对象，都会配置这一样式，里面的word-break:break-all是要求必须在限定范围内折行，这样你做出的框内文字才会在限定范围内折行。当然，如果不折行，而是自动适应，

6、那就没有必要用这段样式了。body中的定义我想就不用多说了，padding,margin,border不特殊情况下，都为0。整体的链接样式，大方向的，也就是默认的，可以设定一个a和a:hover，这个是你页面中出现最对颜色的链接样式。ul,li.span,img这些也最好把padding和margin的值设为0，另外ul和li中的列表标记设成none，便于后续操作中可以自己调整。文字的大小，文字的颜色，可以用组合样式，比如上面的F12,代表12px字体，如果我现在用12px的红色字体，那么class="F12red"。边

7、框也是单独设定，然后用组合样式。注意：再具体限定高度和宽度的div时用到组合边框，一定要考虑边框所占得1px。关键来啦，有人可能遇到这样的问题，就是为什么我的页面是按照块做的，可惜两块怎么叠加到一起了呢？而不是一块块按照顺序向下排列的呢？那就就用这个来调，把divline的样式附加在一个空白div上，然后放在两个块中间，这样就不会使块与块之间干扰了。如果是无缝的，就用clearboth这个样式，它是无高度的。这个方法可能笨点儿，但是很奏效。好啦，上面的我讲完啦，不知道对你们是否有所帮助。下面我们讲DIV的布局2、把握大方

8、向布局有技巧 先拿这个举例吧。很明显分两部分，上边两块的为一部分，下边一大一小为另一部分。布局很简单都是两列。要求就是先做外围的大框。我给写一下div中的css，以及DIV的顺序。明白没？这就是第一块的div写法，同样，第二块也属于两列布局，div也可以这些，这样的目的就是先顾全整体，然后再调节细节，这就是div布局