DivCSS布局入門教程相當(dāng)經(jīng)典

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

2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；

3、底部，包括一些版權(quán)信息。

有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖:依照上圖，我再畫了一個(gè)實(shí)際的頁面布局圖，說明一基層的嵌套關(guān)系，如此明白得起來就會(huì)更簡(jiǎn)單了。DIV結(jié)構(gòu)如下：

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

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

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

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

│├#Sidebar{}/*側(cè)邊欄*/

│└#MainBody{}/*主體內(nèi)容*/

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

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

list-style:none，這一句是取消列表前點(diǎn)，因?yàn)樵蹅儾恍枰@些點(diǎn)。

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

那個(gè)地址的float:left的左右是讓內(nèi)容都在同一行顯示，因此利用了浮動(dòng)屬性(float)。到這一步，建議大伙兒先保留預(yù)覽一下成效，咱們?cè)偬砑酉旅娴膬?nèi)容，成效如下：這時(shí)，列表內(nèi)容是排列在一行，咱們?cè)?menuulli{}再加入代碼margin:010px#menuul{list-style:none;margin:0px;}

#menuulli{float:left;margin:010px}margin:010px的作用確實(shí)是讓列表內(nèi)容之間產(chǎn)生一個(gè)20像素的距離(左：10px，右：10px)，預(yù)覽的成效如下：此刻，雛形已經(jīng)出來了，咱們?cè)賮砉潭ú藛蔚奈恢茫汛a改成如下：#menu{padding:20px20px00}

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

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

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

#menuulli{float:left;margin:010px}這時(shí)，位置已經(jīng)確信了，可是構(gòu)思圖中，菜單項(xiàng)選擇項(xiàng)之間還有一條豎線，如何辦呢？

別忘了，我們?cè)缇鸵呀?jīng)留好了一個(gè)空的<liclass="menuDiv"></li>，要想加入豎線就使用它了。

按照上面說的方法，我們?cè)偬砑右韵麓a：.menuDiv{width:1px;height:28px;background:#999}保留預(yù)覽一下，豎線是不是已經(jīng)出來了？關(guān)于這段代碼就不多講了，應(yīng)該是很容易明白得的。只是，菜單項(xiàng)選擇項(xiàng)的文字卻在頂部，咱們?cè)傩薷某梢韵麓a：#menuulli{float:left;margin:010px;display:block;line-height:28px}關(guān)于display:block;line-height:28px大伙兒能夠去參閱一下手冊(cè)，我就不多講了。成效大體上已經(jīng)實(shí)現(xiàn)了，剩下的確實(shí)是修改菜單的超鏈接樣式，在中添加以下代碼：#menuullia:link,#menuullia:visited{fon