DIVCSS標(biāo)準(zhǔn)化網(wǎng)頁(yè)布局

1、div+css標(biāo)準(zhǔn)化網(wǎng)頁(yè)布局姓 名：馬明電 話：60889797q q：44562586mail ：概述 業(yè)界對(duì)div+css的標(biāo)準(zhǔn)化設(shè)計(jì)關(guān)注 div+css標(biāo)準(zhǔn)化的影響下，網(wǎng)頁(yè)設(shè)計(jì)人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn) 傳統(tǒng)的網(wǎng)頁(yè)布局是使用網(wǎng)格div div 全稱 division 意為“區(qū)分”使用 div 的方法跟使用其他 tag 的方法一樣。 如果單獨(dú)使用 div 而不加任何 css，那么它在網(wǎng)頁(yè)中的效果和使用 是一樣的。 div本身就是容器性質(zhì)的，你不但可以內(nèi)嵌table還可以內(nèi)嵌文本和其它的html代碼 注意：標(biāo)簽可以用來(lái)組合其它的html元素，但不能嵌套在段落元素中，例如，aabbcc的結(jié)

2、果是不確定的。什么是div+css div+css布局這個(gè)布局中，div承載的是內(nèi)容，而css承載的是樣式。內(nèi)容和樣式的分離對(duì)于所見(jiàn)即所得的傳統(tǒng)table編輯方式確實(shí)是一個(gè)很大的沖擊，尤其是設(shè)計(jì)人員很難接受設(shè)計(jì)一個(gè)他們不能立即看到的樣式。不過(guò)隨著學(xué)習(xí)，會(huì)發(fā)現(xiàn)div+css的好處實(shí)在是太明顯了span span的用法與div一樣 這是div標(biāo)記 這是span標(biāo)記 div與span的區(qū)別 div是塊元素，使用會(huì)產(chǎn)生分行 span是一個(gè)行內(nèi)元素，使用不會(huì)產(chǎn)生分行盒子模型 每個(gè)html元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距

3、離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。 邊緣 margin(margin-top、margin-right、margin-bottom、margin-left)：外邊距順序依次是上、右、下、左 例如，margin:2em 4em、margin-left:-200px padding(padding-top、padding-right、padding-bottom、padding-left)：內(nèi)邊距指文本邊框與文本之間的距離，順序依次是上、右、下、左float: left;clear: left;width: 600px

4、;height: 400px;padding-top: 1px;padding-right: 2px;padding-bottom: 3px;padding-left: 4px;margin: 5px;布局 display 設(shè)置值：block、inline、list-item、none float 設(shè)置值：left、right、none clear 設(shè)置值：left、right、none、both visibility 設(shè)置值：inherit、visible、hidden clip 設(shè)置值：clip:rect(top、right、bottom、left) overflow 設(shè)置值：visibl

5、e、hidden、scroll、auto位置 位置屬性就是指定元素的位置，它是css-p（cascading style sheets positioning）中的內(nèi)容，css-p是css的一個(gè)擴(kuò)展，它可用來(lái)控制任何網(wǎng)頁(yè)元素在游覽器文檔窗口中的位置。 position 設(shè)置值：absolute、relative、static left right top bottom z-indexposition: absolute;visibility: visible;z-index: 5;overflow: scroll;clip: rect(1px 2px 3px 4px);left: auto;t

6、op: 5px;right: 5px;bottom: 5px;height: 400px;width: 600px;布局中的主要樣式 font line-height color margin padding border text-align background width: height float: clear display布局練習(xí) 一列固定寬度 一列寬度自適應(yīng) 一列固定寬度居中 二列固定寬度 二列寬度自適應(yīng) 兩列右列寬度自適應(yīng) 兩列固定寬度居中 三列浮動(dòng)中間列寬度自適應(yīng) 高度自適應(yīng)css排版-div分塊設(shè)計(jì)div塊位置div+css標(biāo)準(zhǔn)的優(yōu)點(diǎn) 結(jié)構(gòu)化html，提高易用性 結(jié)構(gòu)清晰，表現(xiàn)和內(nèi)容相分離。 更好的控制頁(yè)面布局。 結(jié)構(gòu)的重構(gòu)性強(qiáng)，縮短改版時(shí)間。 大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，縮減帶寬成本 結(jié)構(gòu)清晰，容易被搜索引擎搜索到 這個(gè)應(yīng)用最經(jīng)典的例子就是各大blog程序了。都是采用div+css構(gòu)架。內(nèi)容和樣式的分離導(dǎo)致我們?cè)谥貥?gòu)頁(yè)