CSS動(dòng)態(tài)效果css動(dòng)態(tài)效果

第8章CSS動(dòng)態(tài)效果CSS3.0動(dòng)態(tài)效果由變形（Transform）、過渡（Transition）、動(dòng)畫（Animation）三種動(dòng)態(tài)效果屬性去實(shí)現(xiàn)。這三種動(dòng)態(tài)效果作用在元素上，與其它各種樣式屬性結(jié)合在一起，可以直接在Web層面進(jìn)行動(dòng)效設(shè)計(jì)與制作，無需借助第三方工具和腳本程序。了解CSS3.0網(wǎng)頁動(dòng)態(tài)效果的類型理解CSS3.0變形效果、過渡效果和動(dòng)畫效果的基本概念掌握變形、過渡、動(dòng)畫相關(guān)屬性的基本語法能運(yùn)用元素變形、過渡、動(dòng)畫相關(guān)技巧制作頁面內(nèi)容安排CSS3.0變形8.1CSS3.0過渡8.2CSS3.0動(dòng)畫8.3小試牛刀8.48.1CSS3.0變形CSS3.0變形通過transform屬性來實(shí)現(xiàn)。該屬性作用在塊狀元素上，可以使塊狀元素產(chǎn)生平移、旋轉(zhuǎn)、縮放和扭曲的效果。CSS3.0變形8.18.1.1CSS3.0變形屬性格式：transform:rotate(<angle>)|translate(x,y)|translateX(x)|translateY(y)|scale(x,y)|scaleX(x)|scaleY(y)|skew(x,y)| skewX(x)|skewY(y)取值：rotate（<angle>）:旋轉(zhuǎn)translate（x，y）:移動(dòng)translateX(x):水平移動(dòng)translateY(y):垂直移動(dòng)scale(x,y):縮放scaleX(x):水平縮放scaleY(y):垂直縮放skew(x,y):扭曲skewX(x):水平扭曲skewY(y):垂直扭曲CSS3.0變形8.11.旋轉(zhuǎn)rotate(<angle>)transform屬性的屬性值為rotate時(shí)表示對(duì)元素進(jìn)行旋轉(zhuǎn)。其中angle是指旋轉(zhuǎn)角度，正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)。例如，對(duì)div元素實(shí)施以下CSS樣式，該div將順時(shí)針旋轉(zhuǎn)30度，效果如圖8-1所示，樣式代碼如下：div{transform:rotate(30deg);}30°CSS3.0變形8.130°2.平移translatetransform屬性的屬性值為translate時(shí)表示對(duì)元素進(jìn)行平移。（1）translate(x,y)為水平方向和垂直方向同時(shí)移動(dòng)。x為水平方向偏移值，正數(shù)表示向右平移，負(fù)數(shù)表示向左平移；y為垂直方向偏移值，正數(shù)表示向下平移，負(fù)數(shù)表示向上平移。例如，對(duì)div元素實(shí)施以下CSS樣式，該div將向右移動(dòng)100px，向下移動(dòng)50px100px50pxCSS3.0變形8.1transform屬性的屬性值為translate時(shí)表示對(duì)元素進(jìn)行平移。（1）translate(x,y)為水平方向和垂直方向同時(shí)移動(dòng)。x為水平方向偏移值，正數(shù)表示向右平移，負(fù)數(shù)表示向左平移；y為垂直方向偏移值，正數(shù)表示向下平移，負(fù)數(shù)表示向上平移。例如，對(duì)div元素實(shí)施以下CSS樣式，該div將向右移動(dòng)100px，向下移動(dòng)50px，如圖8-2所示，樣式代碼如下：div{transform:translate(100px,50px);}100px50px（2）translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)），例如，對(duì)div元素實(shí)施以下CSS樣式，該div將向左移動(dòng)100px，效果如圖8-3所示，樣式代碼如下：div{transform:translateX(-100px);}（3）translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)），如對(duì)div元素實(shí)施以下CSS樣式，該div將向上移動(dòng)20px，效果如圖8-4所示，樣式代碼如下：div{transform:translateY(-20px);}100px20pxCSS3.0變形8.13.縮放scaletransform屬性的屬性值為scale時(shí)表示對(duì)元素進(jìn)行縮放。（1）scale(x,y)使元素水平方向和垂直方向同時(shí)縮放，基中x表示水平方向縮放的倍數(shù)；y表示垂直方向的縮放倍數(shù)。y是一個(gè)可選參數(shù)，如果沒有設(shè)置y值，則表示x，y兩個(gè)方向的縮放倍數(shù)是一樣的?？s放中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1，元素就放大，反之其值小于1，元素縮小。例如，對(duì)div元素實(shí)施以下CSS樣式，該div在水平方向放大3倍，垂直方向放大2倍，效果如圖8-5所示，樣式代碼如下：div{transform:scale(3,2);}div原大?。?）scaleX(x)使元素僅水平方向縮放。例如，對(duì)div元素實(shí)施以下CSS樣式，該div僅在水平方向放大2倍，效果如圖8-7所示，樣式代碼如下：div{transform:scaleX(2);}（3）scaleY(y)使元素僅垂直方向縮放。例如，對(duì)div元素實(shí)施以下CSS樣式，該div僅在水平方向放大3倍，效果如圖8-8所示，樣式代碼如下：div{transform:scaleY(3);}div原大小div原大小CSS3.0變形8.14.扭曲skewtransform屬性的屬性值為skew時(shí)表示對(duì)元素進(jìn)行扭曲。（1）skew(x,y)使元素在水平和垂直方向同時(shí)扭曲，x是水平方向扭曲角度，y是垂直方向扭曲角度。其中第二個(gè)參數(shù)y是可選參數(shù)，如果沒有設(shè)置第二個(gè)參數(shù)，那么y軸為0deg。扭曲是以元素中心為基點(diǎn)。例如，對(duì)div元素實(shí)施以下CSS樣式，該div在x方向扭曲30度，在y方向扭曲20度，效果如圖8-9所示，樣式代碼如下：div{transform:skew(30deg,20deg);}30°20°（2）skewX(x)僅使元素在水平方向扭曲變形，例如，對(duì)div元素實(shí)施以下CSS樣式，該div在x方向扭曲30度，效果如圖8-10所示，樣式代碼如下：div{transform:skewX(30deg);}如要使該div在x方向扭曲-30度，效果如圖8-11所示，樣式代碼如下：div{transform:skewX(-30deg);}30°-30°（3）skewY(y)僅使元素在垂直方向扭曲變形，例如，對(duì)div元素實(shí)施以下CSS樣式，該div在y方向扭曲30度，效果如圖8-12所示，樣式代碼如下：div{transform:skewY（30deg）;}30°CSS3.0變形8.18.1.2變形基準(zhǔn)點(diǎn)transform-origin屬性格式：transform-origin：（x，y）;取值：（x，y）為元素基點(diǎn)位置功能：用來設(shè)置元素變形的基點(diǎn)（參照點(diǎn)）。在沒有使用transform-origin改變?cè)鼗c(diǎn)位置的情況下，transform進(jìn)行的rotate,translate,scale,skew等操作都是以元素自己的中心位置進(jìn)行變化的。但有時(shí)候需要在不同的位置對(duì)元素進(jìn)行這些操作，那么就可以使用transform-origin來對(duì)元素進(jìn)行基點(diǎn)位置改變，使元素基點(diǎn)不在是中心位置。x值是定義基準(zhǔn)點(diǎn)在水平方向的位置，其值可以是關(guān)鍵字“l(fā)eft”、“center”、“right”也可以是百分值,也可以是直接以em、px等為單位的數(shù)字位置值?！發(fā)eft”對(duì)應(yīng)的百分值為0%；“center”對(duì)應(yīng)的百分值為50%；“right”對(duì)應(yīng)的百分值為100%。y值是定義基準(zhǔn)點(diǎn)在水平方向的位置，其值可以是關(guān)鍵字“top”、“center”、“bottom”也可以是百分值,也可以是直接以em、px等為單位的數(shù)字位置值?！皌op”對(duì)應(yīng)的百分值為0%；“center”對(duì)應(yīng)的百分值為50%；“bottom”對(duì)應(yīng)的百分值為100%。例如，對(duì)div元素實(shí)施以下CSS樣式，該div將以左上角為基準(zhǔn)順時(shí)針旋轉(zhuǎn)60度，效果如圖8-14所示，參考代碼如下：div{ background-color:#396; height:100px; width:200px; transform:rotate(60deg); transform-origin:lefttop;}transform-origin:lefttop;設(shè)置了旋轉(zhuǎn)基準(zhǔn)點(diǎn)為左上角，等價(jià)于transform-origin:00;或transform-origin:0%0%8.1.3CSS3.0變形效果案例8.1案例8-1：本案例通過導(dǎo)航的制作展示transform屬性變形效果。導(dǎo)航初始狀態(tài)如圖8-15所示。導(dǎo)航在鼠標(biāo)懸停時(shí)，超鏈接將會(huì)產(chǎn)生位移、平移、垂直移動(dòng)、順時(shí)針旋轉(zhuǎn)45度、縮小、水平縮放、垂直縮放、扭曲、水平扭曲、垂直扭曲等變形效果，如圖8-16所示。參考代碼如下：<body><divclass="menu"><ul><liclass="translate"><ahref="#">Translate</a></li><liclass="translate-x"><ahref="#">TranslateX</a></li><liclass="translate-y"><ahref="#">TranslateY</a></li><liclass="rotate"><ahref="#">Rotate</a></li><liclass="scale"><ahref="#">Scale</a></li><liclass="scale-x"><ahref="#">ScaleX</a></li><liclass="scale-y"><ahref="#">ScaleY</a></li><liclass="skew"><ahref="#">Skew</a></li><liclass="skew-x"><ahref="#">SkewX</a></li><liclass="skew-y"><ahref="#">SkewY</a></li></ul></div></body><styletype="text/css">ul{border-top:15pxsolidblack;padding:010px;list-style-type:none;}a{display:block;color:#fff;float:left;margin:05px;font-size:14px;height:50px;line-height:50px;text-align:center;width:65px;padding:10px5px;background:#151515;border-radius:005px5px;box-shadow:001px#ccc,inset002px#fff;text-shadow:01px1px#686868;text-decoration:none;}.translatea{background:#2EC7D2;}.translate-xa{background:#8FDD21;}.translate-ya{background:#F45917;}.rotatea{background:#D50E19;}.scalea{background:#cdddf2;}.scale-xa{background:#0fDD2;}.scale-ya{background:#cd5917;}.skewa{background:#519000;}.skew-xa{background:#D50000;}.skew-ya{background:#E19000;}.translatea:hover{transform:translate(-10px,-10px);}/*鼠標(biāo)經(jīng)過時(shí)發(fā)生位移*/.translate-xa:hover{transform:translateX(-10px);}/*鼠標(biāo)經(jīng)過時(shí)發(fā)生平移*/.translate-ya:hover{transform:translateY(-10px);}/*鼠標(biāo)經(jīng)過時(shí)發(fā)生垂直移動(dòng)*/.rotatea:hover{transform:rotate(45deg);}/*鼠標(biāo)經(jīng)過時(shí)旋轉(zhuǎn)45度*/.scalea:hover{transform:scale(0.8,1.8);}/*鼠標(biāo)經(jīng)過時(shí)縮小*/.scale-xa:hover{transform:scaleX(0.8);}/*鼠標(biāo)經(jīng)過時(shí)水平縮放*/.scale-ya:hover{transform:scaleY(1.2);}/*鼠標(biāo)經(jīng)過時(shí)垂直縮放*/.skewa:hover{transform:skew(45deg,15deg);}/*鼠標(biāo)經(jīng)過時(shí)扭曲*/.skew-xa:hover{transform:skewX(-30deg);}/*鼠標(biāo)經(jīng)過時(shí)水平扭曲*/.skew-ya:hover{transform:skewY(30deg);}/*鼠標(biāo)經(jīng)過時(shí)垂直扭曲*/</style>8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.11.任務(wù)描述用CSS3.0變形效果制作“神游網(wǎng)”首頁。頁面采用固定寬度居中版式，整體效果如圖8-17所示。主體部分左邊照片逆時(shí)針旋轉(zhuǎn)；中間部分插入照片，鼠標(biāo)懸停時(shí)照片放大；主體部分右側(cè)是導(dǎo)航，鼠標(biāo)經(jīng)過時(shí)導(dǎo)航鏈接向左平移。2.任務(wù)要求要完成整個(gè)頁面的制作，特別是主體部分照片和導(dǎo)航變形效果的處理，注意其細(xì)節(jié)。通過本任務(wù)的練習(xí)，要掌握變形相關(guān)的制作技巧以及transform屬性的基本設(shè)置。3.任務(wù)分析本任務(wù)用首先制作固定寬度且居中的頁面。主體部分左邊div用照片作背景，通過設(shè)置transform:rotate(-3deg)旋轉(zhuǎn)變形屬性，使之逆時(shí)針旋轉(zhuǎn)-3度；主體中間部分插入照片，通過設(shè)置鼠標(biāo)經(jīng)過時(shí)transform:scale(1.05,1.05)縮放變形屬性，使照片放大1.05倍；主體部分右側(cè)是導(dǎo)航，通過設(shè)置鼠標(biāo)經(jīng)過時(shí)transform:translateX(-10px)平移變形屬性，導(dǎo)航超鏈接產(chǎn)生平移效果，使頁面呈現(xiàn)動(dòng)態(tài)效果。8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.14.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)8-1”；將網(wǎng)頁命名為task8-1.html保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁的基本結(jié)構(gòu)網(wǎng)頁task8-1.html最外層為div#container，里層div#pic用于展示左側(cè)封面照片，div#banner層插入橫幅圖片，項(xiàng)目列表用于制作導(dǎo)航。網(wǎng)頁基本代碼如下：<body><divid="container"><divid="pic"></div><divid="banner"><imgsrc="ba1.jpg"width="400"height="267"/></div><ul><li><ahref="#">方寸神游</a></li><li><ahref="#">詩行天下</a></li><li><ahref="#">沿途有文</a></li><li><ahref="#">行攝天涯</a></li><li><ahref="#">景點(diǎn)攻略</a></li><li><ahref="#">戶外休閑</a></li></ul></div></body>8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.1步驟3設(shè)置頁面整體樣式設(shè)置body的背景顏色，并將margin設(shè)置為0，不產(chǎn)生縫隙步驟4用固定寬度且居中進(jìn)行頁面排版最外層div#container采用相對(duì)定位，寬度800px;左邊置于50%的位置，即頁面水平中間線右側(cè)，然后再往左退回一半的位置(margin-left:-400px;),完成#container居中。效果如圖8-18所示8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.1步驟5設(shè)置左邊照片的樣式左側(cè)div用絕對(duì)定位調(diào)整位置。用照片作為背景圖，設(shè)置div的大小，并使用旋轉(zhuǎn)變形，將div#pic逆時(shí)針旋轉(zhuǎn)-3度。#pic{ background-image:url(images/ba3.jpg); background-repeat:no-repeat; height:486px; width:234px; position:absolute; left:16px; top:7px; transform:rotate(-3deg);}8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.1步驟6設(shè)置中間照片div#banner的樣式（1）用相對(duì)定位調(diào)整div#banner的位置，并給中間圖像加邊框；（2）給div#banner加上鼠標(biāo)懸停時(shí)圖片放大的變形特效。參考代碼如下：#banner:hover{transform:scale(1.05,1.05);}#banner{ height:267px;width:400px; position:relative;left:150px;top:120px; border:#C55E212pxsolid;}8.1.4任務(wù)8-1：基于CSS3.0變形制作頁面8.1a{ font-size:12px; display:block; text-align:center; padding-top:10px; width:80px; height:22px; text-decoration:none;}a:link,a:visited{ color:#F60; background:url(button1.jpg)no-repeat;}a:hover{ color:#fff; background:url(button2.jpg)no-repeat;a:hover{ transform:translateX(-10px);}步驟7設(shè)置右側(cè)導(dǎo)航的樣式（1）設(shè)置項(xiàng)目列表樣式，將導(dǎo)航項(xiàng)目列表ul下的超鏈接呈塊狀顯示。將ul從原來的位置調(diào)整到banner圖片的右邊，注意要定義寬度，否則會(huì)加寬整個(gè)頁面，使頁面產(chǎn)生橫向滾動(dòng)條；（2）設(shè)置右側(cè)導(dǎo)航超鏈接樣式。超鏈接用圖片做背景，鼠標(biāo)經(jīng)過時(shí)，改變背景圖及字的顏色。（3）設(shè)置導(dǎo)航在鼠標(biāo)經(jīng)過之后，超鏈接產(chǎn)生平移效果，效果如圖8-19所示。參考代碼如下：步驟8保存文件，完成神游網(wǎng)頁面的制作。8.2CSS3.0過渡過渡是指元素可以從一種狀態(tài)平滑地變化到另一種狀態(tài)，體現(xiàn)在CSS上就是允許某些屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡到另一個(gè)取值。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)。CSS3.0通過transition屬性設(shè)置屬性的過渡變換，它能圓滑地以動(dòng)態(tài)效果的形式展示屬性值從一種狀態(tài)變化到另一種狀態(tài)的過程與軌跡。CSS3.0過渡8.28.2.1CSS3.0過渡相關(guān)屬性CSS3.0過渡相關(guān)屬性包括過渡時(shí)間（transition-duration）、屬性類型（transition-property）、過渡延時(shí)（transition-delay）以及速率變化（transition-timing-function）共4種屬性，其中，過渡時(shí)間屬性（transition-duration）是過渡效果必須設(shè)置的屬性。過渡屬性作用在需要過渡的元素上，過渡效果涉及該元素的初始狀態(tài)和結(jié)果狀態(tài)，過渡屬性應(yīng)作用于該元素的初始狀態(tài)樣式。1.過渡時(shí)間transition-duration屬性格式：transition-duration:<time>取值：以秒（s）或毫秒（ms）計(jì)，默認(rèn)值是0s。如果針對(duì)多個(gè)屬性各自有多個(gè)過渡時(shí)間，則用逗號(hào)分隔。功能：該屬性規(guī)定完成過渡效果需要花費(fèi)的時(shí)間。此屬性是過渡效果的必須要設(shè)置的屬性。例如，對(duì)div元素實(shí)施以下CSS樣式，則鼠標(biāo)經(jīng)過該div時(shí)，div將在3秒內(nèi)右移過渡500px，如圖8-20所示。div{transition-duration:3s;}div:hover{transform:translateX(500px);}CSS3.0過渡8.22.屬性類型transition-property屬性格式：transition-property:<屬性類型>取值：需要實(shí)施過渡的屬性類型，屬性類型之間用逗號(hào)分隔。如：width,height功能：該屬性規(guī)定應(yīng)用過渡效果的CSS屬性的名稱。當(dāng)有多個(gè)屬性進(jìn)行過渡，并且過渡時(shí)間不一致時(shí)，需要分別定義各個(gè)過渡屬性及其時(shí)間。當(dāng)取值為all時(shí)表示針對(duì)所有屬性類型實(shí)行過渡。例如，對(duì)div元素實(shí)施以下CSS樣式，則鼠標(biāo)經(jīng)過該div時(shí)，div將在3秒內(nèi)右移過渡500px，并且4秒內(nèi)寬度從100px過渡到200px，如圖8-21所示，代碼如下：div{width:100px;transition-duration:3s,4s;transition-property:transform,width;}div:hover{transform:translateX(500px);width:200px;}3.過渡延時(shí)transition-delay屬性格式：transition-delay:<time>取值：延時(shí)時(shí)間以秒（s）或毫秒（ms）作時(shí)間單位，默認(rèn)值為0s，即沒有延時(shí)。功能：該屬性規(guī)定在過渡效果開始之前需要等待的時(shí)間，以秒或毫秒計(jì)。例如，對(duì)div元素實(shí)施以下CSS樣式，則鼠標(biāo)經(jīng)過該div延時(shí)2秒后，div才用3秒時(shí)間右移過渡500px。div{transition-duration:3s;transition-delay:2s;}div:hover{transform:translateX(500px);}CSS3.0過渡8.24.速率變化transition-timing-function屬性格式：transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out取值：ease：（逐漸變慢）默認(rèn)值；linear：（勻速）；ease-in：(加速)；ease-out：（減速）；ease-in-out：（加速然后減速）；功能：該屬性規(guī)定過渡效果的速度曲線，使用三次貝塞爾（CubicBezier）函數(shù)來生成速度曲線。屬性值linear過渡從頭到尾的速度是相同的；ease過渡是默認(rèn)值，該過渡值以低速開始，然后加快，在結(jié)束前變慢；ease-in過渡以低速開始，然后加速；ease-out過渡以高速開始，低速結(jié)束；ease-in-out過渡以低速開始和結(jié)束，中間進(jìn)行一次加速。CSS3.0過渡8.25.transition屬性格式：transition:<transition-duration><transition-property><transition-delay><transition-timing-function>取值：transition-property：屬性類型值，即執(zhí)行過渡的屬性transition-duration：過渡時(shí)間值，即過渡持續(xù)的時(shí)間transition-timing-function：速率變化值，即過渡持續(xù)時(shí)間段中的速率變化transition-delay：過渡延時(shí)值，即過渡延遲的時(shí)間功能：transition屬性是一個(gè)簡(jiǎn)寫屬性，將過渡相關(guān)的4個(gè)屬性集成在一個(gè)transition屬性中，以參數(shù)形式進(jìn)行統(tǒng)一設(shè)置，4個(gè)參數(shù)中間用空格隔開。如對(duì)div元素實(shí)施以下CSS樣式，表示對(duì)div所有狀態(tài)改變的屬性在延時(shí)0.5秒后實(shí)施3秒的加速過渡。8.2.2CSS3.0過渡效果案例8.2案例8-2：本案例通過9個(gè)div展示transition屬性過渡效果。div初始狀態(tài)如圖8-22所示，鼠標(biāo)懸停div元素后，div的寬度擴(kuò)大。如圖8-23所示是鼠標(biāo)懸?！癊ase-in加速”時(shí)最后的狀態(tài)。各div采用不同的過渡方式，包括:鼠標(biāo)經(jīng)過時(shí)沒有過渡直接改變位置；鼠標(biāo)懸停3秒鐘后寬度逐漸過渡到500px；延時(shí)2秒后寬度在3秒內(nèi)逐漸過渡到500px；分別在2秒和6秒同時(shí)改變寬度和背景顏色；采用transition簡(jiǎn)寫并速率為Ease逐漸變慢；Ease-in加速；Ease-out減速；Ease-in-out先加速后減速；Linear勻速。<body><divid="timings-demo"><divid="box1"class="demo-box">鼠標(biāo)懸停時(shí)沒有過渡直接改變寬度</div><divid="duration"class="demo-box">鼠標(biāo)懸停3秒鐘寬度逐漸過渡到500px</div><divid="delay"class="demo-box">延時(shí)2秒后寬度在3秒逐漸過渡到500px</div><divid="prop"class="demo-box">分別在2秒和6秒同時(shí)改變寬度和背景顏色</div><divid="ease"class="demo-box">transition簡(jiǎn)寫并速率為Ease逐漸變慢</div><divid="ease-in"class="demo-box">Ease-in加速</div><divid="ease-out"class="demo-box">Ease-out減速</div><divid="ease-in-out"class="demo-box">Ease-in-out先加速后減速</div><divid="linear"class="demo-box">Linear勻速</div></div></body><styletype="text/css"> #timings-demo{ border:1pxsolid#ccc;padding:10px;height:550px;width:500px; } .demo-box{ width:300px;height:50px;text-align:center;line-height:50px; text-align:center;color:#fff;background:#96c;border-radius:5px; box-shadow:inset005pxrgba(102,153,0,0.5);margin-bottom:10px; } #box1{/*鼠標(biāo)懸停時(shí)沒有過渡直接改變寬度*/ background:#F3F; } #box1:hover{ width:500px; } #duration{/*鼠標(biāo)懸停3秒鐘寬度逐漸過渡到500px*/background:#FC0;transition-duration:3s;} #duration:hover{width:500px; } #delay{/*延時(shí)2秒后寬度在3秒逐漸過渡到500px*/ background:#03F; transition-duration:3s; transition-delay:2s; } #delay:hover{ width:500px; } #prop{/*分別在2秒和6秒同時(shí)改變寬度和背景顏色*/ background:#6d6; transition-property:width,background; transition-duration:2s,6s; } #prop:hover{ width:500px;background:red; } /*采用transition簡(jiǎn)寫方式，分別設(shè)置不同的速率*/ #ease{transition:all5sease0.3s;background:#f36;} #ease-in{transition:all3sease-in0.5s;background:#369;} #ease-out{transition:all5sease-out0s;background:#636;} #ease-in-out{transition:all1sease-in-out2s;background:#936;} #linear{transition:all6slinear0s;background:#999;} #ease:hover,#ease-in:hover,#ease-out:hover,#ease-in-out:hover,#linear:hover{

width:500px; }</style>8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.21.任務(wù)描述用CSS3.0過渡效果制作“行攝天涯”頁面。主體部分為八張照片組成的照片墻。鼠標(biāo)在張片上懸停，分別產(chǎn)生向下拉簾效果、文字落幕效果、文字升幕效果、幻燈片切換效果、圖片透明效果、圖片移除效果、圖片全景效果、圖片旋轉(zhuǎn)效果。整體效果如圖8-24所示。2.任務(wù)要求完成整個(gè)頁面八個(gè)動(dòng)態(tài)效果的制作。通過本任務(wù)的練習(xí)，要掌握過渡相關(guān)的制作技巧以及transition屬性的基本設(shè)置；要對(duì)比多種實(shí)現(xiàn)手段，做到舉一反三。8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.23.任務(wù)分析本任務(wù)首先制作固定寬度且居中的頁面，然后采用flex彈性布局，垂直方向分三行制作照片墻，八張照片作為項(xiàng)目，分別用.p11、.p12、.p21、.p22、.p23、.p31、.p32、.p33八個(gè)類修飾。主體部分左上角（div.p11）照片在鼠標(biāo)經(jīng)過時(shí)呈現(xiàn)自上而下的拉簾效果，簾幕是通過增加空的CSS偽元素去實(shí)現(xiàn)的。該偽元素設(shè)置成顏色半透明，初始高度為0，鼠標(biāo)經(jīng)過div.p11時(shí)，偽元素的高度過渡到100%，從而達(dá)到自上而下的拉簾效果。注意，過渡的主體是偽元素，所以過渡屬性要在偽元素的初始狀態(tài)設(shè)置。div.p12是文字落幕效果、div.p21是文字升幕效果、div.p22是幻燈片切換效果、div.p31是圖片移除效果，這些效果的制作關(guān)鍵是內(nèi)部增加了兩個(gè)塊box1和box2，通過這兩個(gè)塊的位置平移過渡，實(shí)現(xiàn)以上4種動(dòng)態(tài)效果。div.p23是圖片透明效果，通過不透明度屬性過渡來實(shí)現(xiàn)；div.p32是圖片全景效果，通過margin-left屬性的過渡來實(shí)現(xiàn)橫向掃描；div.p32是圖片旋轉(zhuǎn)360度效果，通過旋轉(zhuǎn)屬性的過渡來實(shí)現(xiàn)。如果沒有過渡，將圖片旋轉(zhuǎn)360度將不會(huì)有任何外觀上的變化。8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.24.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“任務(wù)8-2”；將網(wǎng)頁命名為task8-2.html，保存在站點(diǎn)所在的目錄。步驟2建立網(wǎng)頁的基本結(jié)構(gòu)其中類p11、p12、p21、p22、p23、p31、p32、p33所在的div用來作為8個(gè)照片的展示塊，分成3行。<body><divid="container"> <divclass="line"> <divclass="p11"></div> <divclass="p12"></div> </div> <divclass="line"> <divclass="p21"></div> <divclass="p22"></div> <divclass="p23"></div> </div> <divclass="line"> <divclass="p31"></div> <divclass="p32"></div> <divclass="p33"></div> </div></div></body>8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟3頁面整體布局參照6.2.4的內(nèi)容，制作固定寬度為800px并且居中顯示的整體布局，設(shè)置body和最外層div#container的樣式步驟4頁面主體排版div#container采用flex彈性布局，分為三行,用3組<divclass="line"></div>作為#container容器的項(xiàng)目，設(shè)置每一行平均分配#container總高度；同時(shí)又作為容器分別包含2個(gè)或3個(gè)照片項(xiàng)目。#container{display:flex;flex-direction:column;}/*最外層#container作為容器，項(xiàng)目垂直分布*/.line{width:760px;margin:10px20px;background-color:#FFF; flex:1;/*作為#container容器的每一個(gè)項(xiàng)目，平均分配總高度*/ display:flex; /*同時(shí)又作為內(nèi)部照片塊項(xiàng)目的容器*/}.linediv{ flex:1;/*.line容器的項(xiàng)目，平均分配總寬度*/ margin:8px5px05px;overflow:hidden;height:130px;}8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟5頁面主體第1行第1張照片實(shí)現(xiàn)拉簾效果（1）頁面主體第1行第1個(gè)塊寫入內(nèi)容“行攝天涯”；（2）設(shè)置div.p11的樣式，效果如圖8-25所示；（3）在div.p11內(nèi)增加內(nèi)容為空的CSS偽元素用作簾幕。設(shè)置該偽元素背景顏色半透明，初始高度為0，鼠標(biāo)經(jīng)過div.p11時(shí)，偽元素高度在3秒內(nèi)過渡到100%，實(shí)現(xiàn)拉簾效果，效果如圖8-26所示。為了保證讓div.p11被鼠標(biāo)觸碰到，并且讓div.p11的文字內(nèi)容“行攝天涯”顯示出來，需要設(shè)置div.p11的堆放順序位于偽元素的上面。div.p11::after{ content:""; /*偽元素內(nèi)容為空*/ height:0px; /*偽元素初始高度為0*/ position:absolute; left:0; top:0; width:100%; background:hsla(198,51.52%,93.53%,.5);/*設(shè)置偽元素顏色半透明*/ transition-duration:3s;/*設(shè)置過渡時(shí)間*/ z-index:-1;/*讓文字顯示出來*/}div.p11:hover::after{ height:100%;/*鼠標(biāo)經(jīng)過div.p11，偽元素高度變?yōu)?00%*/ }8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟6頁面主體第1行第2張照片實(shí)現(xiàn)文字落幕效果（1）頁面主體第1行第2個(gè)塊內(nèi)增加兩個(gè)塊div.box1和div.box2，這.box1和.box2兩個(gè)類是作為第2張照片到第7張照片內(nèi)部塊的通過樣式。p12下的第二個(gè)塊的私有樣式要通過p12box2類定義；（2）設(shè)置.box1和.box2兩個(gè)類的樣式，其中div.box1的大小與div.p12大小相同，占滿整個(gè)父div的空間；div.box2在div.box1的下面，并設(shè)置成顏色半透明，用作簾幕。由于div.linediv進(jìn)行了overflow:hidden溢出處理，故div.box2不會(huì)被顯示出來；（3）設(shè)置div.p12的樣式，效果如圖8-27所示；（4）設(shè)置div.p12下的第二個(gè)塊的私有樣式。將原本處于第1個(gè)塊下面的第2個(gè)塊向上移動(dòng)，初始狀態(tài)覆蓋在第1個(gè)塊上面。鼠標(biāo)經(jīng)過時(shí)，第2個(gè)塊在1秒內(nèi)向下過渡到原來的位置（此處通過margin-top屬性調(diào)整位置），實(shí)現(xiàn)文字落幕效果，如圖8-28所示8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟7頁面主體第2行第1張照片實(shí)現(xiàn)文字升幕效果（1）頁面主體第2行第1個(gè)塊內(nèi)增加div.box1和div.box2兩個(gè)塊（2）設(shè)置div.p21的樣式，效果如圖8-29所示（3）設(shè)置第2個(gè)塊的私有樣式。鼠標(biāo)經(jīng)過p21時(shí)，原本處于第1個(gè)塊下面的第2個(gè)塊在1秒內(nèi)向上過渡，覆蓋在第1個(gè)塊上面，實(shí)現(xiàn)文字升幕效果，效果如圖8-30所示8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟8頁面主體第2行第2張照片實(shí)現(xiàn)幻燈片切換效果（1）頁面主體第2行第2個(gè)塊內(nèi)增加兩個(gè)div；（2）設(shè)置div.p22的樣式，效果如圖8-31所示；（3）設(shè)置第2個(gè)塊的私有樣式。第2個(gè)塊用照片做背景，將原本處于第1個(gè)塊下面的第2個(gè)塊移動(dòng)到第1個(gè)塊的右邊。由于父塊做了溢出處理，第2個(gè)塊初始狀態(tài)被隱藏。鼠標(biāo)經(jīng)過p22時(shí)，第2個(gè)塊在1秒內(nèi)向左過渡平移，覆蓋在第1個(gè)塊上面，實(shí)現(xiàn)幻燈片切換效果，效果如圖8-328.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟9頁面主體第2行第3張照片實(shí)現(xiàn)圖片透明效果（1）頁面主體第2行第3個(gè)塊內(nèi)增加兩個(gè)div；（2）設(shè)置div.p23的樣式；（3）設(shè)置第2個(gè)塊的私有樣式.p23box2。將原本處于第1個(gè)塊下面的第2個(gè)塊（簾幕）向上移動(dòng)，覆蓋在第1個(gè)塊上面，實(shí)現(xiàn)圖片半透明顯示，效果如圖8-33所示。鼠標(biāo)經(jīng)過時(shí)，第2個(gè)塊（簾幕）在1秒內(nèi)不透明度屬性過渡到0，使簾幕消失，照片變?yōu)榍逦?，效果如圖8-34所示，8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟10頁面主體第3行第1張照片實(shí)現(xiàn)圖片移除效果（1）頁面主體第3行第1個(gè)塊內(nèi)增加兩個(gè)div；（2）設(shè)置div.p31的樣式，效果如圖8-35所示；（3）設(shè)置第2個(gè)塊的私有樣式。第2個(gè)塊用照片作背景圖，通過相對(duì)定位覆蓋在第1個(gè)塊上面。鼠標(biāo)經(jīng)過p31時(shí)，第2個(gè)塊在1秒內(nèi)向右邊過渡平移，原本處于第1個(gè)塊的照片得以出現(xiàn)，實(shí)現(xiàn)圖片移除效果，效果如圖8-36所示8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟11頁面主體第3行第2張照片實(shí)現(xiàn)圖片全景效果（1）頁面主體第3行第2個(gè)塊內(nèi)增加1個(gè)div；（2）設(shè)置.p32box2的樣式。該塊用一副寬度大于顯示窗口的照片作背景圖，效果如圖8-37所示。鼠標(biāo)經(jīng)過p32時(shí)，該塊向左過渡平移，將原本被父塊遮擋的部分得以從左到右掃描呈現(xiàn)，實(shí)現(xiàn)圖片全景效果，效果如圖8-38所示；8.2.3任務(wù)8-2：基于CSS3.0過渡制作照片墻動(dòng)態(tài)效果頁面8.2步驟12

頁面主體第2行第3張照片實(shí)現(xiàn)圖片旋轉(zhuǎn)效果設(shè)置div.p33的樣式，用照片作背景圖，效果如圖8-39所示。鼠標(biāo)經(jīng)過時(shí)，照片順時(shí)針旋轉(zhuǎn)360度，設(shè)置過渡時(shí)間為1秒，可以看到旋轉(zhuǎn)的軌跡過程，效果如圖8-40所示

12步驟13

保存文件，完成“行攝天涯”照片墻頁面的制作。8.3CSS3.0動(dòng)畫CSS3.0動(dòng)畫是通過"keyframes"（即“關(guān)鍵幀”）控制元素從初始狀態(tài)到結(jié)束狀態(tài)每一時(shí)間段的屬性來實(shí)現(xiàn)的。這與上一節(jié)transition只定義初始屬性和最終屬性不同，因而可以做到更好、更多的動(dòng)畫細(xì)節(jié)。CSS3.0動(dòng)畫無需通過動(dòng)作觸發(fā)就能自動(dòng)播放。它采用@keyframes規(guī)則結(jié)合animation屬性來實(shí)現(xiàn)對(duì)關(guān)鍵點(diǎn)的屬性控制。@keyframes中的樣式規(guī)則是由多個(gè)時(shí)間百分比構(gòu)成的時(shí)間節(jié)點(diǎn)。可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比時(shí)間段，分別在每一個(gè)時(shí)間段給需要有動(dòng)畫效果的元素加上不同的屬性，從而讓元素達(dá)到不斷變化的效果，比如說移動(dòng)、改變?cè)仡伾?、大小、形狀等。CSS3.0動(dòng)畫8.3

8.3.1CSS3.0動(dòng)畫相關(guān)屬性1.@keyframes規(guī)則格式：@keyframesanimationname{keyframes-selector{css-styles;}}取值：animationname：animation-name屬性所定義的動(dòng)畫名稱；keyframes-selector：動(dòng)畫持續(xù)時(shí)間的百分比，可以用關(guān)鍵字"from"和"to"，等價(jià)于0%和100%功能：@keyframes規(guī)則作用于animation-name屬性所定義的動(dòng)畫，以百分比來規(guī)定屬性改變發(fā)生的時(shí)間，也就是時(shí)間線上的關(guān)鍵幀。0%是動(dòng)畫開始的時(shí)間，100%是動(dòng)畫結(jié)束的時(shí)間。為了獲得最佳的瀏覽器支持，必須始終定義0%和100%這兩個(gè)時(shí)間段選擇器。2.animation-name屬性格式：animation-name：<name>取值：自定義動(dòng)畫名稱功能：該屬性為@keyframes動(dòng)畫規(guī)定一個(gè)名稱，是@keyframes動(dòng)畫必須定義的屬性。3.animation-duration屬性格式：animation-duration：<time>取值：以秒（s）或毫秒（ms）計(jì)，默認(rèn)值是0，意味著沒有動(dòng)畫效果功能：該屬性規(guī)定完成動(dòng)畫效果需要花費(fèi)的時(shí)間，是@keyframes動(dòng)畫必須定義的屬性。CSS3.0動(dòng)畫8.3

4.animation-iteration-count屬性格式：animation-iteration-count：n|infinite取值：n：定義動(dòng)畫播放次數(shù)的數(shù)值infinite：規(guī)定動(dòng)畫無限次播放功能：該屬性定義動(dòng)畫的播放次數(shù)，是@keyframes動(dòng)畫必須定義的屬性。5.animation-timing-function屬性格式：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out功能：該屬性規(guī)定動(dòng)畫的速度曲線，取值與上一節(jié)transition-timing-function屬性相同。6.animation-delay屬性格式：animation-delay:<time>取值：延時(shí)時(shí)間以秒（s）或毫秒（ms）作時(shí)間單位，默認(rèn)值為0s，即沒有延時(shí)。功能：該屬性定義動(dòng)畫何時(shí)開始，允許負(fù)值。例如，animation-delay:-2s使動(dòng)畫馬上開始，但跳過2秒進(jìn)入動(dòng)畫。CSS3.0動(dòng)畫8.3

7.animation-direction屬性格式：animation-direction:alternate|normal取值：alternate：動(dòng)畫輪流反向播放normal：動(dòng)畫正常播放（默認(rèn)值）。功能：該屬性定義是否應(yīng)該輪流反向播放動(dòng)畫。如果animation-direction值是"alternate"，則動(dòng)畫會(huì)在奇數(shù)次數(shù)（1、3、5等等）正常播放，而在偶數(shù)次數(shù)（2、4、6等等）向后播放。如果把動(dòng)畫設(shè)置為只播放一次，則該屬性沒有效果。CSS3.0動(dòng)畫8.3

8.animation屬性格式：animation:<animation-name><animation-duration><animation-timing-function><animation-delay><animation-iteration-count><animation-direction>取值：animation-name：動(dòng)畫名稱,即需要綁定到選擇器的keyframe名稱animation-duration：動(dòng)畫時(shí)間值,即完成動(dòng)畫所花的時(shí)間，以秒或毫秒計(jì)animation-timing-function：速率變化值，即動(dòng)畫的速度曲線animation-delay：動(dòng)畫延時(shí)值，即在動(dòng)畫開始之前的延遲animation-iteration-count：播放次數(shù)值，即動(dòng)畫應(yīng)該播放的次數(shù)animation-direction：反向播放，即是否應(yīng)該輪流反向播放動(dòng)畫功能：animation屬性是一個(gè)簡(jiǎn)寫屬性。將動(dòng)畫與div元素綁定，必須規(guī)定animation-duration屬性，否則時(shí)長(zhǎng)為0，就不會(huì)播放動(dòng)畫了。8.3.2CSS3.0動(dòng)畫效果案例8.3

案例8-3：本案例通過4個(gè)gif小天使動(dòng)畫展示@keyframes結(jié)合animation屬性的效果。效果如圖8-41所示。在頁面中插入4個(gè)gif小天使圖片，采用@keyframes動(dòng)畫展示animation效果。在不同的時(shí)間段自動(dòng)改變小天使的位置和文字顏色，其中“天使1”僅使用keyframes動(dòng)畫中必須定義的基本屬性：動(dòng)畫名稱屬性、動(dòng)畫持續(xù)時(shí)間屬性和播放次數(shù)屬性；“天使2”在“天使1”動(dòng)畫的基礎(chǔ)上延時(shí)3秒鐘；“天使3”在“天使1”動(dòng)畫的基礎(chǔ)上將動(dòng)畫速率定義為ease-out減速，并且輪流反向播放；“天使4”使用animation簡(jiǎn)寫，動(dòng)畫延時(shí)2秒，速率為ease-in加速，只播放3次就停下。<body><divid="an1"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使1：必須的定義動(dòng)畫名稱屬性、動(dòng)畫持續(xù)時(shí)間屬性、播放次數(shù)屬性</div><divid="an2"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使2：動(dòng)畫延時(shí)3秒</div><divid="an3"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使3：動(dòng)畫速率為ease-out減速，并且輪流反向播放</div><divid="an4"><imgsrc="4041.GIF"width="96"height="80"alt="小天使">

天使4：使用animation簡(jiǎn)寫，動(dòng)畫延時(shí)2秒，速率為ease-in加速，只播放3次</div></body>

<style> #an1{ position:absolute;right:0; animation-name:mymove1; animation-duration:5s; animation-iteration-count:infinite;}@keyframesmymove1{ 0%{left:1000px;top:0px;color:red;} 20%{left:700px;top:0px;color:#3BBF87;} 60%{left:300px;top:0px;color:#B7070A;} 70%{left:100px;top:0px;color:#B7070A;} 80%{left:100px;top:300px;color:#E1C60C;} 100%{left:100px;top:600px;color:#3E0FDC;}}#an2{ position:absolute;right:0; animation-name:mymove2; animation-duration:5s; animation-iteration-count:infinite; animation-delay:3s;}@keyframesmymove2{ 0%{left:1000px;top:0px;color:red;} 20%{left:700px;top:0px;color:#3BBF87;} 60%{left:300px;top:0px;color:#B7070A;} 70%{left:100px;top:0px;color:#B7070A;} 80%{left:100px;top:300px;color:#E1C60C;} 100%{left:100px;top:600px;color:#3E0FDC;}}#an3{ position:absolute;right:0;top:30px; animation-name:mymove3; animation-duration:5s; animation-iteration-count:infinite; animation-timing-function:ease-out; animation-direction:alternate;}@keyframesmymove3{ 0%{left:1000px;top:30px;color:red;} 20%{left:700px;top:30px;color:#3BBF87;} 60%{left:300px;top:30px;color:#B7070A;} 70%{left:100px;top:30px;color:#B7070A;} 80%{left:100px;top:330px;color:#E1C60C;} 100%{left:100px;top:630px;color:#3E0FDC;}}#an4{ position:absolute;right:0;top:60px; animation:mymove45s3ease-out2snormal;}@keyframesmymove4{ 0%{left:1000px;top:60px;color:red;} 20%{left:700px;top:60px;color:#3BBF87;} 60%{left:300px;top:60px;color:#B7070A;} 70%{left:100px;top:60px;color:#B7070A;} 80%{left:100px;top:360px;color:#E1C60C;} 100%{left:100px;top:660px;color:#3E0FDC;}}</style>8.3.3任務(wù)8-3：基于CSS3.0動(dòng)畫制作頁面8.3

1.任務(wù)描述制作如圖8-42所示的照明公司網(wǎng)站頁面。該頁面是具有動(dòng)畫效果的網(wǎng)頁。導(dǎo)航超鏈接輪流以一種顏色漸變到另一種顏色；logo上的小星星會(huì)自動(dòng)沿軌道移動(dòng)；左側(cè)背景顏色不斷改變；圖片指示標(biāo)記用兩種不同顏色交替閃爍。8.3

2.任務(wù)要求通過本任務(wù)的練習(xí)，掌握animation屬性結(jié)合@keyframes規(guī)則的基本設(shè)置；掌握@keyframes動(dòng)畫的制作技巧；掌握利用@keyframes動(dòng)畫實(shí)現(xiàn)元素屬性自動(dòng)交替的方法。3.任務(wù)分析設(shè)置動(dòng)畫的主要目的是引起讀者注意，使頁面更加生動(dòng)。logo上的小星星通過時(shí)間段位置屬性的改變自動(dòng)沿軌道移動(dòng)；左側(cè)背景使用顏色模糊的徑向漸變，不間斷地改變漸變顏色，使之具有發(fā)光效果。導(dǎo)航有7個(gè)鏈接，每一個(gè)鏈接都各自實(shí)施一個(gè)7秒的動(dòng)畫，該動(dòng)畫在開始時(shí)間段（0%）到第1秒（14%）采用白色文字，第1秒（14%）到第2秒（28%）為金黃色，第2秒（28%）到第7秒（100%）都是白色。再讓每一個(gè)鏈接的動(dòng)畫依次延時(shí)1秒開始，就形成了交替動(dòng)畫。導(dǎo)航鏈接交替顯示白色金黃色文字，金黃文字每次顯示持續(xù)1秒的時(shí)間。圖片指示標(biāo)記也是交替動(dòng)畫，用兩種不同顏色交替閃爍。8.3.3任務(wù)8-3：基于CSS3.0動(dòng)畫制作頁面8.3

8.3.3任務(wù)8-3：基于CSS3.0動(dòng)畫制作頁面4.工作過程步驟1站點(diǎn)規(guī)劃（1）新建文件夾作為站點(diǎn)，站點(diǎn)內(nèi)建立images文件夾，將本節(jié)圖片素材存放在images文件夾中；（2）新建網(wǎng)頁，設(shè)置<title>為“沿途有文”；將網(wǎng)頁命名為task8-3.html保存在站點(diǎn)所在的目錄。（3）建立網(wǎng)頁的基本結(jié)構(gòu)<body><divid="container"> <header><divid="star"></div> <divid="nav"> <ul> <liclass="li1"><ahref="#">首頁</a></li> <liclass="li2"><ahref="#">公司簡(jiǎn)介</a></li> <liclass="li3"><ahref="#">新聞中心</a></li> <liclass="li4"><ahref="#">產(chǎn)品展示</a></li> <liclass="li5"><ahref="#">案例展示</a></li> <liclass="li6"><ahref="#">人才招聘</a></li> <liclass="li7"><ahref="#">