Web前端設計基礎教程高職PPT完整全套教學課件_第1頁
Web前端設計基礎教程高職PPT完整全套教學課件_第2頁
Web前端設計基礎教程高職PPT完整全套教學課件_第3頁
Web前端設計基礎教程高職PPT完整全套教學課件_第4頁
Web前端設計基礎教程高職PPT完整全套教學課件_第5頁
已閱讀5頁,還剩468頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

Web前端設計基礎教程

01HTML基礎CSS基礎JavaScript基礎目錄頁

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

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

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

HTML各版本4.HTML版本1.2

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

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

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

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

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

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

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

<section>元素定義文檔中的節(section、區段)。section包含了一組內容及其標題。例如:1.6.2<section>元素1.6語義元素

<article>元素定義獨立的內容。<article>元素一般有內容、標題及腳注部分。例如:1.6.3<article>元素1.6語義元素

【例1-6-1】博客文章評論內容瀏覽設計,效果如圖1-6-2所示。1.6.3<article>元素圖1-6-2<article>元素實例效果1.6語義元素

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

<aside>元素定義頁面主區域內容之外的內容(如側邊欄)。<aside>元素的內容應與主區域的內容相關。例如:<aside>元素實例效果如圖1-6-4所示。1.6.5<aside>元素圖1-6-4<aside>元素實例效果1.6語義元素

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

【例1-6-2】校園風光瀏覽設計,效果如圖1-6-5所示。1.6.7<figure>元素和<figcaption>元素圖1-6-5<figure>元素實例1.6語義元素

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

【例1-6-3】應用語義元素實現頁面布局功能,最終效果如圖1-6-6所示。1.6.8布局項目圖1-6-6布局項目實例1.6語義元素

1.設計思路1.6.8布局項目應用語義元素進行頁面布局,將整個頁面分為頁眉、頁面內容、頁腳三個部分。頁面內容左邊20%為側邊欄,右邊為商品圖片顯示部分。頁眉應用<header>元素定義,頁腳應用<footer>元素定義,中間部分左邊應用<aside>元素定義,右邊應用<section>元素定義。1.6語義元素

2.代碼布局項目實例代碼如下:1.6.8布局項目具體的代碼見P42-45.1.7練習與實訓1.簡述HTML文檔的基本結構及語法規范。2.制作圖1-7-1所示的表格。3.制作圖1-7-2所示的表單。圖1-7-1表格習題圖1-7-2表單習題1.7練習與實訓4.制作圖1-7-3所示的音頻和視頻。5.應用語義布局元素設計圖1-7-4所示的頁面。圖1-7-3音頻和視頻習題圖1-7-4布局元素習題模塊二

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

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

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

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

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

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

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

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

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

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

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

ID選擇器使用“#”作為標識,后面緊跟id名,基本語法如下:

在HTML代碼中,盡量一個id只賦予一個HTML標簽,防止同一個頁面中有多個相同id的標簽元素。ID選擇器與元素是一對一的關系。

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

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

類選擇器使用英文點號“.”進行標識,后面緊跟類名,基本語法如下:

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

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

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

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

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

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

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

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

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

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

6.復合選擇器2.1CSS概述2.1.3CSS選擇器

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

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

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

2.1CSS概述2.1.4案例:東坡居

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

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

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

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

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

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

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

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

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

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

2.2CSS常用屬性2.2.2字體屬性

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

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

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

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

(1)a:link:打開頁面時超鏈接默認的樣式。(2)a:hover:當鼠標指針懸停到超鏈接上時設置的樣式。(3)a:visited:當超鏈接被單擊后設置的樣式。(4)a:active:當鼠標單擊超鏈接不釋放時設置的樣式。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列表屬性主要用于設置列表項目類型以及列表項的放置位置,常用列表屬性如表2-2-4所示。

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

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

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

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

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

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

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

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

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

2.2CSS常用屬性2.2.6表格屬性

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

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

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

2.3盒子模型2.3.1盒子模型簡介圖2-3-1描繪了盒子模型的結構。可以看到一個HTML元素對應的盒子包括元素的內容(content);內容和盒子之間的空隙,可以理解為盒子模型的內邊距;盒子本身的厚度,即盒子模型的邊框;盒子和其他盒子之間的間隔,即盒子的外邊距。因而一個盒子實際在頁面上占據的空間是由內容+內邊距+邊框+外邊距組成的。

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

1.border屬性2.3盒子模型2.3.2盒子模型屬性表2-3-1CSS邊框屬性

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

1.border屬性2.3盒子模型2.3.2盒子模型屬性第一行代碼將上、下邊框設置為紅色,將左、右邊框設置為藍色;第二行代碼將四條邊框寬度都設置為5px;第三行代碼將上邊框設置為虛線,將右邊框設置為單實線,將下邊框設置為雙實線,將左邊框設置為單實線。

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

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

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

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

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

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

4.4.盒子內容大小設置2.3盒子模型2.3.2盒子模型屬性【例2-3-1】通過CSS屬性操作盒子模型實現基礎布局。可以看到,div在頁面中水平居中,與瀏覽器的邊距上、下均為20px,邊框為10px。因為使用了padding屬性設置內邊距,所以整個div會被撐大。示例代碼如下:

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

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

4.4.盒子內容大小設置2.3盒子模型2.3.2盒子模型屬性

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

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

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

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

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

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

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

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

圖2-3-8用戶注冊頁面最終效果

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

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

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

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

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

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層疊定位屬性從前面定位的例子可見,定位后的元素會擋住一部分其他元素。可以通過層疊定位屬性(z-index)定義頁面元素的層疊次序。z-index沒有單位,值可為正整數、負整數和0,z-index表示各元素間的層次關系,值大者在上。當為負數時,表示該元素在頁面之下。對之前相對定位的【例2-4-2】進行修改,可以發現原來盒子2在盒子3之上,設置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浮動塊級元素都是獨占一行的,如果想讓兩個塊級元素在一行內顯示,可以設置元素浮動。浮動屬性可以控制盒子脫離常規文檔流,向左或向右浮動,直到邊界碰到父對象或另一個浮動對象。float屬性語法格式如下:

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

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

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

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

2.清除浮動(clear)屬性圖2-4-11浮動2.4定位與布局2.4.2浮動設置第三個div使用clear屬性,其屬性值設置為left,即清除div左側的浮動,所以該div換行顯示,頁面效果如圖2-4-12所示。可以看到第三個div與前面元素之間增加了距離,這是因為clear屬性在設置元素之上增加了清除空間。

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

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

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

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

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

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

HTML代碼如下:CSS代碼如下:2.5綜合項目2.5.1項目介紹

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

在開發環境中新建Web項目,新建css文件夾,在文件夾中新建style.css文件,作為CSS樣式文件,新建images文件夾作為圖片素材文件夾。在根目錄下新建index.html作為首頁,項目結構如圖2-5-2所示。圖2-5-2項目結構2.5綜合項目2.5.2網頁結構描述

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

頁面的主體結構如圖2-5-3所示。圖2-5-3頁面布局頁面結構的代碼描述如下所示,

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論