div+css布局入門(mén)教程(全套)

《div+css布局入門(mén)教程(全套)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、Div+CSS布局入門(mén)教程（全套）在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí)，而在你學(xué)習(xí)這篇入門(mén)教程之前，請(qǐng)確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開(kāi)始一步一步使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要用PhotoShop或FireWorks(以下簡(jiǎn)稱(chēng)PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫(huà)出來(lái)，以下是我構(gòu)思好的界面布局圖。下面，我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局，仔細(xì)分析

2、一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個(gè)部分：　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；　　3、底部，包括一些版權(quán)信息?！　∮辛艘陨系姆治?，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖:根據(jù)上圖，我再畫(huà)了一個(gè)實(shí)際的頁(yè)面布局圖，說(shuō)明一下層的嵌套關(guān)系，這樣理解起來(lái)就會(huì)更簡(jiǎn)單了?！　IV結(jié)構(gòu)如下：　　│body{}　/*這是一個(gè)HTML元素，具體我就不說(shuō)明了*/　　└#Container{}　/*頁(yè)面層容器*/　　　　　├#Header{}　/*頁(yè)面頭部*/　　　　

3、　├#PageBody{}　/*頁(yè)面主體*/　　　　　│　├#Sidebar{}　/*側(cè)邊欄*/　　　　　│　└#MainBody{}　/*主體內(nèi)容*/　　　　　└#Footer{}　/*頁(yè)面底部*/至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，接下來(lái)我們要做的就是開(kāi)始書(shū)寫(xiě)HTML代碼和CSS。接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIV+CSS布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：無(wú)標(biāo)題文檔這是XHTML的基本結(jié)構(gòu)，將其命名為index.htm，另一個(gè)記事本文檔則命名為css.css。下面，我們?cè)跇?biāo)簽對(duì)中寫(xiě)入DIV的基本結(jié)構(gòu)

4、，代碼如下：