采用diy css布局搭建结构为左侧,中间,右侧,底侧的盒子

html-css08

采用diy css布局搭建结构为左侧,中间,右侧,底侧的盒子,第1张

首先纠正你的错误，不是diy，是div

左侧,中间,右侧,底侧的盒子html结构如下：

<div class="warp">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

    <div class="foot"></div>

</div>

css样式如下：

.warp{width: 900pxoverflow: hidden}

.left,.center,.right{width: 300pxheight: 300pxfloat: left}

.foot{width: 900pxheight: 300px}

备注：所有的div宽和高都是我随意定的，根据你的需求更改！

div加css样式表修饰能保证布局完全符合标准的盒子模型，应该是div而不是diy吧，diy是自定义的意思，div是一种和table类似但是相对更严格些的容器。在html语句中引入css文件，把div或者div里面的内容编写id之后，在css样式表中对各种属性加以修饰，html里面有的属性css里面都有，html没有的有些里面也有，而且有的也会更加详细，例如边框html只能设置全边框，而在css中科一设置上下左右四个边框，能更完美的达到你要实现的效果，在html中使用<link>标记引用。