第11章-CSS+Div靈活布局網(wǎng)頁

第11章CSS+Div靈活布局網(wǎng)頁教學(xué)內(nèi)容：CSS＋Div是網(wǎng)站標(biāo)準(zhǔn)中常用的術(shù)語之一，CSS和Div的結(jié)構(gòu)被越來越多的人采用，很多人都拋棄了表格而使用CSS來布局頁面，它的好處很多，可以使結(jié)構(gòu)簡潔，定位更靈活，CSS布局的最終目的是搭建完善的頁面架構(gòu)。

教學(xué)重點(diǎn)認(rèn)識Div與Div布局的優(yōu)勢掌握CSS定位的方法掌握CSS布局的理念常見的布局類型在CSS布局的網(wǎng)頁中，<Div>與<Span>都是常用的標(biāo)記，利用這兩個標(biāo)記，加上CSS對其樣式的控制，可以很方便地實(shí)現(xiàn)網(wǎng)頁的布局。11.1初識Div過去最常用的網(wǎng)頁布局工具是<table>標(biāo)簽，它本是用來創(chuàng)立電子數(shù)據(jù)表的，由于<table>標(biāo)簽本來不是要用于布局的，因此設(shè)計師們不得不經(jīng)常以各種不尋常的方式來使用這個標(biāo)簽——如把一個表格放在另一個表格的單元里面。

Div概述Div標(biāo)記早在HTML3.0時代就已經(jīng)出現(xiàn)，但那時并不常用，直到CSS的出現(xiàn)，才逐漸發(fā)揮出它的優(yōu)勢。

Div與Span的區(qū)別掌握基于CSS的網(wǎng)頁布局方式，是實(shí)現(xiàn)Web標(biāo)準(zhǔn)的根底。在主頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。

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

float定位position的原意為位置、狀態(tài)、安置。在CSS布局中，position屬性非常重要，很多特殊容器的定位必須用position來完成。

position定位無論使用表格還是CSS，網(wǎng)頁布局都把大塊的內(nèi)容放進(jìn)網(wǎng)頁的不同區(qū)域里面。有了CSS，最常用來組織內(nèi)容的元素就是<div>標(biāo)簽。11.3CSS布局理念在利用CSS布局頁面時，首先要有一個整體的規(guī)劃，包括整個頁面分成哪些模塊，各個模塊之間的父子關(guān)系等。將頁面用Div分塊當(dāng)頁面的內(nèi)容已經(jīng)確定后，那么需要根據(jù)內(nèi)容本身考慮整體的頁面布局類型，如是單欄、雙欄還是三欄等，這里采用的布局如圖11.6所示。設(shè)計各塊的位置整理好頁面的框架后，就可以利用CSS對各個板塊進(jìn)行定位，實(shí)現(xiàn)對頁面的整體規(guī)劃，然后再往各個板塊中添加內(nèi)容。用CSS定位現(xiàn)在一些比較知名的網(wǎng)頁設(shè)計全部采用的DIV+CSS來排版布局，DIV+CSS的好處可以使HTML代碼更整齊，更容易使人理解，而且在瀏覽時的速度也比傳統(tǒng)的布局方式快，最重要的是它的可控性要比表格強(qiáng)得多。11.4常見的布局類型一列式布局是所有布局的根底，也是最簡單的布局形式。一列固定寬度中，寬度的屬性值是固定像素。列固定寬度自適應(yīng)布局是在網(wǎng)頁設(shè)計中常見的一種布局形式，自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小，自動改變其寬度或高度值，是一種非常靈活的布局形式，良好的自適應(yīng)布局網(wǎng)站對不同分辨率的顯示器都能提供最好的顯示效果。列自適應(yīng)兩列固定寬度非常簡單，兩列的布局需要用到兩個div，分別為兩個div的id設(shè)置為left與right，表示兩個div的名稱。兩列固定寬度下面使用兩列寬度自適應(yīng)性，以實(shí)現(xiàn)左右列寬度能夠做到自動適應(yīng)，設(shè)置自適應(yīng)主要通過寬度的百分比值設(shè)置。兩列寬度自適應(yīng)在實(shí)際應(yīng)用中，有時候需要右列固定寬度，右列根據(jù)瀏覽器窗口大小自動適應(yīng)，在CSS中只要設(shè)置在左列的寬度即可，如上例中左右列都采用了百分比實(shí)現(xiàn)了寬度自適應(yīng)，這里只要將左列寬度設(shè)定為固