網(wǎng)站建設與網(wǎng)頁制作第五章Web2.0標準靜態(tài)網(wǎng)頁的搭建

1、精品課件精品課件.本本 章章 內(nèi)內(nèi) 容容 列表元素布局列表元素布局2Div+CSS布局方法布局方法3 1CSS盒模型盒模型3 3元素的非常規(guī)定位方式元素的非常規(guī)定位方式4. 在在XHTML中應用中應用Div+CSS標簽進行網(wǎng)頁布局標簽進行網(wǎng)頁布局是目前最新的網(wǎng)頁設計特作技術(shù)，相對于用表格來是目前最新的網(wǎng)頁設計特作技術(shù)，相對于用表格來進行布局，其有著代碼條理分明、代碼使用更加靈進行布局，其有著代碼條理分明、代碼使用更加靈活、樣式結(jié)構(gòu)較為清晰等特點?；?、樣式結(jié)構(gòu)較為清晰等特點。.1. Div標簽的格式標簽的格式: 標簽內(nèi)容標簽內(nèi)容 div標簽 第1個div標簽 第2個div標簽 第3個div標簽

2、第4個div標簽 .2. Div標簽的特點標簽的特點: 不論如何調(diào)整瀏覽器窗口，不論如何調(diào)整瀏覽器窗口，div標簽的內(nèi)容只占瀏覽器標簽的內(nèi)容只占瀏覽器一行。即默認情況下，一行只能容納一個一行。即默認情況下，一行只能容納一個div標簽。標簽。.3. Div標簽的標簽的CSS控制控制: 通過通過id選擇符對選擇符對div 加入加入CSS代碼，使代碼，使div擁有各種屬擁有各種屬性可以控制。性可以控制。.3. Div標簽的標簽的CSS控制控制: div標簽 #no1,#no2background-color:#eee; #no3,#no4background-color:#999; width:30

3、0px; 第1個div標簽 第2個div標簽 第3個div標簽 第4個div標簽 . HTML 和和 XHTML 的區(qū)別簡單來說，的區(qū)別簡單來說，XHTML 語法上語法上要求更嚴謹些。要求更嚴謹些。XHTML 相對相對 HTML 的幾大區(qū)別：的幾大區(qū)別：XHTML 要求正確嵌套要求正確嵌套XHTML 區(qū)分大小寫區(qū)分大小寫XHTML 屬性值要用雙引號屬性值要用雙引號XHTML 用用 id 屬性代替屬性代替 name 屬性屬性XHTML 特殊字符的處理特殊字符的處理. XHTML的布局核心是的布局核心是Div標簽，標簽，div屬于屬于XHTML中的中的塊級元素。塊級元素。XHTML的標簽默認為兩種

4、元素，塊狀元素和內(nèi)的標簽默認為兩種元素，塊狀元素和內(nèi)聯(lián)元素聯(lián)元素. 1. 塊狀元素：塊狀元素： 該元素是矩形的，有自己的高度和寬度。默認情況下，該元素是矩形的，有自己的高度和寬度。默認情況下，在父容器中占據(jù)一行，同一行無法容納其它元素及文本。在父容器中占據(jù)一行，同一行無法容納其它元素及文本。其它元素將顯示在其下一行。其它元素將顯示在其下一行。 . 2. 內(nèi)聯(lián)元素：內(nèi)聯(lián)元素： 內(nèi)聯(lián)元素沒有固定形狀，也無法設置高度和寬度。內(nèi)聯(lián)內(nèi)聯(lián)元素沒有固定形狀，也無法設置高度和寬度。內(nèi)聯(lián)元素的形狀由其內(nèi)含的內(nèi)容所決定，所以在寬度足夠的情元素的形狀由其內(nèi)含的內(nèi)容所決定，所以在寬度足夠的情況下，一行能容納多個內(nèi)聯(lián)元

5、素。況下，一行能容納多個內(nèi)聯(lián)元素。. 塊狀元素適合于大塊區(qū)域的排版，所以常用來布局網(wǎng)塊狀元素適合于大塊區(qū)域的排版，所以常用來布局網(wǎng)頁頁;而內(nèi)聯(lián)元素適合于局部元素的樣式設置，所以常用來設而內(nèi)聯(lián)元素適合于局部元素的樣式設置，所以常用來設置局部文字樣式。置局部文字樣式。. 要使用要使用div進行網(wǎng)頁布局，首先要學會使用進行網(wǎng)頁布局，首先要學會使用CSS靈活控靈活控制制div元素的樣式。元素的樣式。 width屬性：設置屬性：設置div寬度，單位為寬度，單位為px； height屬性：設置屬性：設置div高度，單位為高度，單位為px 。 當單位為百分比時，當單位為百分比時，div元素的寬度和高度為自適

6、應狀元素的寬度和高度為自適應狀態(tài)，即寬度和高度適應瀏覽器窗口尺寸而變化。態(tài)，即寬度和高度適應瀏覽器窗口尺寸而變化。. 設置div樣式 xhtml,bodyheight:100%; #one background-color: #ccc; border:1px solid #000; width:200px; height:100px; #two background-color: #ccc; border:1px solid #000; width:50%; height:25%; 固定DIV的寬度和高度 自適應DIV的寬度和高度 . 設置div樣式 xhtml,bodyheight:100%

7、; #one background-color: #ccc; border:1px solid #000; width:200px; height:100px; #two background-color: #ccc; border:1px solid #000; width:50%; height:25%;. 使使Div元素水平居中的方法有多種，常用的方法是用元素水平居中的方法有多種，常用的方法是用CSS設置設置div的左右邊距，即的左右邊距，即margin-left屬性和屬性和margin-right屬性。當設置屬性。當設置div左外邊距和右外邊距的值為左外邊距和右外邊距的值為auto，即

8、自動時，左外邊距和右外邊距將相等，從而達到即自動時，左外邊距和右外邊距將相等，從而達到div水平水平居中的效果。居中的效果。. 水平居中 xhtml,bodyheight:100%; *margin:0px; padding:0px; #webwidth:75%; height:100%; background-color:#ccc; border:1px solid #000; margin-left:auto; margin-right:auto; 這里是整個網(wǎng)頁的內(nèi)容 . 一個一個Div標簽占據(jù)一行，怎樣才能實現(xiàn)布局并列兩塊標簽占據(jù)一行，怎樣才能實現(xiàn)布局并列兩塊區(qū)域呢？塊狀元素有個很重要

9、的區(qū)域呢？塊狀元素有個很重要的“float”屬性，可以使多屬性，可以使多個塊狀元素并列于一行。個塊狀元素并列于一行。 “float”屬性也被稱為浮動屬性，對前面的屬性也被稱為浮動屬性，對前面的div元素元素設置浮動屬性后，當前面的設置浮動屬性后，當前面的div元素留有足夠的空白寬度時，元素留有足夠的空白寬度時，后面的后面的div元素將會自動浮上來，和前面的元素將會自動浮上來，和前面的div元素并列在元素并列在一行。一行。.“float”屬性的取值屬性的取值:inherit :繼承屬性，代表繼承父容器的屬性；繼承屬性，代表繼承父容器的屬性；none :float屬性的默認值，代表塊狀元素不會浮動；屬性的默認值，代表塊狀元素不會浮動；left :代表塊狀元素向左浮動；代表塊狀元素向左浮動；right :代表塊狀元素向右浮動；代表塊狀元素向右浮動；.要使兩個要使兩個div并列于一行的前提是：并列于一行的前提是： 這一行要有足夠的寬度空間來容納兩個這一行要有足夠的寬度空間來容納兩個div的寬度。的寬度。. 設置div浮動 *margin:0px; padding:0px; #firstwidth:150px; height:100px; background-color:#ccc; border:1px solid #000; float:left; #s