Xhtml,DIV+CSS布局实例(入门级)

我是一个懒人，一直都不愿意去写一些东西，今天，趁帮客户设计网页，写个DIV+CSS的布局实例，入门级的呃。

首先来看一下下面这张图片：

偶在PS里按照客户的要求做的一个排版，各个部分做什么用的大家自己去研究啦，懂点英文的总应该看的懂的吧。XIXI~~~

第一步：建立一个Xhtml1.0页面index_temp.html，我用的是DW8.0 en，再建立一个CSS Document，当然要把CSS 文件包含到index_temp.html里面啦。

第二步：数数看需要用多少个DIV呢？logo 和 ads 一个，Nav一个，left 一个，center一个，right一个，bottom一个，一共6个。这样偶就在刚才的index_temp文件里写入了以下代码 (中间，会一点的应该明白的吧:～！)：

<div class=”header”>123</div>
<div class=””nav””>123</div>
<div class=””left””>left</div>
<div class=””center””>center</div>
<div class=””right””>right</div>
<div class=””bottom””>123</div>

第三步：写CSS，控制效果。

.header {width:1024px; }
.nav { clear:both;}
.left { width:180px; height:200px; float:left; clear:right;}
.center { clear:right; height:200px; float:left; width:600px; background-color:#999999;}
.right { width:200px; height:200px; float:left; clear:right;}
.bottom { clear:both;}

哈哈，简单吧。。。几下子就搞定了。看一下页面大小，，才1K，，HOHO.要用是原来的Table怎么说体积也要大上好几倍吧。。

不跟你们啰嗦了。。。偶要做正事了。看不懂的那可要好好补一补参汤了。。肯定是大脑有点锈 了..

本帖转自 www.deo-diy.org