Web前端設(shè)計(jì)基礎(chǔ)教程高職PPT完整全套教學(xué)課件

Web前端設(shè)計(jì)基礎(chǔ)教程

01HTML基礎(chǔ)CSS基礎(chǔ)JavaScript基礎(chǔ)目錄頁

ContentsPage綜合實(shí)例020304模塊一HTML基礎(chǔ)模塊一HTML基礎(chǔ)HTML是創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,是描述網(wǎng)頁的一種語言規(guī)范。網(wǎng)頁中的文字、標(biāo)題、段落、列表、圖片、超鏈接、音視頻和交互表單等內(nèi)容是通過HTML相應(yīng)標(biāo)記標(biāo)簽來描述的,瀏覽器也是根據(jù)HTML標(biāo)簽來詮釋網(wǎng)頁內(nèi)容的。因此,掌握HTML是進(jìn)行網(wǎng)頁設(shè)計(jì)的前提。1.1網(wǎng)站開發(fā)綜述1.1.1網(wǎng)站的基本概念1.WWWWWW是WorldWideWeb的縮寫,又稱為萬維網(wǎng)、Web或3W,它是由互相鏈接的超文本組成的系統(tǒng),通過互聯(lián)網(wǎng)訪問。在這個(gè)系統(tǒng)中,每個(gè)有用的事物稱為資源,并由一個(gè)全局統(tǒng)一資源標(biāo)識(shí)符進(jìn)行標(biāo)識(shí);這些資源在互聯(lián)網(wǎng)上通過超文本傳輸協(xié)議傳送給客戶端,而后者通過單擊超鏈接或在Web瀏覽器地址欄中輸入統(tǒng)一資源定位器或網(wǎng)址來獲得資源、瀏覽信息,也可以提交數(shù)據(jù)。1.1網(wǎng)站開發(fā)綜述1.1.1網(wǎng)站的基本概念2.網(wǎng)站網(wǎng)站也稱為站點(diǎn),它是指存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體,包含一個(gè)或多個(gè)網(wǎng)頁,這些網(wǎng)頁以超鏈接方式鏈接在一起,構(gòu)成一個(gè)整體,描述一組完整的信息。1.1網(wǎng)站開發(fā)綜述1.1.1網(wǎng)站的基本概念3.網(wǎng)頁網(wǎng)頁(Webpage)是存放在Web服務(wù)器上供客戶端瀏覽的文件,可在Internet上傳輸。網(wǎng)頁是按照網(wǎng)頁文檔規(guī)范編寫的一個(gè)或多個(gè)文件,這種格式的文件可由超文本標(biāo)記語言創(chuàng)建,能將文字、圖片、聲音和音(視)頻等各種多媒體文件組合在一起,并保存在Web服務(wù)器中。1.1.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁1.靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是指客戶端發(fā)出URL請(qǐng)求給WWW服務(wù)器后,服務(wù)器不加處理而直接發(fā)送到客戶端的網(wǎng)頁,其處理機(jī)制如圖1-1-1所示。靜態(tài)網(wǎng)頁通常由HTML/CSS語言編寫。1.1網(wǎng)站開發(fā)綜述圖1-1-1靜態(tài)網(wǎng)頁處理機(jī)制1.1.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁2.動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁是網(wǎng)頁內(nèi)容隨不同用戶、不同的訪問需求而發(fā)生變化,網(wǎng)頁中不僅包含HTML代碼,還包含在Web服務(wù)器端執(zhí)行的腳本程序代碼。客戶端發(fā)出所瀏覽的動(dòng)態(tài)網(wǎng)頁URL請(qǐng)求后,服務(wù)器加載所請(qǐng)求的頁面并運(yùn)行此服務(wù)器端的腳本代碼,然后將運(yùn)行后的動(dòng)態(tài)結(jié)果轉(zhuǎn)換為靜態(tài)代碼后與頁面中的原靜態(tài)內(nèi)容一同發(fā)送到客戶端瀏覽器中,再由瀏覽器渲染呈現(xiàn),其處理機(jī)制如圖1-1-2所示。1.1網(wǎng)站開發(fā)綜述1.1.2靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁1.1網(wǎng)站開發(fā)綜述圖1-1-2動(dòng)態(tài)網(wǎng)頁處理機(jī)制1.1.3Web前端與后臺(tái)1.1網(wǎng)站開發(fā)綜述1.Web前端前端通常指Web前端,是Web應(yīng)用中用戶通過瀏覽器可以瀏覽或操作的Web頁面。所涉及的內(nèi)容包含Web頁面的結(jié)構(gòu)、外觀視覺和Web層面的交互。Web前端開發(fā)也是主要針對(duì)Web的結(jié)構(gòu)、表現(xiàn)和行為進(jìn)行的,與之對(duì)應(yīng)的語言開發(fā)工具包括HTML、CSS和JavaScript等。1.1.3Web前端與后臺(tái)1.1網(wǎng)站開發(fā)綜述2.Web后臺(tái)Web后臺(tái)是指運(yùn)行在Web服務(wù)器端的腳本代碼,主要實(shí)現(xiàn)數(shù)據(jù)庫操作、Web應(yīng)用程序的業(yè)務(wù)邏輯等功能。常用Web前端與后臺(tái)技術(shù)如圖1-1-3所示。圖1-1-3常用Web前端與后臺(tái)技術(shù)1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)1)網(wǎng)站的定位

在網(wǎng)站規(guī)劃中,要確定建站的目的、網(wǎng)站用戶和網(wǎng)站內(nèi)容,明確網(wǎng)站的定位,確定網(wǎng)站的主題類型。常用網(wǎng)站主題類型有新聞、購物商城、教育、生活、科技等。網(wǎng)站定位不能過于寬泛,更不能包羅萬象,漫無邊際,要緊緊圍繞用戶需求來確定,緊扣主題,并突出個(gè)性和特色。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)2)網(wǎng)站的風(fēng)格風(fēng)格指的是網(wǎng)站的整體形象給瀏覽者的綜合感受,包括版面布局、瀏覽方式、交互性和文字等諸多因素。網(wǎng)站風(fēng)格要體現(xiàn)自己的特色,獨(dú)樹一幟。通過網(wǎng)站的某一點(diǎn),如文字、色彩、技術(shù)等,能讓瀏覽者明確分辨出此部分就是網(wǎng)站所獨(dú)有的。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)3)網(wǎng)站的CICI是指通過視覺來統(tǒng)一企業(yè)的形象。網(wǎng)站和實(shí)體公司一樣,也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的、有創(chuàng)意的CI設(shè)計(jì)對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。當(dāng)網(wǎng)站主題和名稱定下來之后,就需要對(duì)網(wǎng)站的CI進(jìn)行設(shè)計(jì)。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)3)網(wǎng)站的CI網(wǎng)站的CI設(shè)計(jì)主要包括：(1)設(shè)計(jì)網(wǎng)站的標(biāo)志(logo)(2)設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩(3)設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體(4)設(shè)計(jì)網(wǎng)站宣傳標(biāo)語1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)4)網(wǎng)站的欄目網(wǎng)站欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引。網(wǎng)站欄目規(guī)劃的主要任務(wù)就是對(duì)網(wǎng)站題材內(nèi)容進(jìn)行分類和篩選,并組織成合理的邏輯結(jié)構(gòu)。設(shè)計(jì)網(wǎng)站欄目時(shí)要注意如下幾點(diǎn):(1)設(shè)計(jì)網(wǎng)站的欄目時(shí)要緊扣網(wǎng)站主題。(2)設(shè)計(jì)一個(gè)最近更新或站點(diǎn)指南欄目。(3)設(shè)定一個(gè)可以雙向交流的欄目。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)5)網(wǎng)站的目錄結(jié)構(gòu)在規(guī)劃網(wǎng)站目錄結(jié)構(gòu)時(shí),通常遵循以下規(guī)則:(1)按欄目內(nèi)容分別建立文件夾。(2)資源按類存放在不同的文件夾中,文件夾層次不要太深,一般不要超過3層,以免系統(tǒng)維護(hù)時(shí)查找麻煩。(3)避免用中文命名文件或文件夾。(4)在每一個(gè)主目錄下都建立獨(dú)立的Images目錄。(5)數(shù)據(jù)庫文件單獨(dú)放置。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述1.網(wǎng)站規(guī)劃與設(shè)計(jì)6)網(wǎng)站的鏈接結(jié)構(gòu)常用的網(wǎng)站鏈接結(jié)構(gòu)有以下幾種類型:(1)樹狀鏈接結(jié)構(gòu)。樹狀鏈接結(jié)構(gòu)類似于Windows文件目錄結(jié)構(gòu),首頁鏈接指向一級(jí)頁面,一級(jí)頁面鏈接指向二級(jí)頁面。(2)網(wǎng)狀鏈接結(jié)構(gòu)。網(wǎng)狀鏈接結(jié)構(gòu)類似于網(wǎng)絡(luò)服務(wù)器的鏈接,每個(gè)頁面相互之間都建立有鏈接。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便,隨時(shí)可以到達(dá)自己喜歡的頁面。缺點(diǎn)是鏈接太多,容易使瀏覽者迷路,搞不清自己在什么位置,看了多少內(nèi)容。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述2.常用網(wǎng)頁編輯工具(1)HBuilderX。HBuilderX中文版是一款由DCloud(數(shù)字天堂)全新推出的Web開發(fā)工具,簡稱HX。其主要特點(diǎn)如下:①輕巧②極速③Vue開發(fā)強(qiáng)化④小程序支持⑤markdown利器⑥清爽護(hù)眼⑦強(qiáng)大的語法提示⑧高效極客工具⑨擴(kuò)展性1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述2.常用網(wǎng)頁編輯工具(2)VisualStudioCode(簡稱VSCode)。VSCode是微軟開發(fā)的一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器。VSCode的編輯器界面依然是微軟經(jīng)典的VS風(fēng)格,支持幾乎所有主流開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼對(duì)比等,支持插件擴(kuò)展,并針對(duì)網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述2.常用網(wǎng)頁編輯工具(3)Dreamweaver。Dreamweaver是Adobe公司推出的所見即所得的網(wǎng)頁編輯工具。Dreamweaver采用多種先進(jìn)技術(shù),能高效創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁,使網(wǎng)頁創(chuàng)建過程變得快捷簡單。1.1.4網(wǎng)站開發(fā)技術(shù)路線1.1網(wǎng)站開發(fā)綜述2.常用網(wǎng)頁編輯工具(4)SublimeText。SublimeText是一款跨平臺(tái)代碼編輯器,可同時(shí)支持Windows、Linux、MacOSX等操作系統(tǒng)。Sublime

Text具有漂亮的用戶界面和強(qiáng)大的功能,如代碼縮略圖、Python插件、代碼段等。1.1.5HTML簡介1.1網(wǎng)站開發(fā)綜述1.HTML的概念HTML即超文本標(biāo)記語言,其英文全稱為hypertextmarkuplanguage,是創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,是描述網(wǎng)頁的一種語言規(guī)范。簡易性可擴(kuò)展性平臺(tái)無關(guān)性通用性010203041.1網(wǎng)站開發(fā)綜述HTML的主要特點(diǎn)如下：1.1.5HTML簡介2.HTML的特點(diǎn)1.1.5HTML簡介1.1網(wǎng)站開發(fā)綜述3.HTML標(biāo)簽HTML標(biāo)記標(biāo)簽通常稱為HTML標(biāo)簽(HTMLtag)。在網(wǎng)頁中,HTML標(biāo)簽用來標(biāo)記網(wǎng)頁的不同部分,瀏覽器在執(zhí)行網(wǎng)頁時(shí),會(huì)依據(jù)標(biāo)簽來處理其中的內(nèi)容。HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,如<html>。HTML標(biāo)簽通常是成對(duì)出現(xiàn)的,如<b>和</b>，標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽,開始標(biāo)簽和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。例如:<標(biāo)簽>內(nèi)容</標(biāo)簽>。1.1.5HTML簡介1.1網(wǎng)站開發(fā)綜述隨著HTML的廣泛應(yīng)用,HTML出現(xiàn)了許多版本,目前版本為HTML5,各版本如表1-1-1所示。表1-1-1

HTML各版本4.HTML版本1.2

常用標(biāo)簽HTML是一種規(guī)范、一種標(biāo)準(zhǔn),它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。HTML文檔通過在文本文件中添加標(biāo)記符,可以告訴瀏覽器如何顯示其中的內(nèi)容,如文字如何處理、畫面如何安排、圖片如何顯示等。瀏覽器按順序閱讀網(wǎng)頁文件,然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容。HTML常用標(biāo)簽如表1-2-1所示。1.2常用標(biāo)簽表1-2-1HTML常用標(biāo)簽1.2.1文檔標(biāo)題1.2常用標(biāo)簽<title>稱為標(biāo)題標(biāo)簽,位于<head>與</head>標(biāo)簽中,用于在瀏覽器的標(biāo)題欄中顯示網(wǎng)頁的主題,也用于搜索引擎顯示搜索結(jié)果。當(dāng)用戶將網(wǎng)頁加入書簽或保存時(shí),標(biāo)題也作為該頁面的標(biāo)志或文件名。其格式如下:<title>標(biāo)題名</title>1.2.2段落1.2常用標(biāo)簽段落標(biāo)簽<p>…</p>用于定義網(wǎng)頁的一個(gè)段落。它會(huì)使后面文字換到下一行,并使兩段之間多加一個(gè)空行,相當(dāng)于兩個(gè)<br/>標(biāo)簽(換行標(biāo)簽),其格式如下:<palign="left|center|right">文字</p>1.2.2段落1.2常用標(biāo)簽【例1-2-1】

列出包含<p>標(biāo)簽的多種對(duì)齊屬性,代碼如下,效果如圖1-2-1所示。

圖1-2-1段落標(biāo)簽示例1.2.3文本格式化1.2常用標(biāo)簽使用<strong>標(biāo)簽或<b>標(biāo)簽都可以實(shí)現(xiàn)文本的加粗效果。在網(wǎng)頁中,<b>標(biāo)簽是一個(gè)實(shí)體標(biāo)簽,它所包圍的字符將被設(shè)為bold(粗體),而<strong>標(biāo)簽是一個(gè)邏輯標(biāo)簽,它的作用是加強(qiáng)字符的語氣,主要實(shí)現(xiàn)強(qiáng)調(diào)效果。1.粗體標(biāo)簽在HTML中,使用<em>、<i>標(biāo)簽可以實(shí)現(xiàn)文本的斜體效果。其中,i是英文italic(斜體)的縮寫,em是英文emphasis(強(qiáng)調(diào))的縮寫。2.斜體標(biāo)簽1.2.3文本格式化1.2常用標(biāo)簽在HTML中,使用<del>標(biāo)簽或<s>標(biāo)簽可以實(shí)現(xiàn)文本的中劃線效果。del是英文delete(刪除)的縮寫,s是英文strikethrough(刪除線)的縮寫。這兩個(gè)標(biāo)簽的顯示效果是相同的,但推薦使用<del>標(biāo)簽來實(shí)現(xiàn)對(duì)文本添加中劃線。3.中劃線標(biāo)簽使用<ins>標(biāo)簽或<u>標(biāo)簽可以實(shí)現(xiàn)文本的下劃線效果。其中,ins是英文insert(插入)的縮寫,u是英文underline(下劃線)的縮寫。4.下劃線標(biāo)簽1.2.3文本格式化1.2常用標(biāo)簽使用<sup>標(biāo)簽可以實(shí)現(xiàn)文本的上標(biāo)效果。5.上標(biāo)標(biāo)簽使用<sub>標(biāo)簽可以實(shí)現(xiàn)文本的下標(biāo)效果。6.下標(biāo)標(biāo)簽內(nèi)容標(biāo)題(headin<h6>為最小的標(biāo)題。g)是通過<h1>…<h6>標(biāo)簽進(jìn)行定義的。<h1>為最大的標(biāo)題,<h6>為最小的標(biāo)題。7.標(biāo)題標(biāo)簽1.2.3文本格式化1.2常用標(biāo)簽8.空格HTML提供了多種空格實(shí)體。(1)不換行空格(2)半角空格(3)全角空格1.2.3文本格式化1.2常用標(biāo)簽<span>標(biāo)簽用于對(duì)文檔中的行內(nèi)元素進(jìn)行組合。當(dāng)對(duì)它應(yīng)用樣式時(shí),它才會(huì)產(chǎn)生視覺上的變化。如果不對(duì)<span>應(yīng)用樣式,那么<span>元素中的文本與其他文本不會(huì)有任何視覺上的差異。<span>標(biāo)簽提供了一種將文本的一部分或文檔的一部分獨(dú)立出來的方式。9.<span>標(biāo)簽1.2.3文本格式化1.2常用標(biāo)簽在HTML中,使用<big>標(biāo)簽可以實(shí)現(xiàn)字體的變大,使用<small>標(biāo)簽可以實(shí)現(xiàn)字體的變小?！纠?-2-2】文本格式標(biāo)簽示例,代碼如下,效果如圖1-2-2所示。10.字號(hào)標(biāo)簽1.2.3文本格式化1.2常用標(biāo)簽10.字號(hào)標(biāo)簽圖1-2-2文本格式標(biāo)簽示例1.2.4超鏈接1.2常用標(biāo)簽超鏈接是網(wǎng)頁中使用頻繁的HTML元素,網(wǎng)站的各頁面、同一頁面的不同部分都可由超鏈接串接而成。單擊超鏈接可以實(shí)現(xiàn)頁面之間、同一頁面的不同內(nèi)容之間的跳轉(zhuǎn)。將鼠標(biāo)指針移動(dòng)到超鏈接時(shí),鼠標(biāo)指針會(huì)變成小手形狀。默認(rèn)情況下,超鏈接以以下形式出現(xiàn)在瀏覽器中:一個(gè)未訪問過的超鏈接顯示為藍(lán)色字體并帶下劃線;訪問過的超鏈接顯示為紫色并帶下劃線;單擊超鏈接時(shí),超鏈接顯示為紅色并帶下劃線。根據(jù)所鏈接的目標(biāo),超鏈接可分為頁面超鏈接、錨點(diǎn)超鏈接、電子郵件超鏈接等。1.2.4超鏈接1.2常用標(biāo)簽(1)href屬性為超文本引用,它的值為一個(gè)URL,是目標(biāo)資源的有效地址。頁面文件目標(biāo)地址又分為相對(duì)地址和絕對(duì)地址。(2)target屬性值如下:①_blank。②_parent。③_self。④_top。1.2.4超鏈接1.2常用標(biāo)簽【例1-2-3】超鏈接示例,代碼如下,效果如圖1-2-3所示。圖1-2-3超鏈接示例1.2.5圖像1.2常用標(biāo)簽網(wǎng)頁中的圖像是不可缺少的元素,HTML使用圖像標(biāo)簽可將圖像加入網(wǎng)頁中。圖像標(biāo)簽的格式如下:1.2.5圖像1.2常用標(biāo)簽【例1-2-4】圖像標(biāo)簽示例,代碼如下,效果如圖1-2-4所示。圖1-2-4圖像標(biāo)簽示例1.2.6列表1.2常用標(biāo)簽1.無序列表無序列表前導(dǎo)符號(hào)無次序,是用黑點(diǎn)、圓圈、方框等一些特殊符號(hào)標(biāo)識(shí)的。創(chuàng)建無序列表時(shí),使用HTML的<ul>標(biāo)簽和<li>標(biāo)簽來標(biāo)記。其中,<ul>標(biāo)識(shí)一個(gè)無序列表的開始,<li>標(biāo)識(shí)一個(gè)無序列表項(xiàng)。格式如下:1.2.6列表1.2常用標(biāo)簽1.無序列表【例1-2-5】無序列表示例,代碼如下,效果如圖1-2-5所示。圖1-2-5無序列表示例1.2.6列表1.2常用標(biāo)簽2.有序列表有序列表為具有特定編號(hào)順序的列表項(xiàng)的集合,使用<ol>標(biāo)簽建立有序列表,列表項(xiàng)用<li>標(biāo)簽定義。格式如下:1.2.6列表1.2常用標(biāo)簽2.有序列表type屬性值如表1-2-2所示。表1-2-2type屬性值1.2.6列表1.2常用標(biāo)簽2.有序列表【例1-2-6】有序列表示例,代碼如下,效果如圖1-2-6所示。圖1-2-6有序列表示例1.2.6列表1.2常用標(biāo)簽3.自定義列表自定義列表是項(xiàng)目及其注釋的組合。自定義列表是由<dl>標(biāo)簽、定義列表中的條目<dt>標(biāo)簽(definition

title,定義標(biāo)題)和<dd>標(biāo)簽(definition

description,定義描述)創(chuàng)建的。格式如下:1.2.6列表1.2常用標(biāo)簽3.自定義列表【例1-2-7】自定義列表示例,代碼如下,效果如圖1-2-7所示。1.2.6列表1.2常用標(biāo)簽3.自定義列表【例1-2-7】圖1-2-7自定義列表示例1.2.6列表1.2常用標(biāo)簽3.自定義列表【例1-2-8】自定義嵌套列表示例,代碼如下,效果如圖1-2-8所示。1.2.6列表1.2常用標(biāo)簽3.自定義列表【例1-2-8】圖1-2-8自定義嵌套列表示例1.3.1表格元素1.3表格在HTML中,表格由<table>標(biāo)簽來定義,每個(gè)表格均有若干行(由<tr>標(biāo)簽定義),每行被分割為若干單元格(由<td>標(biāo)簽定義)。td指表格數(shù)據(jù)(tabledata),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。1.3.1表格元素1.3表格表格基本格式如下:1.3.1表格元素1.3表格表格標(biāo)簽如表1-3-1所示。表1-3-1表格標(biāo)簽1.3.1表格元素1.3表格表格中各元素效果如圖1-3-1所示。border屬性為表格邊框?qū)挾?單位為像素,值默認(rèn)為0。表格背景默認(rèn)為白色,可通過設(shè)置bgcolor屬性來設(shè)定表格背景顏色。圖1-3-1表格元素1.3.1表格元素1.3表格【例1-3-1】表格示例一,設(shè)計(jì)效果如圖1-3-2所示。圖1-3-2表格示例一1.3.1表格元素1.3表格【例1-3-1】代碼如下:1.3.1表格元素1.3表格【例1-3-2】表格示例二,設(shè)計(jì)效果如圖1-3-3所示。圖1-3-3表格示例二1.3.1表格元素1.3表格【例1-3-2】代碼如下:具體的代碼見P23-24.1.3.1表格元素1.3表格【例1-3-3】表格示例三,設(shè)計(jì)效果如圖1-3-4所示。圖1-3-4表格示例三具體的代碼見P24-26.1.3.2表格項(xiàng)目1.3表格本項(xiàng)目主要完成一個(gè)在線計(jì)算器的布局,最終效果如圖1-3-5所示。1.項(xiàng)目介紹圖1-3-5在線計(jì)算1.3.2表格項(xiàng)目1.3表格由圖1-3-5可以看出,計(jì)算器上的內(nèi)容排列整齊,適合用表格來實(shí)現(xiàn)布局。根據(jù)線框圖進(jìn)行分析,該布局可以由兩個(gè)表格來實(shí)現(xiàn),上部的小按鈕和結(jié)果顯示框可以用一個(gè)表格,下面5行4列用另一個(gè)表格。任何頁面都可以使用這種布局分析方法對(duì)其結(jié)構(gòu)進(jìn)行設(shè)計(jì)。代碼如下:2.設(shè)計(jì)思路具體的代碼見P27-28.1.4.1表單簡介1.4表單表單是一個(gè)包含表單元素的區(qū)域。表單元素允許用戶在表單中輸入內(nèi)容,如文本(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等。表單標(biāo)簽格式如下:1.4.1表單簡介1.4表單表單屬性如表1-4-1所示。表1-4-1表單屬性1.4.2表單元素1.4表單表單元素是表單中輸入信息和用戶Web交互控制的元素。常用表單元素如圖1-4-1所示。圖1-4-1常用表單元素1.4.3表單項(xiàng)目1.4表單1.<input>標(biāo)簽<input>標(biāo)簽定義了用戶輸入數(shù)據(jù)的輸入字段,根據(jù)其type屬性,輸入字段可以是文本字段、密碼字段、單選按鈕、復(fù)選框、按鈕、電子郵件、日期時(shí)間、數(shù)字、文件等控件。<input>標(biāo)簽的基本格式如下:1.4.3表單項(xiàng)目1.4表單1.<input>標(biāo)簽【例1-4-1】應(yīng)用表單元素實(shí)現(xiàn)用戶登錄中的用戶名和密碼輸入,效果如圖1-4-2所示。圖1-4-2用戶登錄示例1.4.3表單項(xiàng)目1.4表單1.<input>標(biāo)簽【例1-4-1】主要代碼如下:1.4.3表單項(xiàng)目1.4表單2.<select>標(biāo)簽<select>標(biāo)簽定義了下拉列表,列表項(xiàng)由<option>標(biāo)簽定義。、<select>格式如下:1.4.3表單項(xiàng)目1.4表單2.<select>標(biāo)簽【例1-4-2】選課下拉列表設(shè)計(jì)。執(zhí)行效果如圖1-4-3所示。主要代碼如下:圖1-4-3選課下拉列表1.4.3表單項(xiàng)目1.4表單3.<textarea>標(biāo)簽<textarea>標(biāo)簽定義多行文本框,格式如下:(1)rows屬性:規(guī)定文本框的行數(shù)。(2)cols屬性:規(guī)定文本框的列數(shù)。(3)wrap屬性:規(guī)定在表單提交時(shí)文本區(qū)域中的文本是如何換行的,默認(rèn)為soft。1.4.3表單項(xiàng)目1.4表單4.<fieldset>標(biāo)簽<fieldset>標(biāo)簽將表單內(nèi)的相關(guān)元素分組,并在相關(guān)表單元素周圍繪制邊框。格式如下:1.4.3表單項(xiàng)目1.4表單【例1-4-3】用戶在線注冊(cè)功能的設(shè)計(jì)。最終效果如圖1-4-4所示。圖1-4-4用戶注冊(cè)界面1.4.3表單項(xiàng)目1.4表單1.設(shè)計(jì)思路為方便用戶交互輸入數(shù)據(jù),輸入數(shù)據(jù)的文本框可使用placeholder屬性進(jìn)行提示,兩個(gè)性別單選按鈕name屬性設(shè)為相同,從而保證相互排斥選取。籍貫輸入框通過設(shè)置list屬性,其值關(guān)聯(lián)datalist控件的id,這樣既可輸入,也可以選取,構(gòu)成了一個(gè)組合框。出生日期、Email、照片、身高應(yīng)用input元素,并將其type分別設(shè)置為date、email、file、number。注冊(cè)留言采用多行文本框。1.4.3表單項(xiàng)目1.4表單2.代碼實(shí)現(xiàn)1.4.3表單項(xiàng)目1.4表單2.代碼實(shí)現(xiàn)1.5音視頻元素在支持HTML5的瀏覽器中,可不需要安裝任何插件就能播放音頻和視頻。HTML5規(guī)定了一種通過audio元素、video元素來包含音頻和視頻的標(biāo)準(zhǔn)方法。1.5.1audio元素1.5音視頻元素<audio>元素支持mp3、wav和ogg三種音頻格式文件。<audio>元素的基本格式如下:1.5.1audio元素1.5音視頻元素<audio>元素的屬性如表1-5-1所示。表1-5-1audio元素的屬性1.5.1audio元素1.5音視頻元素【例1-5-1】音頻播放功能設(shè)計(jì)。效果如圖1-5-1所示。主要代碼如下:圖1-5-1音頻實(shí)例1.5.2video元素1.5音視頻元素<video>元素支持mp4、WebM、ogg三種視頻格式。1.5.2video元素1.5音視頻元素1.基本格式<video>元素的基本格式如下:1.5.2video元素1.5音視頻元素2.<video>元素的屬性<video>元素的屬性如表1-5-2所示。表1-5-2video元素的屬性1.5.2video元素1.5音視頻元素【例1-5-2】視頻播放功能設(shè)計(jì),效果如圖1-5-2所示。圖1-5-2視頻實(shí)例1.5.2video元素1.5音視頻元素主要代碼如下:1.6語義元素

語義元素是指能夠清楚地描述其意義給瀏覽器和開發(fā)者的元素,如語義元素實(shí)例<form>、<table>、<img>等。無語義元素是指不能清楚描述其內(nèi)容的元素,如<div>和<span>。HTML5提供了一些頁面布局的語義元素,如圖1-6-1和表1-6-1所示。表1-6-1常用語義元素圖1-6-1布局元素所對(duì)應(yīng)的頁面內(nèi)容1.6語義元素

<header>元素定義了文檔或文檔一部分區(qū)域的頁眉。<header>元素通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題,也可以包含網(wǎng)站logo圖片、搜索表單或其他相關(guān)內(nèi)容。一個(gè)頁面可以使用多個(gè)header元素,也可以為每一個(gè)內(nèi)容塊添加header元素。例如:1.6.1<header>元素1.6語義元素

<section>元素定義文檔中的節(jié)(section、區(qū)段)。section包含了一組內(nèi)容及其標(biāo)題。例如:1.6.2<section>元素1.6語義元素

<article>元素定義獨(dú)立的內(nèi)容。<article>元素一般有內(nèi)容、標(biāo)題及腳注部分。例如:1.6.3<article>元素1.6語義元素

【例1-6-1】博客文章評(píng)論內(nèi)容瀏覽設(shè)計(jì),效果如圖1-6-2所示。1.6.3<article>元素圖1-6-2<article>元素實(shí)例效果1.6語義元素

<nav>元素定義導(dǎo)航鏈接的部分。例如:1.6.4<nav>元素<nav>元素實(shí)例效果如圖1-6-3所示。圖1-6-3<nav>元素實(shí)例效果1.6語義元素

<aside>元素定義頁面主區(qū)域內(nèi)容之外的內(nèi)容(如側(cè)邊欄)。<aside>元素的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān)。例如:<aside>元素實(shí)例效果如圖1-6-4所示。1.6.5<aside>元素圖1-6-4<aside>元素實(shí)例效果1.6語義元素

<footer>元素描述文檔的底部區(qū)域。<footer>元素應(yīng)該包含它自己的元素。一個(gè)頁腳通常包含文檔的作者、著作權(quán)信息、鏈接的使用條款和聯(lián)系信息等。文檔中可以使用多個(gè)<footer>元素。例如:1.6.6<footer>元素1.6語義元素

【例1-6-2】校園風(fēng)光瀏覽設(shè)計(jì),效果如圖1-6-5所示。1.6.7<figure>元素和<figcaption>元素圖1-6-5<figure>元素實(shí)例1.6語義元素

【例1-6-2】代碼如下:1.6.7<figure>元素和<figcaption>元素1.6語義元素

【例1-6-3】應(yīng)用語義元素實(shí)現(xiàn)頁面布局功能,最終效果如圖1-6-6所示。1.6.8布局項(xiàng)目圖1-6-6布局項(xiàng)目實(shí)例1.6語義元素

1.設(shè)計(jì)思路1.6.8布局項(xiàng)目應(yīng)用語義元素進(jìn)行頁面布局,將整個(gè)頁面分為頁眉、頁面內(nèi)容、頁腳三個(gè)部分。頁面內(nèi)容左邊20%為側(cè)邊欄,右邊為商品圖片顯示部分。頁眉應(yīng)用<header>元素定義,頁腳應(yīng)用<footer>元素定義,中間部分左邊應(yīng)用<aside>元素定義,右邊應(yīng)用<section>元素定義。1.6語義元素

2.代碼布局項(xiàng)目實(shí)例代碼如下:1.6.8布局項(xiàng)目具體的代碼見P42-45.1.7練習(xí)與實(shí)訓(xùn)1.簡述HTML文檔的基本結(jié)構(gòu)及語法規(guī)范。2.制作圖1-7-1所示的表格。3.制作圖1-7-2所示的表單。圖1-7-1表格習(xí)題圖1-7-2表單習(xí)題1.7練習(xí)與實(shí)訓(xùn)4.制作圖1-7-3所示的音頻和視頻。5.應(yīng)用語義布局元素設(shè)計(jì)圖1-7-4所示的頁面。圖1-7-3音頻和視頻習(xí)題圖1-7-4布局元素習(xí)題模塊二

CSS基礎(chǔ)通過HTML基礎(chǔ)知識(shí)的學(xué)習(xí),我們掌握了如何運(yùn)用各種標(biāo)簽和屬性創(chuàng)建網(wǎng)頁并設(shè)置顯示樣式。但是我們可以發(fā)現(xiàn)這樣開發(fā)出來的頁面有很多不足,內(nèi)容和樣式混合在一起,顯得混亂,不利于修改和后期維護(hù)。而層疊樣式表可以解決這些問題。同時(shí)在本模塊中,還將學(xué)習(xí)如何使用CSS來實(shí)現(xiàn)元素的定位和頁面布局。2.1CSS概述2.1.1CSS簡介CSS是一種用于控制網(wǎng)頁樣式的標(biāo)記性語言。所謂層疊是指對(duì)同一對(duì)象引入多個(gè)樣式時(shí),依據(jù)層次順序疊加處理。CSS是用來控制網(wǎng)頁外觀的一門技術(shù),解決了網(wǎng)頁界面排版的問題,對(duì)網(wǎng)頁的頁面布局、背景、顏色等效果實(shí)現(xiàn)更加精確的控制,實(shí)現(xiàn)內(nèi)容和樣式的分離,有利于團(tuán)隊(duì)開發(fā)。萬維網(wǎng)聯(lián)盟(W3C)負(fù)責(zé)CSS標(biāo)準(zhǔn)的制定和推動(dòng)。CSS經(jīng)歷了CSS1、CSS2、CSS2.1和CSS3等多個(gè)版本,目前使用的版本是CSS3,已經(jīng)得到大多數(shù)瀏覽器的支持。2.1CSS概述2.1.2CSS的基本使用內(nèi)部樣式表是將所有的樣式代碼放置于頁面頭部,在<head>元素內(nèi)部的<style>標(biāo)簽中存放樣式表?！纠?-1-1】將頁面中一級(jí)標(biāo)題文字的顏色修改為綠色,字體為黑體。示例代碼如下:1.使用內(nèi)部CSS樣式表2.1CSS概述2.1.2CSS的基本使用內(nèi)聯(lián)樣式表在HTML標(biāo)簽style屬性中書寫,所有HTML標(biāo)簽都支持,并且優(yōu)先級(jí)最高。修改【例2-1-1】的代碼,如下所示:2.使用內(nèi)聯(lián)樣式表2.1CSS概述2.1.2CSS的基本使用如果將CSS樣式表聲明的代碼單獨(dú)放在一個(gè)擴(kuò)展名為“.css”的文本文件中,可通過在<head>標(biāo)簽中添加link標(biāo)簽來引入該樣式表文件。在網(wǎng)站根目錄下的css文件夾中新建一個(gè)名為index.css的文件,將HTML頁面中對(duì)應(yīng)的代碼復(fù)制過來,如圖所示:3.引入外部樣式表

2.1CSS概述2.1.2CSS的基本使用然后使用link元素將上述文件引入HTML頁面中,href屬性的值對(duì)應(yīng)外部樣式表的路徑即可,代碼如圖:3.引入外部樣式表

2.1CSS概述2.1.2CSS的基本使用4.CSS三種引入方式選擇

(1)內(nèi)聯(lián)樣式:特殊情況下使用,盡量不要使用。（2)內(nèi)部樣式:代碼較少時(shí)使用。(3)外部樣式:代碼較多時(shí)使用。2.1CSS概述2.1.2CSS的基本使用5.基本語法

CSS的基本語法格式如下:CSS的基本語法格式示例如圖2-1-1所示。圖2-1-1CSS的基本語法格式示例2.1CSS概述2.1.2CSS的基本使用5.基本語法

CSS代碼規(guī)范如下:(1)代碼不區(qū)分大小寫,不要使用大寫字母。(2){}表示范圍。(4)代碼可以寫在一行,也可以換行表示。(3)“;”表示一句結(jié)束。2.1CSS概述2.1.2CSS的基本使用6.CSS注釋

在編寫代碼時(shí)添加必要的注釋,可以使代碼更清晰,更容易理解,方便團(tuán)隊(duì)的分工協(xié)作。和其他語言一樣,CSS允許用戶在代碼中嵌入注釋,注釋的內(nèi)會(huì)被瀏覽器忽略,不會(huì)影響頁面的運(yùn)行效果。CSS注釋以“/*”開始,以“*/”結(jié)束。示例如下:2.1CSS概述2.1.2CSS的基本使用7.CSS命名規(guī)范

(1)命名不區(qū)分大小寫,一律小寫。(2)使用有意義的命名,盡量用英文。(3)使用多個(gè)單詞命名時(shí),使用“-”連接,如p-peom。2.1CSS概述2.1.3CSS選擇器1.標(biāo)簽選擇器

HTML頁面中有不同的標(biāo)簽,標(biāo)簽選擇器用來聲明哪些標(biāo)簽采用何種CSS樣式。標(biāo)簽選擇器是最常見也是最基本的CSS選擇器。基本語法如下:

在該語法中,所有的HTML標(biāo)記名都可以作為標(biāo)簽選擇器,如body、h1、p、div等。

前面提到的h1選擇器就是用來聲明頁面中所有的<h1>標(biāo)記的樣式風(fēng)格的。例如:2.1CSS概述2.1.3CSS選擇器2.ID選擇器

ID選擇器使用“#”作為標(biāo)識(shí),后面緊跟id名,基本語法如下:

在HTML代碼中,盡量一個(gè)id只賦予一個(gè)HTML標(biāo)簽,防止同一個(gè)頁面中有多個(gè)相同id的標(biāo)簽元素。ID選擇器與元素是一對(duì)一的關(guān)系。

2.1CSS概述2.1.3CSS選擇器2.ID選擇器

【例2-1-2】在網(wǎng)頁中,為id屬性為p2的HTML標(biāo)簽設(shè)定CSS樣式規(guī)則(文字顏色為紅色,字體大小為18px),示例代碼碼如下:頁面效果如圖2-1-2所示。圖2-1-2ID選擇器示例2.1CSS概述2.1.3CSS選擇器3.類選擇器

類選擇器使用英文點(diǎn)號(hào)“.”進(jìn)行標(biāo)識(shí),后面緊跟類名,基本語法如下:

類選擇器與ID選擇器的最大區(qū)別:在同一個(gè)頁面中,可以針對(duì)多個(gè)元素設(shè)置相同的類(class)屬性。如果說id屬性好比每個(gè)人特有的身份證號(hào)碼,class屬性就如同不同的職業(yè)類別,如教師、學(xué)生、醫(yī)生等,很多人可以擁有同一類別。因此,class選擇器與元素之間是一對(duì)多的關(guān)系。2.1CSS概述2.1.3CSS選擇器【例2-1-3】在網(wǎng)頁中,對(duì)所有的段落標(biāo)記<p>設(shè)置了樣式:字體顏色紅色,文字大小18px。對(duì)第1個(gè)和第3個(gè)段落標(biāo)記<p>應(yīng)用class="blue",并通過類選擇器設(shè)置它們的文本顏色為藍(lán)色,文字大小為24px,字體為黑體。示例代碼如下:3.類選擇器2.1CSS概述2.1.3CSS選擇器

頁面效果如圖2-1-3所示。圖2-1-3類選擇器示例3.類選擇器2.1CSS概述2.1.3CSS選擇器偽類選擇器是指通過元素的基本特征對(duì)元素進(jìn)行分類,而不是通過元素的名字、屬性進(jìn)行分類。偽類選擇器通過冒號(hào)“:”來定義,定義了元素的狀態(tài),如單擊按下、單擊完成等。常用的偽類選擇器如表2-1-1所示。

表2-1-1常用的偽類選擇器4.偽類選擇器2.1CSS概述2.1.3CSS選擇器【例2-1-4】偽類選擇器演示。使用元素的first-child、last-child屬性,設(shè)置列表第一行和最后一行的背景。對(duì)于表單,當(dāng)光標(biāo)移動(dòng)到某個(gè)文本框內(nèi)時(shí),這個(gè)input標(biāo)記就獲得了焦點(diǎn)。因此,使用input:focus偽類選擇器選中它,改變它的背景色,使它突出顯示。

4.偽類選擇器2.1CSS概述2.1.3CSS選擇器

示例代碼如下:4.偽類選擇器頁面效果如圖2-1-4所示。圖2-1-4偽類選擇器示例2.1CSS概述2.1.3CSS選擇器在CSS中,我們還可以根據(jù)元素的屬性和屬性值來選擇元素,這種選擇器稱為屬性選擇器。屬性選擇器可以將樣式與具有某種屬性的元素綁定,實(shí)現(xiàn)各種復(fù)雜的選擇,減少樣式代碼書寫的工作量,從而使樣式表簡潔清晰。屬性選擇器可以使用^、$和*三個(gè)通配符,使用通配符的屬性選擇器如表2-1-2所示。

5.屬性選擇器表2-1-2使用通配符的屬性選擇器2.1CSS概述2.1.3CSS選擇器【例2-1-5】屬性選擇器演示。把包含title屬性的所有元素字體顏色變?yōu)榧t色,匹配id屬性值以a開頭的所有p元素,將其顏色設(shè)為紫色,文字大小為20px。示例代碼如下:

5.屬性選擇器2.1CSS概述2.1.3CSS選擇器

頁面效果如圖2-1-5所示。圖2-1-5屬性選擇器示例5.屬性選擇器2.1CSS概述2.1.3CSS選擇器

每個(gè)選擇器都有它的作用范圍。復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器通過不同方式組合而成的選擇器,可以實(shí)現(xiàn)更方便的選擇功能。下面列舉幾個(gè)常用的復(fù)合選擇器,如表2-1-3所示。

6.復(fù)合選擇器表2-1-3復(fù)合選擇器2.1CSS概述2.1.3CSS選擇器【例2-1-6】復(fù)合選擇器演示。h1,div選擇所有的h1標(biāo)記和div標(biāo)記,將其背景色改為粉色。divpspan選擇了div的后代元素p的所有后代元素span,將其文字顏色改為藍(lán)色。h2>span選擇了h2元素的所有子元素span,第一個(gè)h2元素中的兩個(gè)span為h2的子元素,而第二個(gè)h2中的兩個(gè)span是h2元素的子元素em的子元素,所以未被選中,因而CSS樣式只對(duì)第一個(gè)h2元素的兩個(gè)span元素生效。

6.復(fù)合選擇器2.1CSS概述2.1.3CSS選擇器

示例代碼如下:6.復(fù)合選擇器2.1CSS概述2.1.3CSS選擇器

6.復(fù)合選擇器頁面效果如圖2-1-6所示。圖2-1-6復(fù)合選擇器示例2.1CSS概述2.1.3CSS選擇器

7.選擇器的選擇(3)ID選擇器:克制使用,局限于一個(gè)對(duì)象。(1)類選擇器:盡可能使用,比較通用。(2)標(biāo)簽選擇器:盡量不使用,太廣泛。2.1CSS概述2.1.4案例:東坡居【例2-1-7】利用CSS樣式修飾介紹蘇東坡的網(wǎng)頁。首先頁面結(jié)構(gòu)采用<h1>標(biāo)簽設(shè)置一級(jí)標(biāo)題“東坡居”,采用<h3>標(biāo)簽設(shè)置三級(jí)標(biāo)題“蘇軾簡介”,用兩個(gè)段落進(jìn)行作者介紹。下面兩篇作品均采用<h3>標(biāo)簽設(shè)置三級(jí)標(biāo)題和采用若干<p>標(biāo)簽設(shè)置段落包含作品內(nèi)容展示。再用<h2>標(biāo)簽設(shè)置二級(jí)標(biāo)題“蘇軾詩目錄”,用一個(gè)無序列表顯示作品目錄信息。

2.1CSS概述2.1.4案例:東坡居

頁面效果如圖2-1-7所示。圖2-1-7東坡居效果具體的代碼見P58-59.2.1CSS概述2.1.4案例:東坡居

下面添加CSS樣式。設(shè)置頁面整體的文字大小為16px,分別設(shè)置<h1>、<h2>、<h3>、<a>標(biāo)簽的樣式,代碼如下:2.1CSS概述2.1.4案例:東坡居

頁面效果見圖2-1-7,可以看到所有相應(yīng)標(biāo)簽效果都修改成功。?為id屬性值為titleBig的<h1>標(biāo)簽設(shè)置樣式規(guī)則的文字大小為36px;?定義“春景”文字使用的“.title-addon”樣式規(guī)則的文字顏色;?定義第二篇作品所在的段落<p>使用的“.p-peom”樣式規(guī)則的文字顏色和背景顏色;?定義詩句段落<p>中的文字“多情卻被無情惱”;?定義使用“.peom-strong”樣式規(guī)則的文字顏色。2.1CSS概述2.1.4案例:東坡居

代碼如下:頁面效果如圖2-1-8所示。圖2-1-8

頁面效果2.1CSS概述2.1.4案例:東坡居

下面修改詩目錄列表里的文字鏈接顏色,采用后代選擇器,這樣限定了選擇器后面定義的樣式只對(duì)對(duì)應(yīng)范圍內(nèi)的元素生效,代碼如下:最終頁面效果如圖2-1-9所示。圖2-1-9頁面效果2.2CSS常用屬性2.2.1文本屬性

CSS文本屬性可定義文本的外觀。通過文本屬性,可以實(shí)現(xiàn)修改文本的顏色、行高、對(duì)齊方式、字符間距、首行縮進(jìn)等功能。常用文本屬性如表2-2-1所示。

表2-2-1常用文本屬性2.2CSS常用屬性2.2.1文本屬性【例2-2-1】設(shè)置第一段首行縮進(jìn)和刪除線效果,設(shè)置表格中文字的大小、居中對(duì)齊、行高、字符間距和陰影效果,示例代碼如下:頁面效果如圖2-2-1所示。

圖2-2-1文本屬性具體的代碼見P62-63.2.2CSS常用屬性2.2.2字體屬性CSS字體屬性主要用于設(shè)置字體、大小、粗細(xì)、風(fēng)格等樣式。常用字體屬性如表2-2-2所示。

表2-2-2常用字體屬性2.2CSS常用屬性2.2.2字體屬性【例2-2-2】設(shè)置第一段文字特粗、大小16px、行高24px、字體黑體,設(shè)置第二段文字大小200%、斜體、加粗,設(shè)置第三段文字大小20px、常規(guī)格式顯示。示例代碼如下:

2.2CSS常用屬性2.2.2字體屬性

頁面效果如圖2-2-2所示。圖2-2-2復(fù)合字體屬性2.2CSS常用屬性2.2.3顏色和背景屬性CSS的顏色和背景屬性主要用于設(shè)置對(duì)象的前景顏色和背景顏色,或者背景圖片及背景圖片的拉伸方向、位置等。常用顏色和背景屬性如表2-2-3所示。

表2-2-3常用顏色和背景屬性2.2CSS常用屬性2.2.3顏色和背景屬性【例2-2-3】設(shè)置標(biāo)題文字顏色為藍(lán)色,背景色為深灰色,設(shè)置div文字大小24px、背景色為粉色,設(shè)置背景圖片橫向重復(fù),居中顯示。示例代碼如下:

具體的代碼見P66-67.2.2CSS常用屬性2.2.3顏色和背景屬性

頁面效果如圖2-2-3所示。圖2-2-3顏色和背景屬性2.2CSS常用屬性2.2.4超鏈接屬性超鏈接默認(rèn)情況下會(huì)有下劃線且顏色不可更改。如果需要將超鏈接設(shè)置為不同的效果,可使用以下4個(gè)偽類,分別對(duì)應(yīng)超鏈接的4種情況:

(1)a:link:打開頁面時(shí)超鏈接默認(rèn)的樣式。(2)a:hover:當(dāng)鼠標(biāo)指針懸停到超鏈接上時(shí)設(shè)置的樣式。(3)a:visited:當(dāng)超鏈接被單擊后設(shè)置的樣式。(4)a:active:當(dāng)鼠標(biāo)單擊超鏈接不釋放時(shí)設(shè)置的樣式。2.2CSS常用屬性2.2.4超鏈接屬性【例2-2-4】添加CSS樣式前的頁面效果如圖2-2-4所示。

添加CSS樣式后的頁面效果如圖2-2-5所示。示例代碼如下:圖2-2-4添加CSS樣式前的頁面效果圖2-2-5添加CSS樣式后的頁面效果具體的代碼見P68-69.2.2CSS常用屬性2.2.5列表屬性CSS列表屬性主要用于設(shè)置列表項(xiàng)目類型以及列表項(xiàng)的放置位置,常用列表屬性如表2-2-4所示。

表2-2-4常用列表屬性2.2CSS常用屬性2.2.5列表屬性【例2-2-5】設(shè)置第一個(gè)列表的項(xiàng)目前導(dǎo)符為空心圓點(diǎn),并將項(xiàng)目前導(dǎo)符放到列表項(xiàng)中。設(shè)置第二個(gè)列表前面無標(biāo)記,作為導(dǎo)航條,需要將縱向排列的各個(gè)列表項(xiàng)變成橫向排列,因此加了float:left屬性。示例代碼如下:頁面效果如圖2-2-6所示。

圖2-2-6列表屬性具體的代碼見P70-71.2.2CSS常用屬性2.2.6表格屬性CSS表格屬性主要用于設(shè)置表格邊框是否會(huì)顯示單一邊框、單元格之間的間距以及表格標(biāo)題位置等樣式,常用表格屬性如表2-2-5所示。

表2-2-5常用表格屬性2.2CSS常用屬性2.2.6表格屬性【例2-2-6】設(shè)置頁面中所有表格的td、tr元素均為黑色、實(shí)線、1px的邊框。設(shè)置第一個(gè)表格的border-collapse屬性值為collapse,可見邊框合并為一個(gè)單一的邊框。設(shè)置第二個(gè)表格的寬度和高度,設(shè)置單元格中文本水平對(duì)齊方式為居中對(duì)齊,垂直對(duì)齊方式為底部對(duì)齊。示例代碼如下:具體的代碼見P72-74.2.2CSS常用屬性2.2.6表格屬性

頁面效果如圖2-2-7所示。圖2-2-7

表格屬性2.2CSS常用屬性2.2.6表格屬性【例2-2-7】美化表格布局的計(jì)算器頁面。首先定義HTML結(jié)構(gòu),設(shè)置一個(gè)表格,整體是7行4列的結(jié)構(gòu)。第1行的4個(gè)單元格合并,插入<span>標(biāo)簽包裹的3個(gè)●符號(hào),分別定義使用組合類,將第2行4個(gè)單元格合并,不放入任何內(nèi)容。第3行至第7行使用相同的類tr-number,每個(gè)單元格分別輸入計(jì)算器對(duì)應(yīng)的按鍵數(shù)字和符號(hào)。代碼如下:

具體的代碼見P74-75.2.2CSS常用屬性2.2.6表格屬性

頁面效果如圖2-2-8所示。圖2-2-8

表格內(nèi)容2.2CSS常用屬性2.2.6表格屬性下面設(shè)置CSS樣式,先定義<table>的寬高、文字大小和字體,設(shè)置文字顏色和背景顏色,設(shè)置表格外邊框和單元格均為2px的灰色實(shí)線邊框,代碼如下:

頁面效果如圖2-2-9所示。圖2-2-9計(jì)算器表格2.2CSS常用屬性2.2.6表格屬性下面利用偽類選擇器first-child設(shè)置第一行的高度,分別定義3個(gè)圓點(diǎn)的文字樣式為不同顏色,共有的樣式.span-circle設(shè)置文字大小。代碼如下:

2.2CSS常用屬性2.2.6表格屬性

頁面效果如圖2-2-10所示。圖2-2-10計(jì)算器表格2.2CSS常用屬性2.2.6表格屬性利用偽類選擇器nth-child(n)設(shè)置第2行的背景顏色和高度,利用后代元素選擇器設(shè)置第3行至第7行的單元格寬度均為25%,實(shí)現(xiàn)平均分布效果,設(shè)置文字水平居中。代碼如下:頁面最終效果如圖2-2-11所示。

圖2-2-11計(jì)算器表格2.2CSS常用屬性2.2.7案例:圖文文檔樣式【例2-2-8】實(shí)現(xiàn)如圖2-2-12所示的圖文文檔編輯。

圖2-2-12圖文文檔HTML代碼如下:CSS代碼如下:具體的代碼見P79-80.具體的代碼見P78-79.2.3盒子模型2.3.1盒子模型簡介盒子模型是CSS控制頁面元素的一個(gè)重要概念。理解了盒子模型,才能更好地進(jìn)行排版。在盒子模型中,所有頁面中的元素都被看作一個(gè)個(gè)盒子,它們占據(jù)一定的頁面空間,里面放著特定的內(nèi)容。每個(gè)頁面是由不同大小的盒子通過不同的排列方式(上下排列、并列排列、嵌套排列)堆積而成的,盒子之間互相影響。

2.3盒子模型2.3.1盒子模型簡介圖2-3-1描繪了盒子模型的結(jié)構(gòu)?？梢钥吹揭粋€(gè)HTML元素對(duì)應(yīng)的盒子包括元素的內(nèi)容(content);內(nèi)容和盒子之間的空隙,可以理解為盒子模型的內(nèi)邊距;盒子本身的厚度,即盒子模型的邊框;盒子和其他盒子之間的間隔,即盒子的外邊距。因而一個(gè)盒子實(shí)際在頁面上占據(jù)的空間是由內(nèi)容+內(nèi)邊距+邊框+外邊距組成的。

圖2-3-1盒子模型2.3盒子模型2.3.2盒子模型屬性為了分隔頁面中不同的盒子,經(jīng)常需要給元素設(shè)置邊框效果。在CSS中border屬性包括邊框樣式屬性(border-style)、邊框?qū)挾葘傩?border-width)、邊框顏色屬性(border-color)、單側(cè)邊框的屬性、邊框的綜合屬性,如表2-3-1所示。

1.border屬性2.3盒子模型2.3.2盒子模型屬性表2-3-1CSS邊框?qū)傩?/p>

1.border屬性2.3盒子模型2.3.2盒子模型屬性給不同的邊框設(shè)定不同的屬性值,有以下幾種寫法:如果給出一個(gè)屬性值,那么表示設(shè)置上、右、下、左邊框的屬性值相同;如果給出兩個(gè)屬性值,那么前者表示上、下邊框的屬性,后者表示左、右邊框的屬性;如果給出三個(gè)屬性值,那么前者表示上邊框的屬性,中間數(shù)值表示左、右邊框的屬性,后者表示下邊框的屬性;如果給出四個(gè)屬性值,那么依次表示上、右、下、左邊框的屬性,按順時(shí)針方向排序。例如:

1.border屬性2.3盒子模型2.3.2盒子模型屬性第一行代碼將上、下邊框設(shè)置為紅色,將左、右邊框設(shè)置為藍(lán)色;第二行代碼將四條邊框?qū)挾榷荚O(shè)置為5px;第三行代碼將上邊框設(shè)置為虛線,將右邊框設(shè)置為單實(shí)線,將下邊框設(shè)置為雙實(shí)線,將左邊框設(shè)置為單實(shí)線。

1.border屬性2.3盒子模型2.3.2盒子模型屬性在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式。例如,以下代碼將四條邊框都設(shè)置為2px寬度的紅色單實(shí)線:對(duì)一條邊框設(shè)置與其他邊框不同的屬性。例如:

1.border屬性第一行代碼先將四條邊框都設(shè)置為4px寬度的紅色單實(shí)線,然后第二行代碼將上邊框改為2px寬度的黃色雙線,以覆蓋第一行代碼對(duì)上邊框的設(shè)置。2.3盒子模型2.3.2盒子模型屬性為了調(diào)整內(nèi)容在盒子中的顯示位置,常常需要給元素設(shè)置內(nèi)邊距。內(nèi)邊距指的是元素內(nèi)容與邊框之間的距離,也稱為填充。

2.padding屬性2.3盒子模型2.3.2盒子模型屬性和邊框(border)屬性類似,padding也可以設(shè)置1、2、3、4個(gè)屬性值,效果如下:

2.padding屬性(1)設(shè)置1個(gè)屬性值:表示上、下、左、右四個(gè)內(nèi)邊距的值。(4)設(shè)置4個(gè)屬性值:依次表示上、右、下、左內(nèi)邊距的值,按順時(shí)針方向排序。(2)設(shè)置2個(gè)屬性值:前者表示上、下內(nèi)邊距的值,后者表示左、右內(nèi)邊距的值。(3)設(shè)置3個(gè)屬性值:前者表示上內(nèi)邊距的值,中間數(shù)值表示左、右內(nèi)邊距的值,后者表示下內(nèi)邊距的值。2.3盒子模型2.3.2盒子模型屬性margin也可以設(shè)置1、2、3、4個(gè)屬性值,效果如下:

3.margin屬性(2)設(shè)置2個(gè)屬性值:前者表示上、下外邊距的值,后者表示左、右外邊距的值。(1)設(shè)置1個(gè)屬性值:表示上、下、左、右四個(gè)外邊距的值。(4)設(shè)置4個(gè)屬性值:依次表示上、右、下、左外邊距的值,按順時(shí)針方向排序。(3)設(shè)置3個(gè)屬性值:前者表示上外邊距的值,中間數(shù)值表示左、右外邊距的值,后者表示下外邊距的值。2.3盒子模型2.3.2盒子模型屬性如果需要單獨(dú)設(shè)置某一方向的外邊距,可以使用margin-top、margin-right、margin-bottom、margin-left來設(shè)置,如圖2-3-2所示。

3.margin屬性圖2-3-2盒子模型元素2.3盒子模型2.3.2盒子模型屬性盒子內(nèi)容的大小分別使用width(寬度)和height(高度)兩個(gè)屬性來設(shè)置。盒子的占位大小等于內(nèi)容+內(nèi)邊距+邊框+外邊距,所以盒子的大小會(huì)隨著內(nèi)容大小的增大而增大。

4.4.盒子內(nèi)容大小設(shè)置2.3盒子模型2.3.2盒子模型屬性【例2-3-1】通過CSS屬性操作盒子模型實(shí)現(xiàn)基礎(chǔ)布局?？梢钥吹?div在頁面中水平居中,與瀏覽器的邊距上、下均為20px,邊框?yàn)?0px。因?yàn)槭褂昧藀adding屬性設(shè)置內(nèi)邊距,所以整個(gè)div會(huì)被撐大。示例代碼如下:

4.4.盒子內(nèi)容大小設(shè)置具體的代碼見P84.2.3盒子模型2.3.2盒子模型屬性頁面效果如圖2-3-3所示。

4.4.盒子內(nèi)容大小設(shè)置圖2-3-3盒子模型示例12.3盒子模型2.3.2盒子模型屬性【例2-3-2】邊距示例。通過本例,理解border、margin、padding的意義。設(shè)置如下CSS代碼,可以得到圖2-3-4所示的效果。CSS代碼如下:

4.4.盒子內(nèi)容大小設(shè)置2.3盒子模型2.3.2盒子模型屬性

4.4.盒子內(nèi)容大小設(shè)置圖2-3-4盒子模型示例22.3盒子模型2.3.3案例:用戶注冊(cè)頁面【例2-3-3】美化用戶注冊(cè)頁面。首先利用無序列表和表單元素制作HTML結(jié)構(gòu),代碼如下:

具體的代碼見P85-87.2.3盒子模型2.3.3案例:用戶注冊(cè)頁面頁面效果如圖2-3-5所示。可以看到?jīng)]有使用CSS樣式的頁面雜亂無章,不美觀。

圖2-3-5窗體元素2.3盒子模型2.3.3案例:用戶注冊(cè)頁面下面設(shè)置CSS樣式,定義ul的寬度,設(shè)置無項(xiàng)目符號(hào),先設(shè)置所有列表項(xiàng)li的內(nèi)邊距和下邊框效果,再單獨(dú)設(shè)置第一個(gè)和最后一個(gè)li的下邊框效果。加大第一個(gè)li的下外邊距,設(shè)置標(biāo)題字號(hào)和加粗效果。代碼如下:

2.3盒子模型2.3.3案例:用戶注冊(cè)頁面效果如圖2-3-6所示。

圖2-3-6窗體樣式12.3盒子模型2.3.3案例:用戶注冊(cè)頁面下面想統(tǒng)一設(shè)置span元素的寬度,該如何操作呢?HTML元素有以下三種類型:

HTML元素(1)塊級(jí)元素:特點(diǎn)是獨(dú)占一行,寬高可以設(shè)置。(3)行內(nèi)塊級(jí)元素：特點(diǎn)是可以和其他行內(nèi)元素位于同一行,又保持獨(dú)立,元素的寬高及與邊的間距都可以設(shè)置。(2)行內(nèi)元素(inline):特點(diǎn)是可以和其他行內(nèi)元素位于同一行,寬度由內(nèi)容決定,高度由內(nèi)容字體大小決定,不可以設(shè)置寬高。2.3盒子模型2.3.3案例:用戶注冊(cè)頁面span元素是行內(nèi)元素,本身無法設(shè)置寬高,但可以使用display:inline-block屬性將其轉(zhuǎn)換成行內(nèi)塊級(jí)元素,然后進(jìn)行寬高的設(shè)置。代碼如下：

效果如圖2-3-7所示。圖2-3-7窗體樣式22.3盒子模型2.3.3案例:用戶注冊(cè)頁面下面繼續(xù)設(shè)置所有input標(biāo)簽的寬高、內(nèi)邊距、邊框、陰影效果和圓角邊框、垂直居中,獲得焦點(diǎn)的input單獨(dú)設(shè)置背景顏色和邊框效果。設(shè)置輸入驗(yàn)證碼的文本框?qū)挾?設(shè)置驗(yàn)證碼圖片左外邊距5px,垂直居中等效果。設(shè)置按鈕的高度、內(nèi)邊距、左外邊距,設(shè)置文字顏色、背景顏色和邊框、圓角邊框效果等,設(shè)置鼠標(biāo)指針懸停在按鈕上時(shí)改變背景色。

具體的代碼見P88-89.2.3盒子模型2.3.3案例:用戶注冊(cè)頁面最終頁面效果如圖2-3-8所示,頁面中各個(gè)盒子排版整齊、美觀。

圖2-3-8用戶注冊(cè)頁面最終效果

2.4定位與布局2.4.1定位CSS規(guī)范首先確定了一種標(biāo)準(zhǔn)的排版方式,即標(biāo)準(zhǔn)文檔流,是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí),各種元素默認(rèn)的排列規(guī)則為:從上到下,從左到右,遇塊(塊級(jí)元素)換行,即塊元素占滿指定的寬度,不指定寬度則占滿整行(如p、div元素),內(nèi)聯(lián)元素則是在行內(nèi)一個(gè)接一個(gè)地從左到右排列(如span、a元素)。

2.4定位與布局2.4.1定位這種默認(rèn)的布局方式有局限性:只能從上到下顯示內(nèi)容,無法實(shí)現(xiàn)圖文環(huán)繞混排效果,不能很好地利用頁面空間。使用定位屬性(position)可以改變網(wǎng)頁元素的默認(rèn)排版,精確控制盒子的位置。其語法格式如下:各屬性含義如表2-4-1所示。表2-4-1position屬性說明

2.4定位與布局2.4.1定位01<div>元素<div>是一種容器,定義文檔中的分區(qū)(division),其內(nèi)部放置內(nèi)容。<div>把文檔分隔為獨(dú)立的、不同的部分,常用作組織工具。<div>是塊級(jí)元素,可以嵌套,也可以命名。<div>必須有width、height并配合border、background-color才能顯示。格式如下:2.4定位與布局2.4.1定位02靜態(tài)定位設(shè)置position屬性的值為static,或不做設(shè)置即默認(rèn)為static,元素所在的位置也就是文檔流中的位置。在靜態(tài)定位狀態(tài)下,top、bottom、left、right屬性不適用。

2.4定位與布局2.4.1定位03固定定位當(dāng)用于定位的元素的position屬性取值為fixed時(shí),稱為固定定位,是以當(dāng)前瀏覽器窗為基準(zhǔn)進(jìn)行定位,也就是當(dāng)拖動(dòng)瀏覽器窗口滾動(dòng)條時(shí),依然保持對(duì)象位置不變。圖2-4-2固定定位2.4定位與布局2.4.1定位【例2-4-1】固定定位。頁面中布局三個(gè)div,如圖2-4-1所示。圖2-4-1固定定位將第一個(gè)div單獨(dú)設(shè)置為固定定位,以瀏覽器為基準(zhǔn)向右、向下偏移,此時(shí)可以看到,第一個(gè)div從文檔流中脫離出來,而盒子2、盒子3均向上移動(dòng)了一個(gè)div的位置,如圖2-4-2所示。2.4定位與布局2.4.1定位示例代碼如下:

2.4定位與布局2.4.1定位04相對(duì)定位當(dāng)用于定位的元素的position屬性取值為relative時(shí),稱為相對(duì)定位。相對(duì)定位的元素沒有脫離文檔流,只是按照left、right、top、bottom值進(jìn)行了位置的偏移。相對(duì)定位的盒子占用原頁面空間。2.4定位與布局2.4.1定位【例2-4-2】相對(duì)定位。將第二個(gè)div設(shè)為相對(duì)定位,并設(shè)置left屬性值為40px、top屬性值為50px,示例代碼如下:具體的代碼見P92-93.2.4定位與布局2.4.1定位可以看到整個(gè)文檔流并沒有改變,只是第二個(gè)div相對(duì)于原本的位置進(jìn)行了偏移,如圖2-4-3所示。圖2-4-3相對(duì)定位2.4定位與布局2.4.1定位05絕對(duì)定位當(dāng)用于定位的元素的position屬性取值為absolute時(shí),稱為絕對(duì)定位,絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位(position屬性被設(shè)置成非static)的父元素進(jìn)行定位,若所有父元素都沒有定位,則根據(jù)body根元素(瀏覽器窗口)進(jìn)行定位。2.4定位與布局2.4.1定位【例2-4-3】使用DIV+CSS制作二級(jí)導(dǎo)航菜單。首先建立一級(jí)菜單,在一個(gè)盒子(div)中定義學(xué)院導(dǎo)航,代碼如下:效果如圖2-4-4所示。圖2-4-4ul結(jié)構(gòu)2.4定位與布局2.4.1定位定義CSS樣式,創(chuàng)建樣式#menu,設(shè)置菜單整體大小、邊框等屬性,為div標(biāo)記添加該樣式;創(chuàng)建樣式#menuul,設(shè)置清除邊距、無項(xiàng)目符號(hào)等屬性,代碼如下:效果如圖2-4-5所示。圖2-4-5菜單雛形2.4定位與布局2.4.1定位創(chuàng)建樣式#menuulli,設(shè)置菜單項(xiàng)的高度、行距、文字居中、下邊框、背景色等屬性。創(chuàng)建樣式a,設(shè)置鏈接顏色、無文字下劃線等屬性,設(shè)置display:block屬性為塊元素,鼠標(biāo)指針在鏈接所在塊范圍內(nèi)即被激活。創(chuàng)建樣式a:hover,設(shè)置鼠標(biāo)指針懸停在鏈接上的文字顏色。代碼如下:2.4定位與布局2.4.1定位以上設(shè)計(jì)的一級(jí)導(dǎo)航菜單效果如圖2-4-6所示。圖2-4-6一級(jí)導(dǎo)航菜單效果2.4定位與布局2.4.1定位二級(jí)導(dǎo)航菜單是指當(dāng)鼠標(biāo)指針經(jīng)過一級(jí)導(dǎo)航菜單項(xiàng)時(shí),會(huì)彈出對(duì)應(yīng)的二級(jí)導(dǎo)航菜單,鼠標(biāo)指針離開導(dǎo)航菜單項(xiàng)后二級(jí)導(dǎo)航菜單隱藏。接下來以一級(jí)導(dǎo)航菜單項(xiàng)“招生就業(yè)”為例,為其添加二級(jí)導(dǎo)航菜單。在“招生就業(yè)”列表下嵌套<ul>,代碼如下:2.4定位與布局2.4.1定位創(chuàng)建樣式#menuulliul,設(shè)置二級(jí)導(dǎo)航菜單默認(rèn)隱藏屬性為display:none,定位方式為絕對(duì)定位,并向其父元素的樣式#menuulli中添加position:relative屬性,二級(jí)導(dǎo)航菜單即可以其父元素(一級(jí)導(dǎo)航菜單項(xiàng))為基準(zhǔn)進(jìn)行偏移。創(chuàng)建樣式#menuulli:hoverul和#menuulli:hoverullia,均添加屬性display:block,設(shè)置為塊元素。完整代碼如下:具體的代碼見P95-97.2.4定位與布局2.4.1定位頁面效果如圖2-4-7所示。圖2-4-7二級(jí)導(dǎo)航菜單效果

2.4定位與布局2.4.1定位06定位演示【例2-4-4】理解三種定位,如圖2-4-8所示。圖2-4-8定位示例

2.4定位與布局2.4.1定位HTML代碼如下:

2.4定位與布局2.4.1定位CSS代碼如下:

2.4定位與布局2.4.1定位07z-index層疊定位屬性從前面定位的例子可見,定位后的元素會(huì)擋住一部分其他元素?？梢酝ㄟ^層疊定位屬性(z-index)定義頁面元素的層疊次序。z-index沒有單位,值可為正整數(shù)、負(fù)整數(shù)和0,z-index表示各元素間的層次關(guān)系,值大者在上。當(dāng)為負(fù)數(shù)時(shí),表示該元素在頁面之下。對(duì)之前相對(duì)定位的【例2-4-2】進(jìn)行修改,可以發(fā)現(xiàn)原來盒子2在盒子3之上,設(shè)置z-index屬性后,盒子3的z-index值大于盒子2的z-index值,改變了層疊順序。

2.4定位與布局2.4.1定位示例代碼如下:

2.4定位與布局2.4.1定位頁面效果如圖2-4-9所示。圖2-4-9z-index演示效果2.4定位與布局2.4.2浮動(dòng)塊級(jí)元素都是獨(dú)占一行的,如果想讓兩個(gè)塊級(jí)元素在一行內(nèi)顯示,可以設(shè)置元素浮動(dòng)。浮動(dòng)屬性可以控制盒子脫離常規(guī)文檔流,向左或向右浮動(dòng),直到邊界碰到父對(duì)象或另一個(gè)浮動(dòng)對(duì)象。float屬性語法格式如下:

1.浮動(dòng)(float)屬性2.4定位與布局2.4.2浮動(dòng)各屬性含義如表2-4-2所示。

1.浮動(dòng)(float)屬性表2-4-2float屬性含義2.4定位與布局2.4.2浮動(dòng)【例2-4-5】對(duì)頁面中兩個(gè)div設(shè)置了左浮動(dòng),可見兩個(gè)div由原來的上下排列變成了并排到同一行內(nèi)。如果瀏覽器寬度足夠容納兩個(gè)div,則會(huì)并排排列,但是如果將瀏覽器的寬度調(diào)窄到小于兩個(gè)div的總寬度,div還會(huì)變成在兩行上顯示,這就是浮動(dòng)的效果。示例代碼如下:1.浮動(dòng)(float)屬性具體的代碼見P100-101.2.4定位與布局2.4.2浮動(dòng)頁面效果如圖2-4-10所示。

1.浮動(dòng)(float)屬性圖2-4-10浮動(dòng)效果12.4定位與布局2.4.2浮動(dòng)各屬性含義如表2-4-3所示。

2.清除浮動(dòng)(clear)屬性表2-4-3clear屬性含義浮動(dòng)屬性可以靈活地布局頁面,但有時(shí)某些盒子可能需要清除浮動(dòng)的設(shè)置,可以使用清除浮動(dòng)(clear)屬性,其語法格式如下:2.4定位與布局2.4.2浮動(dòng)【例2-4-6】在頁面中布局三個(gè)div,在前兩個(gè)div設(shè)置左浮動(dòng)后,可以發(fā)現(xiàn)第三個(gè)div未設(shè)置浮動(dòng),也浮動(dòng)到了同一行,頁面效果如圖2-4-11所示。

2.清除浮動(dòng)(clear)屬性圖2-4-11浮動(dòng)2.4定位與布局2.4.2浮動(dòng)設(shè)置第三個(gè)div使用clear屬性,其屬性值設(shè)置為left,即清除div左側(cè)的浮動(dòng),所以該div換行顯示,頁面效果如圖2-4-12所示?？梢钥吹降谌齻€(gè)div與前面元素之間增加了距離,這是因?yàn)閏lear屬性在設(shè)置元素之上增加了清除空間。

2.清除浮動(dòng)(clear)屬性圖2-4-12浮動(dòng)效果22.4定位與布局2.4.2浮動(dòng)示例代碼如下:

2.清除浮動(dòng)(clear)屬性具體的代碼見P102-103.2.4定位與布局2.4.3頁面布局【例2-4-7】頁面布局1。通過本例掌握頁面布局方法,實(shí)現(xiàn)圖2-4-13所示的效果。內(nèi)部div設(shè)置左右浮動(dòng)時(shí),外部div高度會(huì)塌縮成線,將不能包裹內(nèi)部div。解決方法有如下兩種:(1)為外部div設(shè)置樣式overflow:auto;(2)在外部div最后加入輔助div并設(shè)置樣式,如下所示:

本例題將使用第一種方法。2.4定位與布局2.4.3頁面布局

圖2-4-13div布局效果12.4定位與布局2.4.3頁面布局

HTML代碼如下:CSS代碼如下:2.4定位與布局2.4.3頁面布局

【例2-4-8】頁面布局2。通過本例掌握頁面布局方法,實(shí)現(xiàn)圖2-4-14所示的效果。本例題使用第二種方法解決浮動(dòng)的問題。圖2-4-14div布局效果22.4定位與布局2.4.3頁面布局

HTML代碼如下:CSS代碼如下:2.5綜合項(xiàng)目2.5.1項(xiàng)目介紹

本節(jié)主要基于前面所學(xué)知識(shí),完成一個(gè)小型項(xiàng)目,幫助讀者靈活運(yùn)用所學(xué)知識(shí),同時(shí)更深入地理解CSS樣式表、盒子模型及頁面布局,解決和處理實(shí)際遇到的問題。下面分析揚(yáng)州景點(diǎn)網(wǎng)站的首頁頁面,HTML5和CSS3相配合,頁面最終效果如圖2-5-1所示。具體見P106圖2-5-1項(xiàng)目效果2.5綜合項(xiàng)目2.5.1項(xiàng)目介紹

在開發(fā)環(huán)境中新建Web項(xiàng)目,新建css文件夾,在文件夾中新建style.css文件,作為CSS樣式文件,新建images文件夾作為圖片素材文件夾。在根目錄下新建index.html作為首頁,項(xiàng)目結(jié)構(gòu)如圖2-5-2所示。圖2-5-2項(xiàng)目結(jié)構(gòu)2.5綜合項(xiàng)目2.5.2網(wǎng)頁結(jié)構(gòu)描述

該頁面主體布局用HTML5的結(jié)構(gòu)元素來組織,該頁面結(jié)構(gòu)元素的含義描述如下:(1)header元素:用來展示網(wǎng)站的標(biāo)題、企業(yè)的logo圖片、網(wǎng)站導(dǎo)航等。(2)nav元素:用于頁面導(dǎo)航。(3)aside元素:放置非正文的內(nèi)容,如廣告、側(cè)邊欄等。(6)footer元素:放置網(wǎng)站的版權(quán)聲明、備案信息等。(4)section元素:將頁面內(nèi)容分塊,放置網(wǎng)頁中展示的主體內(nèi)容。(5)article元素:文檔、頁面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。2.5綜合項(xiàng)目2.5.2網(wǎng)頁結(jié)構(gòu)描述

頁面的主體結(jié)構(gòu)如圖2-5-3所示。圖2-5-3頁面布局頁面結(jié)構(gòu)的代碼描述如下所示,