CSS的布局

html-css014

CSS的布局,第1张

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

跟你讲下思路，每一行里面的三个高度都一样的话，你应该分出三层来做，然后在每个行里面分左中右三个用float来排布，

<style>

body{font-size:20pxcolor:#ffffont-weight:bold}

.Head,.Main,.Bottom{width:1004pxmargin:0px autooverflow:hiddenbackground:#000margin-top:10px}

.Head{height:50px}

.Top_Left,.Top_Center,.Top_Right{background:#fffheight:200pxoverflow:hiddencolor:#000display:inlineline-height:200pxtext-align:center}

.Top_Left{width:200pxfloat:left}

.Top_Center{width:390pxmargin-left:10pxfloat:left}

.Top_Right{widtH:390pxfloat:right}

.Bottom{height:100px}

</style>

<div class="Head">这个是头部</div>

<div class="Main">

<div class="Top_Left">上左</div>

<div class="Top_Center">上中</div>

<div class="Top_Right">上右</div>

</div>

<div class="Main">

<div class="Top_Left">中左</div>

<div class="Top_Center">中中</div>

<div class="Top_Right">中右</div>

</div>

<div class="Main">

<div class="Top_Left">下左</div>

<div class="Top_Center">下中</div>

<div class="Top_Right">下右</div>

</div>

<div class="Bottom">底部</div>

这是初步的排布，具体的还是得你自己去熟悉下