php页面div布局,HTML+CSS和DIV如何实现排版布局

这篇文章主要介绍了关于HTML+CSS和DIV如何实现排版布局，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

HTML CSS + div实现排版布局

1.网页可以看成是由一个一个“盒子”组成，如图：

由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，

中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个

的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来案例布局分析：

单列布局案例：

代码如下：

单列布局

body{

margin:0;

}

.box{

width:960px;

margin:0 auto;

}

.box .header{

height:120px;

border:1px solid #f00;

line