DIV CSS布局入門示例(一)頁(yè)面布局與規(guī)劃_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
一、頁(yè)面布局與規(guī)劃
好久沒(méi)有認(rèn)真寫點(diǎn)東西了,想起最近這些時(shí)間經(jīng)常有朋友問(wèn)到我有關(guān)于DIV CSS布局的問(wèn)題,其實(shí)歸根結(jié)底還是由于沒(méi)有入門造成的。那么接下來(lái)的這篇文章就帶領(lǐng)大家入門吧...
在網(wǎng)頁(yè)制作中,有許多的術(shù)語(yǔ),例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí),而在你學(xué)習(xí)這篇入門教程之前,請(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)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái),以下是我構(gòu)思好的界面布局圖。
下面,我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局,仔細(xì)分析一下該圖,我們不難發(fā)現(xiàn),圖片大致分為以下幾個(gè)部分:
1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容;
3、底部,包括一些版權(quán)信息。
有了以上的分析,我們就可以很輕易的布局了,我們?cè)O(shè)計(jì)層如下圖:
根據(jù)上圖,我再畫了一個(gè)實(shí)際的頁(yè)面布局圖,說(shuō)明一下層的嵌套關(guān)系,這樣理解起來(lái)就會(huì)更簡(jiǎn)單了。
DIV結(jié)構(gòu)如下:
至此,頁(yè)面布局與規(guī)劃已經(jīng)完成,接下來(lái)我們要做的就是開(kāi)始書寫HTML代碼和CSS。
好久沒(méi)有認(rèn)真寫點(diǎn)東西了,想起最近這些時(shí)間經(jīng)常有朋友問(wèn)到我有關(guān)于DIV CSS布局的問(wèn)題,其實(shí)歸根結(jié)底還是由于沒(méi)有入門造成的。那么接下來(lái)的這篇文章就帶領(lǐng)大家入門吧...
在網(wǎng)頁(yè)制作中,有許多的術(shù)語(yǔ),例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí),而在你學(xué)習(xí)這篇入門教程之前,請(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)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái),以下是我構(gòu)思好的界面布局圖。

下面,我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局,仔細(xì)分析一下該圖,我們不難發(fā)現(xiàn),圖片大致分為以下幾個(gè)部分:
1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容;
3、底部,包括一些版權(quán)信息。
有了以上的分析,我們就可以很輕易的布局了,我們?cè)O(shè)計(jì)層如下圖:

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

DIV結(jié)構(gòu)如下:
示例代碼 [www.zhaotila.cn]
│body {} /*這是一個(gè)HTML元素,具體我就不說(shuō)明了*/
└#Container {} /*頁(yè)面層容器*/
├#Header {} /*頁(yè)面頭部*/
├#PageBody {} /*頁(yè)面主體*/
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
└#Footer {} /*頁(yè)面底部*/
└#Container {} /*頁(yè)面層容器*/
├#Header {} /*頁(yè)面頭部*/
├#PageBody {} /*頁(yè)面主體*/
│ ├#Sidebar {} /*側(cè)邊欄*/
│ └#MainBody {} /*主體內(nèi)容*/
└#Footer {} /*頁(yè)面底部*/
至此,頁(yè)面布局與規(guī)劃已經(jīng)完成,接下來(lái)我們要做的就是開(kāi)始書寫HTML代碼和CSS。
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSSFormExample:帶有小圖標(biāo)的清爽CSS表單設(shè)計(jì)!
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- DivCSS布局實(shí)例:詳解建立Flash上面浮動(dòng)層
- 圖片邊框變換CSSHover狀態(tài)效果一例
- CSS布局實(shí)例:margin優(yōu)化的一種思路
- CSS實(shí)例:Unobtrusive頁(yè)簽切換符合Web標(biāo)準(zhǔn)具有html語(yǔ)義
- CSS JavaScript打造鼠標(biāo)懸停圖片漸顯效果!
- CSS實(shí)例:如何讓無(wú)空格的長(zhǎng)字符在IE和FF下面實(shí)現(xiàn)自動(dòng)換行?
- DIVCSS圖形菜單之仿DreamWeaver
- CSS菜單:基本橫向菜單效果超炫
猜你也喜歡看這些
- 為什么無(wú)法定義高度為1px左右的容器
- 網(wǎng)頁(yè)制作中如何精確還原設(shè)計(jì)稿的幾個(gè)步驟
- 頁(yè)腳最小高度100%保持在頁(yè)面底部的布局方法
- 如何用css控制一個(gè)容器的顯示與隱藏?
- CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):富有語(yǔ)義地類class和id標(biāo)記命名
- css頁(yè)面網(wǎng)頁(yè)配色
- divcss網(wǎng)站布局的八個(gè)小技巧
- CSS BUG 順口溜,輕松記住IE6常見(jiàn)BUG
- div css網(wǎng)頁(yè)布局如何合理的運(yùn)用html標(biāo)簽?
- 本人使用的頁(yè)面常用布局及樣式代碼
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-DIV CSS布局入門示例(一)頁(yè)面布局與規(guī)劃
。