在網頁制作中，有許多的術語，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中咱們將會用到一些有關于HTML的大體知識，而在你學習這篇入門教程之前，請確信你已經具有了必然的HTML基礎。下面咱們就開始一步一步利用DIV+CSS進行網頁布局設計吧。所有的設計第一步確實是構思，構思好了，一樣來講還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處置軟件將需要制作的界面布局簡單的構畫出來，以下是我構思好的界面布局圖。下面，咱們需要依照構思圖來計劃一下頁面的布局，認真分析一下該圖，咱們不難發(fā)覺，圖片大致分為以下幾個部份：一、頂部部份，其中又包括了LOGO、MENU和一幅Banner圖片；

2、內容部分又可分為側邊欄、主體內容；

3、底部，包括一些版權信息。

有了以上的分析，我們就可以很容易的布局了，我們設計層如下圖:依照上圖，我再畫了一個實際的頁面布局圖，說明一基層的嵌套關系，如此明白得起來就會更簡單了。DIV結構如下：

│body{}/*這是一個HTML元素，具體我就不說明了*/

└#Container{}/*頁面層容器*/

├#Header{}/*頁面頭部*/

├#PageBody{}/*頁面主體*/

│├#Sidebar{}/*側邊欄*/

│└#MainBody{}/*主體內容*/

└#Footer{}/*頁面底部*/至此，頁面布局與計劃已經完成，接下來咱們要做的確實是開始書寫HTML代碼和CSS。接下來咱們在桌面新建一個文件夾，命名為“DIV+CSS布局練習”，在文件夾下新建兩個空的記事本文檔，輸入以下內容：<!DOCTYPEhtmlPUBLIC"-ivID。若是id="divID"那個層中包括了一個<img></img>，那么那個img在CSS中對應的設置語法應該是#divIDimg{}，一樣，若是是包括在class="divID"那個層中時，那么設置語法應該是.divIDimg{}，這一點希望大伙兒要分清楚了。另外，HTML中的一切元素都是能夠概念的，例如table、tr、td、th、form、img、input...等等，若是你要在CSS中設置它們，那么直接寫入元素的名稱加上一對大括號{}就能夠夠了。所有的CSS代碼都應該寫在大括號{}中。依照上面的介紹，咱們先在中寫入以下代碼：#menuul{list-style:none;margin:0px;}

#menuulli{float:left;}說明一下：#menuul{list-style:none;margin:0px;}

list-style:none，這一句是取消列表前點，因為咱們不需要這些點。

margin:0px，這一句是刪除UL的縮進，這樣做可以使所有的列表內容都不縮進。#menuulli{float:left;}

那個地址的float:left的左右是讓內容都在同一行顯示，因此利用了浮動屬性(float)。到這一步，建議大伙兒先保留預覽一下成效，咱們再添加下面的內容，成效如下：這時，列表內容是排列在一行，咱們在#menuulli{}再加入代碼margin:010px#menuul{list-style:none;margin:0px;}

#menuulli{float:left;margin:010px}margin:010px的作用確實是讓列表內容之間產生一個20像素的距離(左：10px，右：10px)，預覽的成效如下：此刻，雛形已經出來了，咱們再來固定菜單的位置，把代碼改成如下：#menu{padding:20px20px00}

/*利用padding:20px20px00來固定菜單位置*/

#menuul{float:right;list-style:none;margin:0px;}

/*添加了float:right使得菜單位于頁面右邊*/

#menuulli{float:left;margin:010px}這時，位置已經確信了，可是構思圖中，菜單項選擇項之間還有一條豎線，如何辦呢？

別忘了，我們早就已經留好了一個空的<liclass="menuDiv"></li>，要想加入豎線就使用它了。

按照上面說的方法，我們再添加以下代碼：.menuDiv{width:1px;height:28px;background:#999}保留預覽一下，豎線是不是已經出來了？關于這段代碼就不多講了，應該是很容易明白得的。只是，菜單項選擇項的文字卻在頂部，咱們再修改成以下代碼：#menuulli{float:left;margin:010px;display:block;line-height:28px}關于display:block;line-height:28px大伙兒能夠去參閱一下手冊，我就不多講了。成效大體上已經實現了，剩下的確實是修改菜單的超鏈接樣式，在中添加以下代碼：#menuullia:link,#menuullia:visited{fon