DreamweaverCS6完美網(wǎng)頁(yè)制作基礎(chǔ)實(shí)例與技巧從入門到精通第章CSS+Div靈活布局網(wǎng)頁(yè)ppt課件

1、在CSS布局的網(wǎng)頁(yè)中，與都是常用的標(biāo)記，利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便地實(shí)現(xiàn)網(wǎng)頁(yè)的布局。過去最常用的網(wǎng)頁(yè)布局工具是標(biāo)簽，它本是用來(lái)創(chuàng)建電子數(shù)據(jù)表的，由于標(biāo)簽本來(lái)不是要用于布局的，因此設(shè)計(jì)師們不得不經(jīng)常以各種不尋常的方式來(lái)使用這個(gè)標(biāo)簽如把一個(gè)表格放在另一個(gè)表格的單元里面。Div標(biāo)記早在HTML3.0時(shí)代就已經(jīng)出現(xiàn)，但那時(shí)并不常用，直到CSS的出現(xiàn)，才逐漸發(fā)揮出它的優(yōu)勢(shì)。11.1.211.1.2DivDiv與與SpanSpan的區(qū)別的區(qū)別掌握基于CSS的網(wǎng)頁(yè)布局方式，是實(shí)現(xiàn)Web標(biāo)準(zhǔn)的基礎(chǔ)。在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加

2、精確的控制。11.1.311.1.3DivDiv與與CSSCSS布局優(yōu)勢(shì)布局優(yōu)勢(shì)CSS對(duì)元素的定位包括相對(duì)定位和絕對(duì)定位，同時(shí)，還可以把相對(duì)定位和絕對(duì)定位結(jié)合起來(lái)，形成混合定位。如果想熟練掌握Div和CSS的布局方法，首先要對(duì)盒模型有足夠的了解。盒子模型是CSS布局網(wǎng)頁(yè)時(shí)非常重要的概念，只有很好地掌握了盒子模型以及其中每個(gè)元素的使用方法，才能真正的布局網(wǎng)頁(yè)中各個(gè)元素的位置。1 1. .1.1盒子模型的概念盒子模型的概念float屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動(dòng)。11.2.211.2.2floatfloat定位定位pos

3、ition的原意為位置、狀態(tài)、安頓。在CSS布局中，position屬性非常重要，很多特殊容器的定位必須用position來(lái)完成。11.2.311.2.3positionposition定位定位無(wú)論使用表格還是CSS，網(wǎng)頁(yè)布局都把大塊的內(nèi)容放進(jìn)網(wǎng)頁(yè)的不同區(qū)域里面。有了CSS，最常用來(lái)組織內(nèi)容的元素就是標(biāo)簽。在利用CSS布局頁(yè)面時(shí)，首先要有一個(gè)整體的規(guī)劃，包括整個(gè)頁(yè)面分成哪些模塊，各個(gè)模塊之間的父子關(guān)系等。11.3.111.3.1將頁(yè)面用將頁(yè)面用DivDiv分塊分塊當(dāng)頁(yè)面的內(nèi)容已經(jīng)確定后，則需要根據(jù)內(nèi)容本身考慮整體的頁(yè)面布局類型，如是單欄、雙欄還是三欄等，這里采用的布局如圖11.6所示。11.3

4、.211.3.2設(shè)計(jì)各塊的位置設(shè)計(jì)各塊的位置整理好頁(yè)面的框架后，就可以利用CSS對(duì)各個(gè)板塊進(jìn)行定位，實(shí)現(xiàn)對(duì)頁(yè)面的整體規(guī)劃，然后再往各個(gè)板塊中添加內(nèi)容。11.3.311.3.3用用CSSCSS定位定位現(xiàn)在一些比較知名的網(wǎng)頁(yè)設(shè)計(jì)全部采用的DIV+CSS來(lái)排版布局，DIV+CSS的好處可以使HTML代碼更整齊，更容易使人理解，而且在瀏覽時(shí)的速度也比傳統(tǒng)的布局方式快，最重要的是它的可控性要比表格強(qiáng)得多。一列式布局是所有布局的基礎(chǔ)，也是最簡(jiǎn)單的布局形式。一列固定寬度中，寬度的屬性值是固定像素。11.4.111.4.1列固定寬度列固定寬度自適應(yīng)布局是在網(wǎng)頁(yè)設(shè)計(jì)中常見的一種布局形式，自適應(yīng)的布局能夠根據(jù)瀏覽

5、器窗口的大小，自動(dòng)改變其寬度或高度值，是一種非常靈活的布局形式，良好的自適應(yīng)布局網(wǎng)站對(duì)不同分辨率的顯示器都能提供最好的顯示效果。11.4.211.4.2列自適應(yīng)列自適應(yīng)兩列固定寬度非常簡(jiǎn)單，兩列的布局需要用到兩個(gè)div，分別為兩個(gè)div的id設(shè)置為left與right，表示兩個(gè)div的名稱。11.4.311.4.3兩列固定寬度兩列固定寬度下面使用兩列寬度自適應(yīng)性，以實(shí)現(xiàn)左右列寬度能夠做到自動(dòng)適應(yīng)，設(shè)置自適應(yīng)主要通過寬度的百分比值設(shè)置。11.4.411.4.4兩列寬度自適應(yīng)兩列寬度自適應(yīng)在實(shí)際應(yīng)用中，有時(shí)候需要右列固定寬度，右列根據(jù)瀏覽器窗口大小自動(dòng)適應(yīng)，在CSS中只要設(shè)置在左列的寬度即可，如上例中左右列都采用了百分比實(shí)現(xiàn)了寬度自適應(yīng)，這里只要將左列寬度設(shè)定為固定值，右列不設(shè)置任何寬度值，并且右列不浮動(dòng)。11.4.511.4.5兩列右列寬度自適應(yīng)兩列右列寬