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

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

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

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

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

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