淺談DIV+CSS網(wǎng)頁(yè)布局開發(fā)心得_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
DIV+CSS是目前互聯(lián)網(wǎng)網(wǎng)頁(yè)制作最熱門的方法,但對(duì)于完全手寫代碼,許多網(wǎng)頁(yè)設(shè)計(jì)師都望而止步。
其實(shí)DIV+CSS是很簡(jiǎn)單的一種布局方式,甚至比任何一種編程語(yǔ)言都要簡(jiǎn)單(雖然它不能算是編程語(yǔ)言)。
首先你要知道,當(dāng)你開始學(xué)習(xí)DIV+CSS的時(shí)候,你要把以前所有用DW畫布局表格的思維方法忘的一干二凈(如果你以前是用TABLE布局的話),然而這項(xiàng)技術(shù)更適合剛接觸網(wǎng)頁(yè)制作的人。
然后你要知道,DIV+CSS是高成本開發(fā),速度當(dāng)然是沒有你畫TABLE來(lái)的快,但是好處更多,相信如果你能看到這里,你一定對(duì)DIV+CSS的好處也有一定的了解了。
最后你還得知道,你所用的工具,你可能認(rèn)為dreamweaver很好,沒錯(cuò),它的確不錯(cuò),但你要認(rèn)識(shí)到,當(dāng)你熟練使用了這門技術(shù),你就可以在任何文本編輯器中編寫網(wǎng)頁(yè),甚至在記事本中,而dreamweaver只是充當(dāng)一個(gè)文本編輯器的角色,而你所有的工作基本都在代碼視圖中完成,在這里我推薦adobe最新的dreamweaver cs4。當(dāng)然如果CS5出現(xiàn)了我也會(huì)去試用它。
切入正題,其實(shí)DIV+CSS正確的說(shuō)法應(yīng)該是XHTML+CSS,說(shuō)成DIV的原因只是讓它能更明確地和TABLE布局方法區(qū)分開來(lái),并不是說(shuō)一個(gè)頁(yè)面里沒有TABLE,而是在什么地方使用TABLE,你要認(rèn)識(shí)到TABLE是表格,是存放數(shù)據(jù)用的,而不是用來(lái)布局的。
接下來(lái)是布局思維方式,可能大家在接觸DIV+CSS的時(shí)候無(wú)從下手,我現(xiàn)在向大家推薦最著名的盒子模型,我也是看了這個(gè)模型后一下子就開竅了。
你可能會(huì)說(shuō),好多英文看不懂,不過我告訴你,很抱歉那三個(gè)英文你必須記住,而且是最重要的三個(gè),你可以把這么個(gè)盒子看成一個(gè)DIV,而所有標(biāo)簽都帶有這三個(gè)屬性。
正如你所見到的這個(gè)是一個(gè)方塊,而網(wǎng)頁(yè)呢,是由這么多大大小小的方塊組成的,可能以下實(shí)例會(huì)更明確的讓你了解這個(gè)盒子。
我在這里借用了新浪博客的盒子來(lái)說(shuō)明下,大家可能發(fā)現(xiàn)了,其實(shí)邊框border往往就只有1px的寬度,誰(shuí)叫它是邊框呢。而外補(bǔ)丁margin呢,它代表了DIV(盒子)和DIV(盒子)之間的距離,而內(nèi)補(bǔ)丁padding則是大盒子(DIV)和里面的盒子(DIV)的距離(盒子(DIV)里面可以放盒子(DIV)哦)。
其實(shí)DIV+CSS是很簡(jiǎn)單的一種布局方式,甚至比任何一種編程語(yǔ)言都要簡(jiǎn)單(雖然它不能算是編程語(yǔ)言)。
首先你要知道,當(dāng)你開始學(xué)習(xí)DIV+CSS的時(shí)候,你要把以前所有用DW畫布局表格的思維方法忘的一干二凈(如果你以前是用TABLE布局的話),然而這項(xiàng)技術(shù)更適合剛接觸網(wǎng)頁(yè)制作的人。
然后你要知道,DIV+CSS是高成本開發(fā),速度當(dāng)然是沒有你畫TABLE來(lái)的快,但是好處更多,相信如果你能看到這里,你一定對(duì)DIV+CSS的好處也有一定的了解了。
最后你還得知道,你所用的工具,你可能認(rèn)為dreamweaver很好,沒錯(cuò),它的確不錯(cuò),但你要認(rèn)識(shí)到,當(dāng)你熟練使用了這門技術(shù),你就可以在任何文本編輯器中編寫網(wǎng)頁(yè),甚至在記事本中,而dreamweaver只是充當(dāng)一個(gè)文本編輯器的角色,而你所有的工作基本都在代碼視圖中完成,在這里我推薦adobe最新的dreamweaver cs4。當(dāng)然如果CS5出現(xiàn)了我也會(huì)去試用它。
切入正題,其實(shí)DIV+CSS正確的說(shuō)法應(yīng)該是XHTML+CSS,說(shuō)成DIV的原因只是讓它能更明確地和TABLE布局方法區(qū)分開來(lái),并不是說(shuō)一個(gè)頁(yè)面里沒有TABLE,而是在什么地方使用TABLE,你要認(rèn)識(shí)到TABLE是表格,是存放數(shù)據(jù)用的,而不是用來(lái)布局的。
接下來(lái)是布局思維方式,可能大家在接觸DIV+CSS的時(shí)候無(wú)從下手,我現(xiàn)在向大家推薦最著名的盒子模型,我也是看了這個(gè)模型后一下子就開竅了。
你可能會(huì)說(shuō),好多英文看不懂,不過我告訴你,很抱歉那三個(gè)英文你必須記住,而且是最重要的三個(gè),你可以把這么個(gè)盒子看成一個(gè)DIV,而所有標(biāo)簽都帶有這三個(gè)屬性。
正如你所見到的這個(gè)是一個(gè)方塊,而網(wǎng)頁(yè)呢,是由這么多大大小小的方塊組成的,可能以下實(shí)例會(huì)更明確的讓你了解這個(gè)盒子。
我在這里借用了新浪博客的盒子來(lái)說(shuō)明下,大家可能發(fā)現(xiàn)了,其實(shí)邊框border往往就只有1px的寬度,誰(shuí)叫它是邊框呢。而外補(bǔ)丁margin呢,它代表了DIV(盒子)和DIV(盒子)之間的距離,而內(nèi)補(bǔ)丁padding則是大盒子(DIV)和里面的盒子(DIV)的距離(盒子(DIV)里面可以放盒子(DIV)哦)。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- WebDesignUsabilityCheckList-Web可用性檢查列表
- CSS BUG 順口溜,輕松記住IE6常見BUG
- DIV+CSS是什么意思?實(shí)質(zhì)是什么?
- Google谷歌的CSS前景圖片合并技術(shù)
- IE6下絕對(duì)定位的容器內(nèi)文本無(wú)法正常選擇的問題
- 如何使用list-style項(xiàng)目符號(hào)?
- 關(guān)于條件注釋的幾個(gè)實(shí)例代碼
- Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之一文本排版淺議
- 鏈接文字上劃線、下劃線同時(shí)出現(xiàn)如何實(shí)現(xiàn)?
- 用PhotoShop兩分鐘完成一個(gè)xhtml css首頁(yè)
猜你也喜歡看這些
- DIVCSS圖形菜單之仿DreamWeaver
- CSS布局教程:DIV CSS三列式布局的實(shí)現(xiàn)方法
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
- CSS菜單:一個(gè)圖片構(gòu)建菜單的三種狀態(tài)一例!
- DIV CSS JS仿kijiji導(dǎo)航條
- CSS網(wǎng)站風(fēng)格設(shè)計(jì)實(shí)例HuDong123
- CSS布局實(shí)例:一個(gè)不錯(cuò)的表格樣式
- CSS表格樣式:CSS JS打造可伸縮的表格
- CSS實(shí)例:ULli打造CSS橫向菜單藍(lán)色地平線
- CSS中以圖片替換文字的表現(xiàn)方法
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-淺談DIV+CSS網(wǎng)頁(yè)布局開發(fā)心得
。