《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 項(xiàng)目三 CSS3 頁面美化_第1頁
《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 項(xiàng)目三 CSS3 頁面美化_第2頁
《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 項(xiàng)目三 CSS3 頁面美化_第3頁
《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 項(xiàng)目三 CSS3 頁面美化_第4頁
《網(wǎng)站設(shè)計(jì)與開發(fā)》 課件 項(xiàng)目三 CSS3 頁面美化_第5頁
已閱讀5頁，還剩71頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

項(xiàng)目三CSS3頁面美化任務(wù)一CSS3基礎(chǔ)知識(shí)任務(wù)二使用CSS3進(jìn)行網(wǎng)頁布局任務(wù)三使用CSS3制作文本樣式任務(wù)四使用CSS3制作動(dòng)畫效果108項(xiàng)目引入網(wǎng)頁設(shè)計(jì)不僅僅是簡單的各種元素的堆砌，還要追求美觀，達(dá)到營銷效果。如何通過外觀、樣式設(shè)計(jì)美化頁面，把商品圖片、文案、促銷信息、活動(dòng)方式等內(nèi)容更加清晰地展示出來，有效地傳遞給消費(fèi)者，是網(wǎng)站設(shè)計(jì)開發(fā)人員需要解決的一個(gè)難題。自從HTML被開發(fā)以來，頁面圖文樣式就以各種形式存在，以實(shí)現(xiàn)頁面美化的效果。但隨著HTML的更新迭代，為了滿足頁面設(shè)計(jì)者的要求，HTML添加了很多顯示功能，使得HTML變得越來越雜亂，HTML頁面也越來越臃腫，于是層疊樣式表（CascadingStyleSheets，CSS）便應(yīng)運(yùn)而生了。109CSS是網(wǎng)頁設(shè)計(jì)領(lǐng)域的一個(gè)突破，它為HTML標(biāo)記語言提供了一種樣式描述，定義了網(wǎng)頁元素的顯示方式，能夠讓網(wǎng)頁元素實(shí)現(xiàn)精準(zhǔn)定位，并且能夠方便地調(diào)整文字、圖片等元素。利用CSS可以實(shí)現(xiàn)修改一個(gè)小的樣式隨之更新與之相關(guān)的所有頁面元素，具有豐富的樣式定義、易于使用和修改、多頁面應(yīng)用、頁面壓縮等特性，一經(jīng)推出就得到了非常廣泛的應(yīng)用。CSS3是CSS的升級版本。110學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉CSS3語法規(guī)則。2.掌握常見CSS3選擇器的類型及其使用方法。3.掌握樣式表鏈接方法。

技能目標(biāo)1.能夠按照CSS3語法規(guī)則對頁面元素屬性進(jìn)行設(shè)置。2.能夠根據(jù)需要選擇合適的CSS3選擇器并應(yīng)用。111任務(wù)分析CSS是層疊樣式表，可以使網(wǎng)頁表現(xiàn)形式和內(nèi)容分離。當(dāng)需要修改網(wǎng)頁的表現(xiàn)形式時(shí)，只需要修改樣式表即可，不需要改變HTML頁面的內(nèi)容結(jié)構(gòu)，就可以改變整個(gè)網(wǎng)站的表現(xiàn)形式和風(fēng)格，不必逐一修改，極大地減少了重復(fù)性勞動(dòng)。而且，如果采用了外鏈?zhǔn)綐邮奖響?yīng)用方式，樣式表會(huì)保存在瀏覽器緩存中，加快了整個(gè)站點(diǎn)的下載顯示速度，提升了系統(tǒng)響應(yīng)速度。112CSS3作為CSS的成熟標(biāo)準(zhǔn)版本，將原CSS規(guī)范精簡延伸至多個(gè)模塊，如選擇器、盒模型、背景和邊框、文字特效等，各模塊也得到了瀏覽器廠商的廣泛支持。本任務(wù)重點(diǎn)學(xué)習(xí)CSS3語法規(guī)則、常見CSS3選擇器的類型及其使用方法等，通過學(xué)習(xí)能夠根據(jù)需要選用合適的CSS3選擇器，按照CSS3語法規(guī)則對頁面元素屬性進(jìn)行設(shè)置，實(shí)現(xiàn)頁面美化效果。113相關(guān)知識(shí)一、CSS3語法規(guī)則CSS用于控制網(wǎng)頁內(nèi)容的樣式和布局格式，其代碼保存在.css類型的文本文件中，或者放在網(wǎng)頁內(nèi)<style>標(biāo)簽里，或者插在網(wǎng)頁標(biāo)簽的style屬性值中。CSS的基本語法格式由選擇器和聲明塊兩部分組成，如圖所示。114CSS基本語法格式選擇器決定為哪些元素應(yīng)用樣式，聲明塊定義相應(yīng)的樣式。聲明塊是由一對大括號(hào)括起來的代碼區(qū)域，包括一條或多條聲明，每條聲明由一個(gè)屬性和一個(gè)值組成，屬性和值之間用冒號(hào)隔開。屬性是希望設(shè)置的樣式屬性，每個(gè)屬性有一個(gè)值。因此，也可以說，一個(gè)樣式規(guī)則由選擇器、屬性和值這3個(gè)要素構(gòu)成。樣式設(shè)置過程中應(yīng)當(dāng)注意，每條聲明中的屬性值一般不加引號(hào)；每一條語句都要使用英文輸入狀態(tài)下的分號(hào)來結(jié)束；如果屬性值為數(shù)值型數(shù)據(jù)，一般情況下需要加單位，如px（像素）。115二、CSS3選擇器要使用CSS對網(wǎng)頁元素實(shí)現(xiàn)控制，就需要用到CSS選擇器。下面分別介紹三大基礎(chǔ)選擇器、集體選擇器、屬性選擇器及CSS3偽類選擇器。1.三大基礎(chǔ)選擇器選擇器是一個(gè)選擇標(biāo)簽的過程。三大基礎(chǔ)選擇器分別為元素選擇器、類選擇器和ID選擇器。116（1）元素選擇器元素選擇器實(shí)質(zhì)就是選擇HTML代碼中的標(biāo)簽，如HTML標(biāo)簽中的<html>、<body>、<h1>、<p>、<img>、<div>等，一旦定義之后，頁面中所有該標(biāo)簽內(nèi)容都將執(zhí)行所定義的樣式，其基本語法格式如圖所示。117元素選擇器基本語法格式（2）類選擇器類選擇器在CSS中是最常用到的，主要是對一類或者是一群元素進(jìn)行操作，它是對HTML標(biāo)簽中class屬性進(jìn)行選擇。class的值就是為元素定義的“類名”。類選擇器的選擇符是“.”，其基本語法格式如圖所示。118類選擇器基本語法格式類選擇器遵循“誰調(diào)用、誰生效”的原則，一個(gè)標(biāo)簽可以調(diào)用多個(gè)類選擇器，或者多個(gè)標(biāo)簽可以調(diào)用同一個(gè)類選擇器。類選擇器命名應(yīng)該做到見名知意，需要注意以下問題。第一，不允許以數(shù)字開頭或者用純數(shù)字定義類名。第二，不允許以特殊符號(hào)開頭或者用純特殊符號(hào)定義類名。第三，不建議使用漢字定義類名。第四，不推薦使用屬性或者屬性的值定義類名。119常見類名命名見表。120常見類名命名（3）ID選擇器ID選擇器和類選擇器用法和命名要求都一樣，區(qū)別在于在同一個(gè)HTML頁面中ID選擇器命名具有唯一性，ID選擇器的選擇符是“#”。使用多個(gè)相同的ID選擇器，瀏覽器不會(huì)報(bào)錯(cuò)，但是不符合W3C（萬維網(wǎng)聯(lián)盟）標(biāo)準(zhǔn)且Javascript語言調(diào)用會(huì)出錯(cuò)。ID選擇器基本語法格式如圖所示。一個(gè)標(biāo)簽只能調(diào)用一個(gè)ID選擇器，一個(gè)標(biāo)簽可以同時(shí)調(diào)用類選擇器和ID選擇器。121ID選擇器基本語法格式CSS選擇器就是用于指定CSS作用的標(biāo)簽，無論采用哪種選擇器，最終目的都是為了找到對應(yīng)的元素，并用相應(yīng)規(guī)則修飾，完成美化頁面的效果。元素選擇器、類選擇器、ID選擇器對比見表。122三大基礎(chǔ)選擇器對比2.集體選擇器集體選擇器是由兩個(gè)或者兩個(gè)以上的基礎(chǔ)選擇器通過不同的方式組合而成的。它應(yīng)用于多個(gè)不同頁面元素需要同一種樣式屬性的情景，能夠極大簡化操作。123集體選擇器語法格式及含義124集體選擇器語法格式及含義3.屬性選擇器屬性選擇器就是根據(jù)元素的屬性及屬性值來選擇元素，其主要作用就是對帶有指定屬性的HTML元素設(shè)置樣式。使用CSS3屬性選擇器，可以只指定元素的某個(gè)屬性，或者可以同時(shí)指定元素的某個(gè)屬性和其對應(yīng)的屬性值。常見屬性選擇器見表3-4。125常見屬性選擇器4.CSS3偽類選擇器類選擇器和偽類選擇器的區(qū)別在于，類選擇器可以隨意起名，而偽類選擇器是CSS中已經(jīng)定義好的選擇器，不可以隨意起名。常用的偽類選擇器是使用在a元素上的幾種，如a:link、a:visited、a:hover、a:active。（1）結(jié)構(gòu)性偽類選擇器CSS3新增了一些偽類，其特點(diǎn)是允許開發(fā)者根據(jù)文件結(jié)構(gòu)來指定元素樣式。常見結(jié)構(gòu)性偽類選擇器見表。126127常見結(jié)構(gòu)性偽類選擇器（2）偽元素選擇器CSS3提出偽元素的概念。E:after和E:before在舊版本中屬于偽類，在CSS3中屬于偽元素。因此，在CSS3中E:after、E:before會(huì)作為偽元素并被自動(dòng)識(shí)別為E::after、E::before。偽類選擇器的標(biāo)志是“:”，偽元素選擇器的標(biāo)志為“::”。常見偽元素選擇器見表。128常見偽元素選擇器三、樣式表鏈接方法CSS樣式應(yīng)用的方法主要有內(nèi)嵌式、外鏈?zhǔn)胶托袃?nèi)樣式三種。1.內(nèi)嵌式內(nèi)嵌式通過將CSS寫在網(wǎng)頁源文件的頭部，即在<head>和<head>之間，通過使用HTML標(biāo)簽中的<style>標(biāo)簽將其包圍，其特點(diǎn)是該樣式只能在此頁使用，解決行內(nèi)樣式多次書寫的弊端。內(nèi)嵌式語法格式如下。1292.外鏈?zhǔn)酵怄準(zhǔn)酵ㄟ^HTML的<link>標(biāo)簽，將外部樣式表文件鏈接到HTML文件中，這也是應(yīng)用最多的方式，同時(shí)也是最實(shí)用的方式。這種方法將HTML文件和CSS文件完全分離，實(shí)現(xiàn)結(jié)構(gòu)層和表示層的徹底分離，增強(qiáng)網(wǎng)頁結(jié)構(gòu)的擴(kuò)展性和CSS樣式的可維護(hù)性。外鏈?zhǔn)秸Z法格式如下。1303.行內(nèi)樣式行內(nèi)樣式就是把CSS樣式直接放在代碼行內(nèi)的標(biāo)簽中，一般都是放入標(biāo)簽的style屬性中。行內(nèi)樣式直接插入標(biāo)簽中，因而是最直接的一種方式，同時(shí)也是修改最不方便的樣式。行內(nèi)樣式語法格式如下。內(nèi)嵌式只作用于當(dāng)前文件，沒有真正實(shí)現(xiàn)頁面結(jié)構(gòu)和頁面表現(xiàn)分離。外鏈?zhǔn)阶裱罢l調(diào)用、誰生效”原則，作用范圍是當(dāng)前站點(diǎn)，真正實(shí)現(xiàn)頁面結(jié)構(gòu)和頁面表現(xiàn)分離。行內(nèi)樣式作用范圍僅限于當(dāng)前標(biāo)簽，作用范圍較窄，頁面結(jié)構(gòu)和頁面表現(xiàn)混淆，不推薦使用。131學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.理解盒子模型、彈性盒子的含義和作用。2.掌握盒子模型的規(guī)律和特征。3.掌握元素浮動(dòng)樣式和定位模式的設(shè)置方法。技能目標(biāo)1.能夠使用盒子模型更好地控制網(wǎng)頁各元素。2.能夠使用彈性盒子使頁面布局合理、美觀。132任務(wù)分析網(wǎng)頁布局是網(wǎng)站開發(fā)的重要元素。網(wǎng)頁作為一種傳達(dá)信息的頁面，包括文字、圖片、各種圖標(biāo)以及動(dòng)態(tài)效果等，在設(shè)計(jì)中需要對網(wǎng)頁元素統(tǒng)一布局，使網(wǎng)頁整齊、美觀。使用CSS3進(jìn)行網(wǎng)頁布局可以節(jié)約更多的時(shí)間。本任務(wù)重點(diǎn)學(xué)習(xí)使用CSS3進(jìn)行網(wǎng)頁布局，通過學(xué)習(xí)，使學(xué)生在理解盒子模型知識(shí)的基礎(chǔ)上，掌握盒子模型的規(guī)律和特征，能熟練設(shè)置常見的浮動(dòng)樣式和定位模式，并將盒子模型方法論運(yùn)用到網(wǎng)頁布局設(shè)計(jì)的每一處，讓頁面布局更加合理、美觀。133相關(guān)知識(shí)一、盒子模型1.盒子模型簡介盒子模型是CSS所使用的一種思維模型。如果將網(wǎng)頁比作放置物品的桌面，盒子模型就如同桌子上擺放的多個(gè)盒子。盒子模型其實(shí)就是把HTML頁面中的元素看作矩形盒子，即盛裝內(nèi)容的容器。每個(gè)矩形盒子都由元素、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖所示。134135盒子模型2.盒子模型基本屬性設(shè)置盒子模型的邊框是指元素的外圍邊線，可以設(shè)置border、border-top（上邊框）、border-bottom（下邊框）、border-left（左邊框）、border-right（右邊框）等屬性，控制、顯示邊框不同的樣式，其語法格式如下。136盒子模型的內(nèi)邊距是指元素內(nèi)容和元素邊框的空白區(qū)域，可以是長度值或百分比，但不允許為負(fù)數(shù)。可以設(shè)置padding、padding-top（上內(nèi)邊距）、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距）等屬性控制網(wǎng)頁元素。需要注意的是，如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊距會(huì)撐大盒子。盒子模型的外邊距用于控制盒子和盒子之間的距離，可以是長度值或auto，允許為負(fù)數(shù)?？梢栽O(shè)置margin、margin-top（上外邊距）、margin-right（右外邊距）、margin-bottom（下外邊距）、margin-left（左外邊距）等屬性控制網(wǎng)頁元素。此外，外邊距可以讓塊級盒子水平居中，前提必須是盒子有寬度且盒子左右的外邊距都設(shè)置為auto。137二、彈性盒子CSS3彈性盒子是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)，確保元素?fù)碛星‘?dāng)行為的布局方式。引入彈性盒子布局的目的是提供一種更加有效的方式來對容器中的子元素進(jìn)行排列、對齊和分配空白空間。1.彈性盒子簡介彈性盒子由彈性容器和彈性子元素組成。彈性容器通過display:?ex/inline-?ex或display:-webkit-?ex（兼容性）定義，它可以包含一個(gè)或多個(gè)彈性子元素。彈性子元素通常在彈性盒子內(nèi)呈一行顯示。1382.彈性容器屬性設(shè)置設(shè)置彈性容器屬性可以起到約束子級元素排列布局的作用，以更好地布局網(wǎng)頁元素。彈性容器常見屬性見表。139彈性容器常見屬性（1）flex-direction屬性?ex-direction屬性具有多種屬性值，決定了彈性子元素的方向。140?ex-direction屬性值（2）flex-wrap屬性?ex-wrap屬性具有多種屬性值，決定了是否換行以及新行堆疊方向。141?ex-wrap屬性值（3）justify-content屬性justify-content具有多種屬性值，決定了項(xiàng)目在主軸（橫軸）方向上的對齊方式。142justify-content屬性值3.彈性盒子子元素屬性設(shè)置彈性盒子布局不僅是對彈性容器的設(shè)置，還可以對其子元素進(jìn)行設(shè)置，其主要有?ex和order兩個(gè)屬性。（1）flex屬性?ex屬性用于設(shè)置或檢索彈性盒子的子元素如何分配空間。?ex屬性是?ex-grow、?ex-shrink和?ex-basis的簡寫。143?ex-grow對彈性容器剩余空間進(jìn)行重要分配，當(dāng)父元素的寬度大于所有子元素的寬度和時(shí)，即父元素有剩余空間，它便定義子元素如何分配父元素的剩余空間。?ex-shrink是當(dāng)父元素的寬度小于所有子元素的寬度和時(shí)，即子元素超出父元素，它便定義子元素如何縮小自己的寬度。?ex-basis用于設(shè)置子元素的占用空間。此外，當(dāng)父盒子設(shè)置display:?ex，且側(cè)邊欄大小固定后，將內(nèi)容區(qū)設(shè)置為?ex:1，內(nèi)容區(qū)會(huì)自動(dòng)放大占滿剩余空間，實(shí)現(xiàn)自適應(yīng)布局。144（2）order屬性order屬性規(guī)定彈性子元素在同一彈性容器中的顯示和布局順序。元素按順序值的升序排列。具有相同順序值的元素按它們在源代碼中出現(xiàn)的順序進(jìn)行布局。彈性盒子經(jīng)常用于自適應(yīng)布局，即用戶改變?yōu)g覽器窗口大小，網(wǎng)頁元素排列布局會(huì)隨之改變。145三、浮動(dòng)與定位CSS有文檔流、浮動(dòng)、定位三種基本定位機(jī)制。文檔流是按照元素在文檔中的順序顯示；浮動(dòng)會(huì)導(dǎo)致元素脫離文檔流，把不用的空間讓出來；定位一直是Web標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，分為相對定位、絕對定位和固定定位。下面主要介紹浮動(dòng)、相對定位和絕對定位。1461.浮動(dòng)浮動(dòng)是浮動(dòng)元素的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。元素浮?dòng)之后不占據(jù)原來的位置（脫標(biāo)），只影響文檔后面的元素。通過浮動(dòng)，可以讓塊級元素顯示在一行，其基本語法格式如下。147浮動(dòng)經(jīng)常用于文本繞圖、制作導(dǎo)航、網(wǎng)頁布局等方面。浮動(dòng)屬性是布局中非常重要的屬性。需要特別注意的是，當(dāng)子元素設(shè)置了浮動(dòng)屬性之后，如果父元素沒有設(shè)置高度和寬度，而是由子元素支撐起來，則會(huì)導(dǎo)致父元素的高度塌陷（高度被重置為0），出現(xiàn)此問題，應(yīng)當(dāng)在父元素內(nèi)添加冗余元素clear:both。1482.相對定位相對定位是指相對于原來位置移動(dòng)，元素設(shè)置此屬性之后仍然處在文檔流中，不影響其他元素的布局，一般子元素設(shè)置相對定位，父元素設(shè)置絕對定位。相對定位基本語法格式如下。1493.絕對定位設(shè)置絕對定位，元素以瀏覽器左上角為基準(zhǔn)位置。如果父盒子沒有使用定位，子盒子使用絕對定位，子盒子位置是從瀏覽器出發(fā)。如果父盒子使用定位，子盒子使用絕對定位，子盒子位置是從父元素位置出發(fā)。絕對定位基本語法格式如下。150學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)1.熟悉CSS3的常用文本樣式及其設(shè)置方法。2.熟悉CSS3的邊框樣式及其設(shè)置方法。3.熟悉有序列表、無序列表和自定義列表的設(shè)置方法。

技能目標(biāo)1.能夠應(yīng)用文本陰影、文本溢出等樣式修飾文本效果。2.能夠應(yīng)用邊框樣式制作邊框效果。3.能夠應(yīng)用列表美化網(wǎng)頁元素。151任務(wù)分析網(wǎng)頁中的文本樣式直接影響網(wǎng)站的整體視覺效果，選擇合適的字體大小、字體樣式、字體顏色將會(huì)增加網(wǎng)頁的關(guān)注度和吸引度。在網(wǎng)頁設(shè)計(jì)時(shí)，可以通過設(shè)置文本樣式調(diào)整網(wǎng)頁文字的大小、顏色等，以美化網(wǎng)頁。本任務(wù)重點(diǎn)學(xué)習(xí)使用CSS3制作文本樣式，通過學(xué)習(xí)，使學(xué)生在理解文本陰影、文本溢出等修飾效果后，能夠熟練應(yīng)用于實(shí)踐，使文字更加生動(dòng)，并能熟練設(shè)置邊框弧度、邊框陰影等，以及應(yīng)用無序列表、有序列表和自定義列表提升網(wǎng)頁視覺效果，凸顯文字信息。152相關(guān)知識(shí)一、文本樣式網(wǎng)頁設(shè)計(jì)離不開文本樣式設(shè)計(jì)，文本樣式能夠突出網(wǎng)頁設(shè)計(jì)的風(fēng)格。CSS3新增了許多文本屬性，在這些屬性中比較重要的有為文字添加陰影的text-shadow，設(shè)置文本溢出樣式的text-over?ow，強(qiáng)制對單詞進(jìn)行換行處理的word-wrap等屬性。1531.文本陰影text-shadow屬性沒有出現(xiàn)時(shí)，一般都是用Photoshop做陰影效果，現(xiàn)在可以直接設(shè)置該屬性以達(dá)到想要的效果，為網(wǎng)頁文字增加質(zhì)感。text-shadow屬性有4個(gè)字段值，其語法格式如下。154text-shadow字段值含義見表。155text-shadow字段值含義2.文本溢出text-over?ow屬性避免了網(wǎng)頁中文字太多而超出容器的問題，規(guī)定當(dāng)文本溢出包含元素時(shí)的顯示情況，其語法格式如下。text-over?ow字段值含義見表。156text-over?ow字段值含義二、邊框樣式CSS3新增了三個(gè)邊框效果設(shè)置，分別是圓角邊框效果、添加陰影效果和圖片繪制邊框效果。其中邊框圓角（border-radius）、邊框陰影（box-shadow）屬性應(yīng)用十分廣泛，兼容性也相對較好，符合漸進(jìn)增強(qiáng)的原則。1.邊框圓角border-radius屬性很常用，通過設(shè)置元素的border-radius值，可以給元素設(shè)置圓角邊框，其語法格式如下。1572.邊框陰影box-shadow屬性的設(shè)置不會(huì)改變網(wǎng)頁盒子的大小，也不會(huì)影響其相關(guān)元素的布局?？梢酝ㄟ^設(shè)置多重邊框陰影增強(qiáng)立體效果，其語法格式如下。158box-shadow字段值含義見表。159box-shadow字段值含義三、列表類型在書寫HTML文件時(shí)，遇到相同類型的內(nèi)容，需要考慮用列表來實(shí)現(xiàn)（導(dǎo)航、排名、相關(guān)文章等）。通常使用的列表有無序列表、有序列表和自定義列表3種。1.無序列表無序列表的各個(gè)列表項(xiàng)之間沒有順序級別之分，是并列的，其基本語法格式如下。160格式說明：<ul></ul>標(biāo)簽用于定義無序列表，<li></li>標(biāo)簽嵌套在<ul></ul>標(biāo)簽中，用于描述具體的列表項(xiàng)，每對<ul></ul>中至少應(yīng)包含一對<li></li>。無序列表中type屬性的常用值有3個(gè)，它們呈現(xiàn)的效果不同，當(dāng)type="square"時(shí)，列表值前會(huì)顯示小方塊；當(dāng)type="disc"時(shí)，列表值前會(huì)顯示實(shí)心小圓圈；當(dāng)type="circle"時(shí)，列表值前會(huì)顯示空心小圓圈。1612.有序列表有序列表即有排列順序的列表，各個(gè)列表項(xiàng)按照一定的順序排列定義，其基本語法格式如下。162格式說明：<ol></ol>標(biāo)簽用于定義有序列表，<li></li>為具體的列表項(xiàng)。和無序列表類似，每對<ol></ol>中也至少應(yīng)包含一對<li></li>。value1表示有序列表項(xiàng)目符號(hào)的類型，value2表示項(xiàng)目開始的數(shù)值。start是編號(hào)開始的數(shù)字，如start=2，則編號(hào)從2開始，如果從1開始可以省略，或是在<li>標(biāo)簽中設(shè)定value="n"改變列表行項(xiàng)目的特定編號(hào)，如<livalue="7">。type=用于編號(hào)的數(shù)字、字母等的類型，如type=a，則編號(hào)用英文字母。type的屬性見表，可以把它們放在<ol>或<li>的初始標(biāo)簽中。163164type屬性3.自定義列表自定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)，其基本語法格式如下。165任務(wù)引入知識(shí)目標(biāo)1.掌握過渡效果及其基本屬性的設(shè)置。2.掌握圖形轉(zhuǎn)換效果及其基本屬性的設(shè)置。3.熟悉動(dòng)畫效果的實(shí)現(xiàn)方法及其基本屬性的設(shè)置。技能目標(biāo)1.能夠設(shè)置網(wǎng)頁過渡效果。2.能夠設(shè)置網(wǎng)頁動(dòng)畫效果。166任務(wù)分析在網(wǎng)頁設(shè)計(jì)中添加動(dòng)畫效果可以使網(wǎng)頁更加生動(dòng)，增加吸引力。使用CSS3制作動(dòng)畫效果，可以取代許多網(wǎng)頁中的動(dòng)態(tài)圖像、Flash動(dòng)畫和JavaScript實(shí)現(xiàn)的效果。本任務(wù)重點(diǎn)學(xué)習(xí)使用CSS3制作動(dòng)畫效果，通過學(xué)習(xí)，使學(xué)生掌握網(wǎng)頁過渡、圖形轉(zhuǎn)換、動(dòng)畫等效果的制作。167相關(guān)知識(shí)一、過渡效果過渡（transition）是指某個(gè)元素從一種狀態(tài)變換到另一種狀態(tài)的過程?？梢允褂肅SS3設(shè)置過渡屬性來實(shí)現(xiàn)元素不同狀態(tài)間的平滑過渡效果。1681.過渡屬性的設(shè)置transition是復(fù)合屬性，主要包含4個(gè)子屬性。169過渡屬性transition-timing-function屬性其實(shí)就是定義用戶想要的動(dòng)畫方式，其屬性值包括以相同速度開始至結(jié)束的過渡（linear），以慢速開始然后變快的過渡（ease），以慢速開始的過渡（ease-in），以慢速結(jié)束的過渡（ease-out）、以慢速開始和結(jié)束的過渡（ease-in-out），可以在cubic-bezier（n，n，n，n）函數(shù)中定義相應(yīng)的值以實(shí)現(xiàn)過渡。1702.過渡效果的實(shí)現(xiàn)要實(shí)現(xiàn)過渡效果，必須規(guī)定兩項(xiàng)內(nèi)容，一是定義要添加效果的CSS屬性，二是定義效果的持續(xù)時(shí)間。添加多個(gè)屬性應(yīng)用逗號(hào)隔開。171二、圖形轉(zhuǎn)換效果轉(zhuǎn)換（transform）是CSS3新增的屬性，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放等效果，配合過渡和動(dòng)畫使用，可以實(shí)現(xiàn)許多以前只能靠Flash才可以實(shí)現(xiàn)的效果。1.2D轉(zhuǎn)換使用CSS3的移動(dòng)（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）、矩陣（matrix）等功能可以實(shí)現(xiàn)2D轉(zhuǎn)換效果。移動(dòng)是指通過改變網(wǎng)頁元素x和y的值，實(shí)現(xiàn)該元素從當(dāng)前位置移動(dòng)到（x，y）的位置，其中，x和y可以為負(fù)值，單位可以是像素或百分比。需要注意的是，y軸朝下的是正方向。172旋轉(zhuǎn)是指讓網(wǎng)頁元素在二維平面內(nèi)，按給定角度進(jìn)行順時(shí)針或逆時(shí)針旋轉(zhuǎn)，當(dāng)deg為正值時(shí)網(wǎng)頁元素順時(shí)針旋轉(zhuǎn)，當(dāng)deg為負(fù)值時(shí)網(wǎng)頁元素逆時(shí)針旋轉(zhuǎn)。當(dāng)元素旋轉(zhuǎn)后，坐標(biāo)軸也會(huì)隨之發(fā)生轉(zhuǎn)變，可以通過調(diào)整順序，即把旋轉(zhuǎn)放到最后，解決這個(gè)問題。縮放是指對網(wǎng)頁元素進(jìn)行水平和垂直方向的縮放。x、y的取值可為小數(shù)，不可為負(fù)值。通過縮放可以對網(wǎng)頁元素進(jìn)行等比例放大和縮小，還可以指定物體縮放中心。1732.3D轉(zhuǎn)換使用CSS3的移動(dòng)（translateX、translateY、translateZ），旋轉(zhuǎn)（rotateX、rotateY、rotateZ），透視（perspective），3D呈現(xiàn)（transform-style）等功能可以實(shí)現(xiàn)3D轉(zhuǎn)換。3D轉(zhuǎn)換所使用的坐標(biāo)系和左手坐標(biāo)系有一些差異。（1）左手坐標(biāo)系伸出左手，讓拇指和食指呈“L”形，拇指向右，食指向上，中指指向前方，就建立了一個(gè)左手坐標(biāo)系。拇指、食指和中指分別代表X軸、Y軸、Z軸的正方向，如圖所示。174

溫馨提示

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

評論

0/150

提交評論