DIV CSS布局入門示例(一)頁面布局與規(guī)劃_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
一、頁面布局與規(guī)劃
好久沒有認真寫點東西了,想起最近這些時間經(jīng)常有朋友問到我有關(guān)于DIV CSS布局的問題,其實歸根結(jié)底還是由于沒有入門造成的。那么接下來的這篇文章就帶領(lǐng)大家入門吧...
在網(wǎng)頁制作中,有許多的術(shù)語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關(guān)于HTML的基本知識,而在你學(xué)習(xí)這篇入門教程之前,請確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使用DIV CSS進行網(wǎng)頁布局設(shè)計吧。
所有的設(shè)計第一步就是構(gòu)思,構(gòu)思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來,以下是我構(gòu)思好的界面布局圖。
下面,我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局,仔細分析一下該圖,我們不難發(fā)現(xiàn),圖片大致分為以下幾個部分:
1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容;
3、底部,包括一些版權(quán)信息。
有了以上的分析,我們就可以很輕易的布局了,我們設(shè)計層如下圖:
根據(jù)上圖,我再畫了一個實際的頁面布局圖,說明一下層的嵌套關(guān)系,這樣理解起來就會更簡單了。
DIV結(jié)構(gòu)如下:
至此,頁面布局與規(guī)劃已經(jīng)完成,接下來我們要做的就是開始書寫HTML代碼和CSS。
好久沒有認真寫點東西了,想起最近這些時間經(jīng)常有朋友問到我有關(guān)于DIV CSS布局的問題,其實歸根結(jié)底還是由于沒有入門造成的。那么接下來的這篇文章就帶領(lǐng)大家入門吧...
在網(wǎng)頁制作中,有許多的術(shù)語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關(guān)于HTML的基本知識,而在你學(xué)習(xí)這篇入門教程之前,請確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使用DIV CSS進行網(wǎng)頁布局設(shè)計吧。
所有的設(shè)計第一步就是構(gòu)思,構(gòu)思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來,以下是我構(gòu)思好的界面布局圖。
下面,我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局,仔細分析一下該圖,我們不難發(fā)現(xiàn),圖片大致分為以下幾個部分:
1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容;
3、底部,包括一些版權(quán)信息。
有了以上的分析,我們就可以很輕易的布局了,我們設(shè)計層如下圖:
根據(jù)上圖,我再畫了一個實際的頁面布局圖,說明一下層的嵌套關(guān)系,這樣理解起來就會更簡單了。
DIV結(jié)構(gòu)如下:
示例代碼 [m.dounai2.com]
│body {} /*這是一個HTML元素,具體我就不說明了*/
└#Container {} /*頁面層容器*/
├#Header {} /*頁面頭部*/
├#PageBody {} /*頁面主體*/
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
└#Footer {} /*頁面底部*/
└#Container {} /*頁面層容器*/
├#Header {} /*頁面頭部*/
├#PageBody {} /*頁面主體*/
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
└#Footer {} /*頁面底部*/
至此,頁面布局與規(guī)劃已經(jīng)完成,接下來我們要做的就是開始書寫HTML代碼和CSS。
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-DIV CSS布局入門示例(一)頁面布局與規(guī)劃。