單元4構建CSS3樣式與網頁布局網站規劃建設與管理維護（第三版）單元4

構建CSS3樣式與網頁布局學習目標1了解CSS3的基本語法與格式掌握CSS3在網頁布局中的應用熟悉CSS3各種屬性的設置學習一絲不茍的工作態度單元內容及任務說明

任務1體驗CSS3樣式應用

CSS（cascadingstylesheet，層疊樣式表）是一組格式設置規則，用于控制Web頁面的外觀，目前最新版本為CSS3。CSS是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的格式表現而言，CSS能夠對網頁對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言任務2設置CSS樣式任務3應用CSS+Div布局技術在使用CSS樣式之前要先定義好CSS樣式，這樣才能對網頁中的內容進行CSS樣式的應用。在Dreamweaver中，即使不懂CSS代碼，也可以輕松地創建與使用CSS樣式表。本任務圍繞設置CSS樣式開展。

CSS布局技術依賴于三個基本概念：定位、浮動和空白邊操縱。不同的技術其實沒有什么本質的差異，只是實現手段不同。同一種布局讓100個網頁設計師來做,可能就有100種方法。此任務圍繞應用Css+Div布局技術展開。任務實施-體驗CSS外部樣式表確定網站建設的目的確定網站建設的目的網站結構總體策劃010203

任務1了解網站整體規劃CSS的語法構建選擇器應用CSS樣式到網頁中任務實施-體驗CSS外部樣式表

相關知識CSS的語法結構選擇器應用CSS樣式到網頁中010203

相關知識任務實施-CSS樣式應用確定網站建設的目的確定網站建設的目的網站結構總體策劃010203任務2設置CSS樣式使用CSS創建個性化鼠標使用CSS3濾鏡設置CSS樣式的過渡屬性任務實施-CSS樣式應用

任務實施-CSS樣式應用

任務實施-CSS樣式應用

相關知識新建CSS樣式編輯CSS樣式設置CSS樣式的類型屬性設置CSS樣式的背景屬性設置CSS樣式的區塊屬性0102030504相關知識設置CSS樣式的方框屬性設置CSS樣式的邊框屬性設置CSS樣式的列表屬性設置CSS樣式的定位屬性設置CSS樣式的寬展屬性060708100912設置CSS樣式的過渡屬性11CSS和CSS3的異同

相關知識

相關知識相關知識相關知識相關知識相關知識相關知識任務實

施班級簡歷網頁布局

確定網站建設的目的確定網站建設的目的0102任務3應用CSS+Div布局技術基于浮動的固定布局班級簡介網頁布局任務實施-班級簡歷網頁布局任務實施-班級簡歷網頁布局任務實施-班級簡歷網頁布局

相關知識CSS盒模型讓布局居中流體布局和彈性布局010203

相關知識本章小結自從CSS出現之后，HTML終于擺脫了雜亂無章的描述手法，開始將頁面內容與樣式分離。CSS符合W3C標準，最大限度地保證網站不會因為網絡應用的升級而被淘汰。其極大優勢表現在簡潔的代碼，對于一個大型網站來說，可以節省大量帶寬。相對于傳統的table，采用CSS+Div技術的網頁，對于搜索引擎的收錄更加友好。CSS的關鍵在于其與HTML技術及JavaScript等腳本語言的