本篇內(nèi)容介紹了“DIV頁面布局的方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、金秀ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的金秀網(wǎng)站制作公司

DIV頁面布局與規(guī)劃

最近這些時(shí)間經(jīng)常有朋友問到我有關(guān)于DIV+CSS布局的問題，在網(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ì)***步就是構(gòu)思，構(gòu)思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來，以下是我構(gòu)思好的DIV頁面布局圖。

◆下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個(gè)部分：

1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；

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

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

有了以上的分析，我們就可以很容易的布局了，我們DIV頁面設(shè)計(jì)層如下圖：

根據(jù)上圖，我再畫了一個(gè)實(shí)際的頁面布局圖，說明一下層的嵌套關(guān)系，這樣理解起來就會(huì)更簡單了。

◆DIV頁面結(jié)構(gòu)如下：

│body{}　/*這是一個(gè)HTML元素，具體我就不說明了*/
└#Container{}　/*頁面層容器*/
├#Header{}　/*頁面頭部*/
├#PageBody{}　/*頁面主體*/
│　├#Sidebar{}　/*側(cè)邊欄*/
│　└#MainBody{}　/*主體內(nèi)容*/
└#Footer{}　/*頁面底部*/
至此，DIV頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫HTML代碼和CSS。

“DIV頁面布局的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！