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

2 comments on “Xhtml,DIV+CSS布局实例(入门级)

  1. 我是游客 07/31/2008 15:40

    测试游客能不能发表评论。。。

  2. 西月 09/27/2008 13:02

    比较容懂的教材,不错。

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>