HTML5＋CSS3 開發(fā)基礎(chǔ)項(xiàng)目教程_第1頁
HTML5＋CSS3 開發(fā)基礎(chǔ)項(xiàng)目教程_第2頁
HTML5＋CSS3 開發(fā)基礎(chǔ)項(xiàng)目教程_第3頁
HTML5＋CSS3 開發(fā)基礎(chǔ)項(xiàng)目教程_第4頁
HTML5＋CSS3 開發(fā)基礎(chǔ)項(xiàng)目教程_第5頁
已閱讀5頁，還剩239頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTＭL5＋CSS3

開發(fā)基礎(chǔ)項(xiàng)目教程項(xiàng)目1搜索網(wǎng)站項(xiàng)目

項(xiàng)目2公司網(wǎng)站項(xiàng)目

項(xiàng)目3學(xué)校網(wǎng)站項(xiàng)目

項(xiàng)目4電商網(wǎng)站項(xiàng)目

項(xiàng)目5旅游網(wǎng)站項(xiàng)目

項(xiàng)目6工具網(wǎng)站項(xiàng)目

項(xiàng)目7后臺管理網(wǎng)站

目

錄項(xiàng)目1

搜索網(wǎng)站項(xiàng)目項(xiàng)目概述本項(xiàng)目仿照百度搜索網(wǎng)站的首頁，實(shí)現(xiàn)頁面部分內(nèi)容的設(shè)計(jì)，學(xué)習(xí)其中涉及的htＭl＋css技能知識。本項(xiàng)目開發(fā)的基本任務(wù)包括：頂部導(dǎo)航菜單、居中的logo（標(biāo)志）、圖標(biāo)的絕對定位、圖文同行排列、“百度一下”輸入框、選項(xiàng)卡、我的導(dǎo)航等，如圖1－1所示。知識準(zhǔn)備1.htＭl結(jié)構(gòu)2.htＭl標(biāo)記語言3.htＭl標(biāo)簽特點(diǎn)4.<ul>標(biāo)簽5.<style>標(biāo)簽任務(wù)1

頂部導(dǎo)航菜單完成頂部導(dǎo)航菜單的設(shè)計(jì)，如圖1－2所示。（1）創(chuàng)建網(wǎng)站文件夾。（2）創(chuàng)建網(wǎng)頁index.htｍl文件。（3）實(shí)現(xiàn)“新聞”“hao123”“地圖”“直播”“視頻”“貼吧”“學(xué)術(shù)”“更多”等頂部導(dǎo)航菜單內(nèi)容展示，顯示于網(wǎng)頁的左上角頂部位置。任務(wù)描述（1）創(chuàng)建網(wǎng)站文件夾htｍl，如圖1－3所示。（2）打開開發(fā)工具subliｍetext，執(zhí)行“文件/打開文件夾”命令，如圖1－4所示。（3）在彈出的“選擇文件夾”對話框中選擇文件夾htｍl，如圖1－5所示。（4）單擊“選擇文件夾”按鈕，返回subliｍetext，如圖1－6所示。實(shí)現(xiàn)步驟（5）執(zhí)行“文件/保存”命令，如圖1－7所示。（6）在彈出的“另存為”對話框中選擇“保存類型”為htＭl，輸入文件名index.htｍl，如圖1－8所示。（7）單擊“保存”按鈕，保存文件后，返回subliｍetext，如圖1－9所示。（8）輸入!，如圖1－10所示。（9）按【tab】鍵，自動創(chuàng)建htｍl網(wǎng)頁默認(rèn)結(jié)構(gòu)代碼，如圖1－11所示。（10）在<body></body>標(biāo)簽內(nèi)，輸入如下<ul>及<li>標(biāo)簽的內(nèi)容，如圖1－12所示。（11）保存文件后，在側(cè)邊欄中右擊index.htｍl文件名，在彈出的快捷菜單中執(zhí)行“打開所在文件夾”，如圖1－13所示。（12）打開所在文件夾htｍl后，右擊index.htｍl文件名，在彈出的快捷菜單中選擇“打開方式”菜單項(xiàng)，展開其子菜單，選擇一個瀏覽器，如圖1－14所示。（13）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－15所示。（14）在<head></head>標(biāo)簽內(nèi)創(chuàng)建<style>標(biāo)簽，并輸入ul{}樣式代碼“l(fā)ist－style:none；”，如圖1－16所示。（15）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－17所示。（16）添加ul{}樣式代碼“display:flex；”，如圖1－18所示。（17）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－19所示。（18）添加ulli{}樣式代碼“ｍargin－right：10px；”，如圖1－20所示。（19）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，任務(wù)完成，如圖1－2所示。任務(wù)2

居中的logo完成logo圖像的顯示，如圖1－21所示。（1）打開任務(wù)1創(chuàng)建的index.htｍl文件，在頁面居中顯示logo圖像。（2）圖像大小適當(dāng)，設(shè)置適當(dāng)?shù)纳线吘?。任?wù)描述（1）打開網(wǎng)站文件夾htｍl，創(chuàng)建iｍages文件夾，把圖像文件復(fù)制到iｍages文件中，如圖1－22所示。（2）打開index.htｍl文件，創(chuàng)建<divid＝"logo">標(biāo)簽，在<divid＝"logo">標(biāo)簽內(nèi)創(chuàng)建<iｍgsrc＝"iｍages/baidu.gif"alt＝"">標(biāo)簽，如圖1－23所示。（3）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－24所示。（4）在<style>標(biāo)簽中設(shè)置＃logo{width:200px；background－color:red；}樣式屬性，如圖1－25所示。實(shí)現(xiàn)步驟（5）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－26所示。（6）在＃logo{}中，添加樣式代碼“ｍargin:0auto；”，如圖1－27所示。（7）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－28所示。（8）在<style>標(biāo)簽中設(shè)置＃logoiｍg{width:200px；}樣式屬性，如圖1－29所示。（9）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－30所示。（10）在＃logo{}中內(nèi)容刪除樣式代碼“background－color:red；”，將其修改為＃logo{width:200px；ｍargin:0auto；}，去除背景色，如圖1－31所示。（11）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－21所示。任務(wù)3

圖標(biāo)的絕對定位完成圖標(biāo)的絕對定位功能，如圖1－32所示。（1）新建網(wǎng)頁index.hｍl，創(chuàng)建一個div區(qū)域，設(shè)置邊框，居中于頁面。（2）在div標(biāo)簽內(nèi)，顯示一個圖標(biāo)，鼠標(biāo)移到圖標(biāo)上，圖標(biāo)更改為另一種顏色的圖標(biāo)。（3）在div標(biāo)簽內(nèi)定位圖標(biāo)位置。任務(wù)描述（1）打開網(wǎng)站文件夾htｍl，創(chuàng)建iｍages文件夾，把需要的圖片文件復(fù)制到iｍages文件中，如圖1－33所示。（2）創(chuàng)建網(wǎng)頁文件index.htｍl，在<body>標(biāo)簽中創(chuàng)建<divid＝"box">標(biāo)簽，在<divid＝"box">標(biāo)簽內(nèi)創(chuàng)建<i>標(biāo)簽，如圖1－34所示。（3）在<style>標(biāo)簽中，創(chuàng)建i選擇器，設(shè)置“width:30px；height:30px；background:url（"iｍa￣ges/backb.png"）；background－size:100％100％；position:absolute；right:105px；”等屬性，如圖1－35所示。實(shí)現(xiàn)步驟（4）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，在距離頁面右邊界105px處顯示了指定圖標(biāo)，如圖1－36所示。（5）在<style>標(biāo)簽中創(chuàng)建i:hover選擇器，設(shè)置“background:url（"iｍages/backa.png"）；background－size:100％100％；cursor:pointer；”等屬性，如圖1－37所示。（6）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，鼠標(biāo)指針移動至圖標(biāo)上時，顯示另一種顏色的圖標(biāo)，鼠標(biāo)指針呈現(xiàn)手形，如圖1－38所示。（7）在<style>標(biāo)簽中，創(chuàng)建＃box選擇器，設(shè)置“width:500px；height:30px；border:1pxsolidred；ｍargin:50pxauto；”等屬性，如圖1－39所示。（8）在瀏覽器運(yùn)行的網(wǎng)頁，圖標(biāo)顯示在紅框中，圖標(biāo)距離網(wǎng)頁右邊界仍為105px，如圖1－40所示。（9）在＃box選擇器中添加“position:relative；”屬性，如圖1－41所示。（10）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，圖標(biāo)顯示在紅框中，圖標(biāo)距離紅框右邊界為105px，圖標(biāo)距離網(wǎng)頁右邊界不再是105px，如圖1－42所示。任務(wù)4

圖文同行排列完成圖文同行排列的效果，如圖1－43所示。（1）打開任務(wù)3的index.htｍl文件，在圖標(biāo)右側(cè)顯示“百度一下”文本。（2）文字為白色，文本框背景色為藍(lán)色，文本框右上角和右下角為圓弧形。任務(wù)描述（1）打開index.htｍl文件，在<divid＝"box">標(biāo)簽內(nèi)添加<span>百度一下</span>標(biāo)簽，如圖1－44所示。（2）在瀏覽器運(yùn)行的網(wǎng)頁效果，文本“百度一下”顯示在框內(nèi)左側(cè)，如圖1－45所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽中創(chuàng)建＃boxspan選擇器，設(shè)置“width:100px；color:white；backgroundcolor:blue；display:inline－block；position:absolute；right:0；border－radius:020px20px0；height:30px；line－h(huán)eight:30px；text－align:center；border:1pxsolidblue；”等屬性，如圖1－46所示。（4）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，文本“百度一下”設(shè)置了樣式，并顯示在框內(nèi)右側(cè)，如圖1－43所示。任務(wù)5

“百度一下”輸入框完成“百度一下”輸入框的設(shè)計(jì)，如圖1－47所示。（1）輸入框無焦點(diǎn)時，灰色邊框?yàn)榛疑?；?dāng)輸入內(nèi)容時，輸入框獲取焦點(diǎn)，邊框變?yōu)樗{(lán)色。（2）圖標(biāo)在藍(lán)色邊框范圍內(nèi)。（3）輸入的內(nèi)容在行內(nèi)垂直居中，離左邊界適當(dāng)?shù)倪吘?。?）“百度一下”右側(cè)圓弧邊界，無其他邊框。任務(wù)描述（1）打開index.htｍl文件，在<divid＝"box">標(biāo)簽內(nèi)添加<divid＝"input"contented￣itable＝"true"></div>標(biāo)簽，如圖1－48所示。（2）在<style>標(biāo)簽中，添加＃input{background－color:＃f0f；width:350px；height:30px；display:inline－block；}，如圖1－49所示。實(shí)現(xiàn)步驟（3）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，圖標(biāo)左側(cè)區(qū)域正常輸入文本，如圖1－50所示。（4）在＃input{}中添加“l(fā)ine－h(huán)eight:30px；padding－left:10px；”屬性，如圖1－51所示。（5）輸入文本在輸入?yún)^(qū)域內(nèi)垂直居中，文本距離左邊框?yàn)?0px，如圖1－52所示。（6）在＃input{}中，添加“outline:none；”，如圖1－53所示。（7）輸入?yún)^(qū)域去除了默認(rèn)的邊框，如圖1－54所示。（8）在＃input{}中添加“border:1pxsolid＃666；”屬性，如圖1－55所示。（9）輸入?yún)^(qū)域設(shè)置了指定的邊框，如圖1－56所示。（10）在＃input{}中將“width:350px；”改為“width:400px；”，如圖1－57所示。（11）輸入?yún)^(qū)域?qū)挾仍鲩L了，覆蓋了右側(cè)的圖標(biāo)，如圖1－58所示。（12）在＃input{}中刪除“background－color:＃f0f；”屬性，如圖1－59所示。（13）輸入?yún)^(qū)域去除了背景色，右側(cè)圖標(biāo)又可見了，如圖1－60所示。（14）在＃box{}中刪除“border:1pxsolidred；”屬性，如圖1－61所示。（15）去除了＃box的邊框，如圖1－62所示。（16）在<style>標(biāo)簽中設(shè)置＃input:focus{outline:none；border:1pxsolidblue；}屬性，如圖1－63所示。（17）輸入?yún)^(qū)域獲得焦點(diǎn)時，顯示另一種顏色的邊框，如圖1－47所示。任務(wù)6

選項(xiàng)卡完成選項(xiàng)卡的功能設(shè)計(jì)，如圖1－64所示。（1）創(chuàng)建3個選項(xiàng)，橫向排列，每個選項(xiàng)卡設(shè)有邊框、背景色、文本內(nèi)容。（2）鼠標(biāo)移動至當(dāng)前選項(xiàng)卡上面時，鼠標(biāo)指針呈手形，當(dāng)前選項(xiàng)卡文字粗體顯示，在選項(xiàng)卡下方顯示對應(yīng)的選項(xiàng)內(nèi)容。任務(wù)描述（1）新建index.htｍl文件，在<body>標(biāo)簽內(nèi)創(chuàng)建<divid＝"csstabs"></div>標(biāo)簽，在<style>標(biāo)簽內(nèi)設(shè)置＃csstabs{position:relative；width:600px；height:300px；background－color:＃0f9；}屬性，如圖1－65所示。（2）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，網(wǎng)頁劃分了一個長方形有背景色的區(qū)域，如圖1－66所示。實(shí)現(xiàn)步驟（3）在<divid＝"csstabs"></div>標(biāo)簽內(nèi)添加<divid＝"tab1">、<divid＝"tab2">、<divid＝"tab3">等3個標(biāo)簽，分別在3個標(biāo)簽中添加<h3class＝"tabhead">標(biāo)簽，設(shè)置不同的顯示文本，如圖1－67所示。（4）在瀏覽器運(yùn)行的網(wǎng)頁效果，有三個標(biāo)題，如圖1－68所示。（5）在<style>標(biāo)簽內(nèi)設(shè)置.tabhead{font－weight:norｍal；height:30px；width:140px；lineheight:30px；border:1pxsolid＃000；border－width:1px1px0；background:＃fff；cursor:pointer；}，如圖1－69所示。（6）瀏覽網(wǎng)頁效果，3個標(biāo)題設(shè)置了樣式，下邊框沒有設(shè)置，如圖1－70所示。（7）在.tabhead{}中添加“position:absolute；”屬性，對所有類名為tabhead的元素設(shè)屬絕對定位屬性，如圖1－71所示。（8）瀏覽網(wǎng)頁效果，3個標(biāo)題重疊了，只看到第三個標(biāo)題，如圖1－72所示。（9）在<style>標(biāo)簽中添加＃tab1.tabhead{z－index:3；}、＃tab2.tabhead{left:155px；z－index:1；}、＃tab3.tabhead{left:310px；z－index:1；}，如圖1－73所示。（10）瀏覽網(wǎng)頁效果，3個標(biāo)題left屬性不相同，不再重疊了，如圖1－74所示。（11）在<style>標(biāo)簽中添加＃tab1:hoverh3，＃tab2:hoverh3，＃tab3:hoverh3{z－index:4；fontweight:bold；}，如圖1－75所示。（12）瀏覽網(wǎng)頁效果，鼠標(biāo)指針移到標(biāo)題時，標(biāo)題的字體顯示為粗體，如圖1－76所示。（13）在<body>標(biāo)簽中每個<h3>標(biāo)簽下方都添加<divclass＝"tabcontent">標(biāo)簽，并顯示對應(yīng)的文本內(nèi)容，如圖1－77所示。（14）瀏覽網(wǎng)頁效果，<divclass＝"tabcontent">標(biāo)簽的內(nèi)容影響了其他頁面內(nèi)容，如圖1－78所示。（15）在<style>標(biāo)簽中添加.tabcontent{background:＃fff；border:1pxsolid＃000；width:100％；height:50px；}，如圖1－79所示。（16）瀏覽網(wǎng)頁效果，<divclass＝"tabcontent">標(biāo)簽的內(nèi)容設(shè)置了邊框，還存在影響其他頁面內(nèi)容的不足，如圖1－80所示。（17）在.tabcontent{}中添加“position:absolute；top:248px；left:0；”屬性，如圖1－81所示。（18）瀏覽網(wǎng)頁效果，<divclass＝"tabcontent">標(biāo)簽設(shè)置絕對定位，顯示于距頂部248px、距左側(cè)0的位置，如圖1－82所示。（19）在.tabcontent{}中添加“opacity:0；”屬性，設(shè)置了完全透明（不可見）的屬性值，如圖1－83所示。（20）瀏覽網(wǎng)頁效果，<divclass＝"tabcontent">標(biāo)簽完全透明不可見，如圖1－84所示。（21）在<style>標(biāo)簽中添加＃tab1.tabcontent{z－index:2；opacity:1；}，設(shè)置tab1標(biāo)題內(nèi)的tabcontent元素的堆疊順序?yàn)?，透明度為1，即正?？梢姡鐖D1－85所示。（22）瀏覽網(wǎng)頁效果，第一個標(biāo)題的內(nèi)容可見了，如圖1－86所示。（23）在<style>標(biāo)簽中添加＃tab1:hover.tabcontent，＃tab2:hover.tabcontent，＃tab3:hover.tabcontent{z－index:3；opacity:1；}，如圖1－86所示。（24）瀏覽網(wǎng)頁效果，鼠標(biāo)移到標(biāo)題上時，標(biāo)題對應(yīng)的內(nèi)容可見了，如圖1－88所示。（25）在<style>標(biāo)簽中編輯.tabcontent{}的內(nèi)容，將height和top屬性修改為“height:350；top:48px；”，如圖1－89所示。.任務(wù)7

我的導(dǎo)航完成“我的導(dǎo)航”的設(shè)計(jì)，如圖1－90所示。（1）創(chuàng)建標(biāo)題“我的導(dǎo)航”。（2）創(chuàng)建導(dǎo)航內(nèi)容區(qū)域，外設(shè)邊框。（3）顯示多個導(dǎo)航內(nèi)容，導(dǎo)航內(nèi)容包括圖標(biāo)和文本，單擊導(dǎo)航內(nèi)容可以打開目標(biāo)網(wǎng)站。（4）圖標(biāo)樣式四角弧形，文本左右居中、垂直居中，字體白色、背景色適當(dāng)；右側(cè)顯示導(dǎo)航目標(biāo)的網(wǎng)站提示文本，垂直居中，背景色適當(dāng)。任務(wù)描述（1）新建index.htｍl文件，在<body>標(biāo)簽內(nèi)創(chuàng)建<h2>標(biāo)簽，創(chuàng)建<divid＝"box">標(biāo)簽，在<divid＝"box">標(biāo)簽內(nèi)再創(chuàng)建若干個<a>標(biāo)簽，設(shè)置合適的標(biāo)簽內(nèi)容，如圖1－91所示。（2）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，如圖1－92所示。（3）在<style>標(biāo)簽中創(chuàng)建＃box{display:flex；flex－wrap:wrap；width:650px；border:1pxsolid＃000；}，如圖1－93所示。實(shí)現(xiàn)步驟（4）在瀏覽器觀察運(yùn)行的網(wǎng)頁效果，內(nèi)容顯示在指定寬度的區(qū)域邊框內(nèi)，如圖1－94所示。（5）創(chuàng)建.iteｍ{width:200px；height:40px；ｍargin:5px；}，如圖1－95所示。（6）瀏覽網(wǎng)頁效果，iteｍ元素內(nèi)容之間設(shè)有距離，如圖1－96所示。（7）設(shè)置i{width:40px；height:40px；line－h(huán)eight:40px；background－color:green；display:inline－block；float:left；ｍargin－right:5px；text－align:center；color:white；font－style:norｍal；border－radius:10px；}等樣式屬性，如圖1－97所示。（8）瀏覽網(wǎng)頁效果，i元素設(shè)有指定樣式，如圖1－98所示。（9）設(shè)置span{height:40px；line－h(huán)eight:40px；background:yellow；}樣式屬性，如圖1－99所示。（10）瀏覽網(wǎng)頁，span元素內(nèi)的文本垂直居中，如圖1－90所示。項(xiàng)目總結(jié)本項(xiàng)目以搜索網(wǎng)站的首頁為學(xué)習(xí)內(nèi)容，完成了頂部導(dǎo)航菜單、居中的logo、圖標(biāo)的絕對定位、圖文同行排列、“百度一下”輸入框、選項(xiàng)卡、我的導(dǎo)航等設(shè)計(jì)任務(wù)。在任務(wù)制作過程中，講述了<style>、<body>、<div>、<iｍg>、<a>、<ul>、<li>、<h2>、<h3>、<i>、<span>等標(biāo)簽的應(yīng)用，講述了標(biāo)簽屬性設(shè)置、選擇器應(yīng)用、樣式屬性設(shè)置等專業(yè)技能，實(shí)現(xiàn)了任務(wù)指定的設(shè)計(jì)要求，講述了寬度、高度、居中、背景色、前景色、絕對定位等應(yīng)用技巧。項(xiàng)目2

公司網(wǎng)站項(xiàng)目項(xiàng)目概述本項(xiàng)目完成一個電子公司網(wǎng)站的首頁部分內(nèi)容設(shè)計(jì)，實(shí)現(xiàn)網(wǎng)頁的布局。應(yīng)用<div>、<ul>、<li>、<iｍg>、<span>等標(biāo)簽完成公司網(wǎng)站常見效果的設(shè)計(jì)，學(xué)習(xí)過程中，注重提高應(yīng)用的有效性，講解<style>標(biāo)簽中多種屬性的設(shè)計(jì)技能。本項(xiàng)目開發(fā)的基本任務(wù)包括頁面布局、頂部logo、圖像背景的導(dǎo)航、產(chǎn)品分類、產(chǎn)品展示、業(yè)務(wù)咨詢信息、底部版權(quán)信息等，如圖2－1所示。知識準(zhǔn)備1.<style>標(biāo)簽2.<ul>標(biāo)簽3.彈性布局（display:flex）任務(wù)1

頁面布局完成頁面的布局設(shè)計(jì)，如圖2－2所示。（1）創(chuàng)建網(wǎng)頁文件index.htｍl。（2）分析項(xiàng)目網(wǎng)頁效果，把頁面從上到下劃分為4行，各行寬度相同，居中于網(wǎng)頁，設(shè)置適當(dāng)?shù)谋尘啊＃?）第一行位于網(wǎng)頁頂部，將用于顯示公司logo圖像等信息；第二行顯示導(dǎo)航菜單，向上嵌入第一行下方10px，設(shè)有背景圖，邊框左上角、右上角設(shè)為圓角；第三行包括左、中、右3欄，高度將由顯示內(nèi)容的多少決定，左欄將用于顯示產(chǎn)品分類，中欄將用于產(chǎn)品展示，右欄將用于顯示業(yè)務(wù)咨詢信息；最后一行位于網(wǎng)頁底部，將用于顯示版權(quán)或備案信息。任務(wù)描述（1）創(chuàng)建index.htｍl，在<body>標(biāo)簽中創(chuàng)建<div><divclass＝"top"></div><ulclass＝"topul"></ul></div>等標(biāo)簽，如圖2－3所示。（2）創(chuàng)建<style>標(biāo)簽，設(shè)置.top{background－color:＃184580；height:90px；width:600px；ｍar￣gin:0auto；}樣式屬性，如圖2－4所示。實(shí)現(xiàn)步驟（3）瀏覽網(wǎng)頁，頂部區(qū)域設(shè)有背景色且居中于頁面，如圖2－5所示。（4）在<style>標(biāo)簽中設(shè)置.topul{width:600px；height:40px；background:url（"iｍages/iｍgback.png"）；border－radius:15px15px00；ｍargin:－10pxauto；}樣式屬性，如圖2－6所示。（5）瀏覽網(wǎng)頁，設(shè)有背景圖的第二區(qū)域居中于頁面，如圖2－7所示。（6）在<style>標(biāo)簽中輸入?{ｍargin:0；padding:0；}，如圖2－8所示。（7）瀏覽網(wǎng)頁效果，如圖2－9所示。（8）在<body>標(biāo)簽內(nèi)創(chuàng)建<divclass＝"ｍain"></div>標(biāo)簽，在其中創(chuàng)建3個<divclass＝"content"></div>標(biāo)簽，如圖2－10所示。（9）在<style>標(biāo)簽內(nèi)設(shè)置content{height:100px；}content:nth－child（1）{width:25％；back￣ground:green；}content:nth－child（2）{width:50％；background:yellow；}content:nth－child（3）{width:25％；background:green；}屬性，如圖2－11所示。（10）瀏覽網(wǎng)頁效果，如圖2－12所示。（11）在<style>標(biāo)簽內(nèi)設(shè)置.ｍain{width:600px；ｍargin:0auto；display:flex；}樣式屬性，如圖2－13所示。（12）瀏覽網(wǎng)頁效果，如圖2－14所示。（13）在<body>標(biāo)簽內(nèi)創(chuàng)建<divclass＝"foot"></div>標(biāo)簽，如圖2－15所示。（14）在<style>標(biāo)簽內(nèi)設(shè)置.foot{height:100px；width:600px；background－color:＃11f6f9；ｍargin:0auto；}樣式屬性，如圖2－16所示。（15）瀏覽網(wǎng)頁效果，如圖2－2所示。任務(wù)2

頂部logo設(shè)計(jì)頂部logo內(nèi)容的顯示效果，如圖2－17所示（1）在頁面頂部劃分一個長方形區(qū)域，設(shè)置適當(dāng)?shù)谋尘吧?。?）左側(cè)適當(dāng)位置顯示公司logo，logo四周設(shè)置外邊距。（3）右下角顯示電話圖標(biāo)，在圖標(biāo)右側(cè)顯示電話文本，文本設(shè)置適當(dāng)?shù)念伾?。任?wù)描述（1）在<body>標(biāo)簽內(nèi)創(chuàng)建<divclass＝"top"></div>標(biāo)簽，在<style>標(biāo)簽內(nèi)設(shè)置.top{background－color:＃184580；height:90px；width:600px；ｍargin:0auto；position:relative；}樣式屬性，如圖2－18所示。（2）瀏覽網(wǎng)頁效果，如圖2－19所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽內(nèi)設(shè)置?{ｍargin:0；padding:0；}屬性，如圖2－20所示。（4）瀏覽網(wǎng)頁效果，如圖2－21所示。（5）添加<iｍgsrc＝"iｍages/logo3.png"class＝"logo"alt＝"">標(biāo)簽，設(shè)置.top.logo{width:60px；height:60px；ｍargin－top:10px；ｍargin－left:60px；}樣式屬性，如圖2－22所示。（6）瀏覽網(wǎng)頁效果，logo圖像正常顯示，如圖2－23所示。（7）添加<divclass＝"tele"><iｍgsrc＝"iｍages/tele.png"alt＝""><span>1234567890</span></div>等標(biāo)簽，設(shè)置.tele{position:absolute；right:10px；top:50px；color:white；}和teleiｍg{width:20px；height:20px；}樣式屬性，如圖2－24所示。（8）瀏覽網(wǎng)頁效果，電話內(nèi)容正常顯示，如圖2－17所示。任務(wù)3

圖像背景的導(dǎo)航完成圖像背景的導(dǎo)航效果的設(shè)計(jì)，如圖2－25所示。（1）在頁面頂部設(shè)置一個區(qū)域，設(shè)置背景色，設(shè)置適當(dāng)?shù)膶挾群透叨?。?）創(chuàng)建菜單欄，設(shè)置背景圖。（3）設(shè)置“首頁”“公司簡介”“產(chǎn)品中心”等菜單項(xiàng)。任務(wù)描述（1）打開網(wǎng)站文件夾，創(chuàng)建iｍages文件夾，把圖像文件復(fù)制到iｍages文件中；在<body>標(biāo)簽中創(chuàng)建<divclass＝"top">標(biāo)簽，在<style>標(biāo)簽中設(shè)置?{ｍargin:0；padding:－color:＃8895f0；ｍargin:0pxauto；}樣式屬性，如圖2－26所示。（2）瀏覽網(wǎng)頁效果，如圖2－27所示。實(shí)現(xiàn)步驟（3）在<body>標(biāo)簽中創(chuàng)建<ulclass＝"topul">標(biāo)簽，在其中創(chuàng)建<li>首頁</li>、<li>公司簡介</li>等標(biāo)簽，如圖2－28所示。（4）瀏覽網(wǎng)頁效果，如圖2－29所示。（5）在<style>標(biāo)簽中輸入ul{list－style:none；}，設(shè)置列表項(xiàng)目樣式為不使用項(xiàng)目符號；設(shè)置.topul{position:relative；width:600px；display:flex；justify－content:space－around；color:white；height:40px；line－h(huán)eight:40px；background:url（"iｍages/iｍgback.png"）；border－radius:15px15px00；ｍargin:－10pxauto；}樣式屬性，如圖2－30所示。任務(wù)4

產(chǎn)品分類完成“產(chǎn)品分類”欄目的定位顯示效果，如圖2－31所示。（1）頁面劃分左、中、右3欄，設(shè)置適當(dāng)背景色、寬度和高度。（2）左側(cè)顯示產(chǎn)品分類內(nèi)容。任務(wù)描述（1）在<body>標(biāo)簽內(nèi)輸入<divclass＝"ｍain"></div>標(biāo)簽，在其中創(chuàng)建3個<divclass＝"content"></div>標(biāo)簽，如圖2－32所示。（2）在<style>標(biāo)簽內(nèi)設(shè)置.ｍain{width:600px；height:320px；background－color:＃f1f6f9；ｍargin:10pxauto；display:flex；border:1pxdashed＃666；}樣式屬性，如圖2－33所示。實(shí)現(xiàn)步驟（3）瀏覽網(wǎng)頁效果，如圖2－34所示。（4）在<style>標(biāo)簽內(nèi)設(shè)置content:nth－child（1）{width:25％；height:100％；}content:nthchild（2）{width:50％；height:100％；background－color:＃8cfdff；}content:nth－child（3）{width:25％；height:100％；}樣式屬性，如圖2－35所示。（5）瀏覽網(wǎng)頁效果，如圖2－36所示。（6）在<body>標(biāo)簽內(nèi)添加<h4>產(chǎn)品分類</h4>標(biāo)簽，添加<ulclass＝"conleftul"></ul>，在<ulclass＝"conleftul"></ul>中添加<li>－電阻</li>、<li>－集成電路</li>等標(biāo)簽，如圖2－37所示。（7）瀏覽網(wǎng)頁效果，如圖2－38所示。（8）在<style>標(biāo)簽內(nèi)設(shè)置h4{color:＃3cb7f6；ｍargin－left:10px；}conleftul{padding－left:20px；padding－right:20px；}conleftulli{ｍargin－top:5px；width:110px；height:25px；border－bottoｍ:1pxdashed＃ccc；padding－left:10px}樣式屬性，如圖2－39所示。（9）瀏覽網(wǎng)頁效果，如圖2－31所示。任務(wù)5

產(chǎn)品展示完成“產(chǎn)品展示”效果設(shè)計(jì)，如圖2－40所示。（1）頁面劃分左、中、右3欄，設(shè)置適當(dāng)背景色、寬度和高度。（2）在中間顯示4個產(chǎn)品圖和產(chǎn)品名稱。任務(wù)描述（1）在<body>標(biāo)簽內(nèi)輸入<divclass＝"ｍain"></div>標(biāo)簽，在其中創(chuàng)建3個<divclass＝"content"></div>標(biāo)簽，如圖2－41所示。（2）在<style>標(biāo)簽內(nèi)設(shè)置.ｍain{width:600px；height:320px；background－color:＃f1f6f9；ｍargin:10pxauto；display:flex；border:1pxdashed＃666；}樣式屬性，設(shè)置content:nth－child（1）{width:25％；height:100％；}content:nth－child（2）{width:50％；height:100％；back￣ground－color:＃8cfdff；}content:nth－child（3）{width:25％；height:100％；}樣式屬性，如圖2－42所示。實(shí)現(xiàn)步驟（3）瀏覽網(wǎng)頁效果，如圖2－43所示。（4）在<body>標(biāo)簽內(nèi)添加<h4>產(chǎn)品分類</h4>標(biāo)簽，添加<ulclass＝"conｍidul"></ul>，在<ulclass＝"conｍidul"></ul>中添加<li><iｍgsrc＝"iｍages/t1.jpg"><span>最新產(chǎn)品</span></li>等標(biāo)簽，如圖2－44所示。（5）在<style>標(biāo)簽內(nèi)設(shè)置conｍidul{display:flex；flex－wrap:wrap；justify－content:space－a￣round；list－style:none；}conｍiduliｍg{width:100px；height:100px；border:2pxsolid＃fc0；display:block；}樣式屬性，如圖2－45所示。（6）瀏覽網(wǎng)頁效果，如圖2－46所示。（7）在<style>標(biāo)簽內(nèi)設(shè)置conｍidulspan{display:block；width:130px；text－align:center；}?{ｍargin:0；padding:0；}樣式屬性，如圖2－47所示。（8）瀏覽網(wǎng)頁效果，如圖2－40所示。任務(wù)6

業(yè)務(wù)咨詢信息完成“業(yè)務(wù)咨詢信息”效果設(shè)計(jì)，如圖2－48所示。（1）頁面劃分左、中、右3欄，設(shè)置適當(dāng)背景色、寬度和高度。（2）在右側(cè)顯示“在線咨詢”“聯(lián)系地址”等業(yè)務(wù)咨詢信息。任務(wù)描述（1）在<body>標(biāo)簽內(nèi)輸入<divclass＝"ｍain"></div>標(biāo)簽，在其中創(chuàng)建3個<divclass＝"content"></div>標(biāo)簽，如圖2－49所示。（2）在第三個<divclass＝"content"></div>標(biāo)簽內(nèi)加一個<ulclass＝"conrightul">標(biāo)簽，標(biāo)簽內(nèi)添加多個<li>標(biāo)簽顯示需要的信息，如圖2－50所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽內(nèi)設(shè)置.ｍain{width:600px；height:320px；background－color:＃f1f6f9；ｍargin:10pxauto；display:flex；border:1pxdashed＃666；}樣式屬性，設(shè)置content:nth－child（1）{width:25％；height:100％；}content:nth－child（2）{width:50％；height:100％；background－color:＃8cfdff；}content:nth－child（3）{width:25％；height:100％；}樣式屬性，如圖2－51所示。（4）瀏覽網(wǎng)頁效果，如圖2－52所示。（5）在<style>標(biāo)簽內(nèi)設(shè)置h4{font－weight:bold；color:＃3cb7f6；ｍargin－left:10px；}.conrightulli{ｍargin－top:20px；}.conrightullispan{display:block；ｍarginleft:10px；}樣式屬性，如圖2－53所示。（6）瀏覽網(wǎng)頁效果，如圖2－48所示。任務(wù)7

底部版權(quán)信息完成“底部版權(quán)信息”展示效果設(shè)計(jì)，如圖2－54所示。（1）采用項(xiàng)目列表的形式展示一些版權(quán)信息或其他備案相關(guān)信息。（2）每項(xiàng)信息前設(shè)置項(xiàng)目符號。（3）所有信息上方設(shè)置一條水平邊框線。任務(wù)描述（1）在<body>標(biāo)簽內(nèi)創(chuàng)建<divclass＝"foot"></div>標(biāo)簽，如圖2－55所示。（2）在<style>標(biāo)簽內(nèi)設(shè)置.foot{padding－top:10px；border－top:1pxsolidblack；display:flex；justify－content:space－around；font－size:12px；}樣式屬性，如圖2－56所示。實(shí)現(xiàn)步驟（3）瀏覽網(wǎng)頁效果，如圖2－57所示。（4）在<divclass＝"foot"></div>標(biāo)簽中用多個<ul>標(biāo)簽顯示信息內(nèi)容，如圖2－58所示。（5）在<style>標(biāo)簽內(nèi)設(shè)置.footul{list－style:circle；}樣式屬性，如圖2－59所示。（6）瀏覽網(wǎng)頁效果，如圖2－54所示。項(xiàng)目總結(jié)本項(xiàng)目以實(shí)現(xiàn)一個公司網(wǎng)站首頁的部分效果設(shè)計(jì)為學(xué)習(xí)目標(biāo)，學(xué)習(xí)了網(wǎng)頁布局、頂部logo、圖像背景的導(dǎo)航、產(chǎn)品分類、產(chǎn)品展示、業(yè)務(wù)咨詢信息、底部版權(quán)信息等任務(wù)的制作。講述了在<body>標(biāo)簽中添加<div>、<iｍg>、<ul>、<li>、<h4>等標(biāo)簽，在<style>標(biāo)簽中應(yīng)用padding、padding－left、padding－right、border－top、border－bottoｍ、display、justify－content、ｍargin、ｍargin－top、nth－child等屬性的方法。項(xiàng)目3

學(xué)校網(wǎng)站項(xiàng)目項(xiàng)目概述本項(xiàng)目根據(jù)學(xué)校網(wǎng)站的常見功能，整理了一些任務(wù)，包括漸變色文本、滾動公告、校園風(fēng)采、學(xué)校簡訊、校訊簡報(bào)、輪播特效、輪播指示點(diǎn)、圖片輪播等方面的應(yīng)用。知識準(zhǔn)備1.overflow2.aniｍation3.＠keyfraｍes任務(wù)1

漸變色文本完成學(xué)校網(wǎng)站中登錄信息和校名的效果設(shè)計(jì)，如圖3－1所示。（1）實(shí)現(xiàn)用戶名、密碼和登錄、收藏本站的內(nèi)容設(shè)計(jì)；背景設(shè)置漸變色效果，高度適當(dāng)。（2）學(xué)校名字實(shí)現(xiàn)漸變色文本效果。（3）欄目高度適當(dāng)，設(shè)置背景色為漸變色。任務(wù)描述（1）在<body>中添加<divclass＝"top">標(biāo)簽，在標(biāo)簽內(nèi)根據(jù)需要添加<inputtype＝"text">標(biāo)簽、<button>標(biāo)簽和<div>標(biāo)簽，輸入顯示的內(nèi)容，如圖3－2所示。（2）設(shè)置.top{height:30px；background－iｍage：linear－gradient（＃fefefe，＃e3f5ff）；display:flex；justify－content:space－between；}input{width:60px；}樣式屬性，如圖3－3所示。（3）瀏覽網(wǎng)頁的效果，如圖3－4所示。實(shí)現(xiàn)步驟（4）添加<divclass＝"logo">標(biāo)簽，在標(biāo)簽內(nèi)添加<span>紅星小學(xué)</span>、<divclass＝"topr">和<iｍgsrc＝""alt＝"">等標(biāo)簽，輸入需要顯示的內(nèi)容，如圖3－5所示。（5）設(shè)置.logo{height:70px；background－iｍage:linear－gradient（＃cdf2ff，＃e3f5ff）；display:flex；justify－content:space－between；}.logospan{font－size:50px；font－weight:bold；back￣ground:linear－gradient（toright，red，blue）；－webkit－background－clip:text；color:transparent；}等樣式屬性，如圖3－6所示。實(shí)現(xiàn)步驟任務(wù)2

滾動公告完成學(xué)校“通知公告”的效果設(shè)計(jì)，如圖3－7所示。（1）設(shè)置通知欄，指定適當(dāng)?shù)拇笮?、邊框大小、邊框顏色與背景色。（2）控制多行通知內(nèi)容，實(shí)現(xiàn)循環(huán)向上滾動的效果。任務(wù)描述（1）在<body>中添加<divclass＝"ｍarｑuee">標(biāo)簽，在標(biāo)簽內(nèi)添加一個<div>標(biāo)簽，在<div>標(biāo)簽內(nèi)添加多個<p>標(biāo)簽顯示多段文本內(nèi)容，如圖3－8所示。（2）在<style>標(biāo)簽中設(shè)置.ｍarｑuee{height:150px；width:200px；background－color:＃ccc；boxshadow:10px10px5px＃888；position:relative；ｍargin－top:20px；overflow:hidden；padding:25px；border:10pxsolid＃0ff；}樣式屬性，如圖3－9所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽中設(shè)置.ｍarｑueediv{display:block；width:200px；text－align:center；position:absolute；aniｍation:ｍarｑuee15slinearinfinite；background－color:＃eee；}樣式屬性，如圖3－10所示。（4）在<style>標(biāo)簽中設(shè)置＠keyfraｍesｍarｑuee{0％{transforｍ:translatey（150px）；}100％{transforｍ:translatey（－350px）；}}樣式屬性，如圖3－11所示。任務(wù)3

校園風(fēng)采完成“校園風(fēng)采”的效果設(shè)計(jì)，如圖3－12所示。（1）設(shè)置標(biāo)題欄，指定適當(dāng)?shù)拇笮?、文本前景色與背景色。（2）展示一行4張共兩行的圖像展示。（3）每張圖上顯示序號文本或圖像標(biāo)題。任務(wù)描述（1）在<body>中添加<divclass＝"tit">－－－校園風(fēng)采－－－</div>標(biāo)簽，添加一個<divclass＝"box">標(biāo)簽，在<divclass＝"box">標(biāo)簽內(nèi)添加<divclass＝"viｍg">1</div>、<divclass＝"viｍg">2</div>等8個標(biāo)簽，如圖3－13所示。（2）在<style>標(biāo)簽中設(shè)置.tit{height:40px；background－color:＃88f；color:white；line－h(huán)eight:40px；text－align:center；font－weight:bolder；width:90％；ｍargin:0auto；}樣式屬性，如圖3－14所示。實(shí)現(xiàn)步驟（3）瀏覽網(wǎng)頁的效果，如圖3－15所示。（4）在<style>標(biāo)簽中設(shè)置.box{display:flex；justify－content:space－around；flex－wrap:wrap；width:90％；ｍargin:5pxauto；border－bottoｍ:1pxsolidblack；}樣式屬性，如圖3－16所示。（5）瀏覽網(wǎng)頁的效果，如圖3－17所示。（6）在<style>標(biāo)簽中設(shè)置.box.viｍg{width:22％；height:100px；background－color:＃88f；ｍargin:5px；background:url（"pic1.jpg"）no－repeat；background－size:100％100％；}樣式屬性，如圖3－18所示。（7）瀏覽網(wǎng)頁的效果，如圖3－12所示。任務(wù)4

學(xué)校簡訊完成“學(xué)校簡訊”的效果設(shè)計(jì)，如圖3－19所示。（1）劃分區(qū)域，左上角和右上角為圓角。（2）標(biāo)題欄顯示“學(xué)校簡訊”和“更多”，背景色為漸變色效果。（3）展示多行簡訊內(nèi)容，超過顯示區(qū)域?qū)挾蕊@示“”。（4）每行簡訊內(nèi)容前顯示項(xiàng)目符號。任務(wù)描述（1）在<body>中添加<divclass＝"tit"><span>學(xué)校簡訊</span><span>更多</span></div>標(biāo)簽，添加一個<ul>標(biāo)簽，在<ul>標(biāo)簽內(nèi)添加<li>創(chuàng)美育人，詩意校園，科學(xué)的教學(xué)改革促發(fā)展</li>、<li>創(chuàng)美育人，詩意校園，教學(xué)改革促發(fā)展</li>等6個標(biāo)簽，如圖3－20所示。（2）瀏覽網(wǎng)頁的效果，如圖3－21所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽中設(shè)置?{ｍargin:0；padding:0；box－sizing:border－box；padding－left:10px；}樣式屬性，設(shè)置.tit{padding－top:5px；height:40px；width:300px；background－iｍage:linear－gradient（＃f6fdff，＃a6ddf4）；border:1pxsolid＃4ebae9；padding－left:10px；border－radius:10px10px00；position:relative；}樣式屬性，如圖3－22所示。（4）瀏覽網(wǎng)頁的效果，如圖3－23所示。（5）在<style>標(biāo)簽中設(shè)置.titspan:nth－child（1）{padding－left:0；display:inline－block；border－radius:10px10px00；border:1pxsolid＃4ebae9；border－bottoｍ:0；width:100px；height:35px；line－h(huán)eight：35px；text－align:center；background－color：red；background－iｍage：linear－gradient（＃a6ddf4，＃f6fdff）；}樣式屬性，設(shè)置.titspan:nth－child（2）{position:absolute；right:10px；top:15px；}樣式屬性，如圖3－24所示。（6）瀏覽網(wǎng)頁的效果，如圖3－25所示。（7）在<style>標(biāo)簽中設(shè)置ul{border:1pxsolid＃4ebae9；width:300px；list－style－type:sｑuare；list－style－position:inside；}樣式屬性，設(shè)置ulli{width:280px；overflow:hidden；white－space:now￣rap；text－overflow:ellipsis；}樣式屬性，如圖3－26所示。任務(wù)5

校訊簡報(bào)完成“校訊簡報(bào)”的效果設(shè)計(jì)，如圖3－27所示。（1）標(biāo)題欄顯示“校訊簡報(bào)”和“更多”，下邊框線為虛線。（2）“校訊簡報(bào)”背景設(shè)置特殊效果形狀。（3）顯示多行簡訊內(nèi)容，超過顯示區(qū)域?qū)挾蕊@示“”，每行簡訊設(shè)置圓形非黑色項(xiàng)目符號。任務(wù)描述（1）在<body>中添加一個<divclass＝"body"></div>，在<divclass＝"body"></div>中添加<divclass＝"header"><divclass＝"hl"><span>校訊簡報(bào)</span></div><divclass＝"hr">更多</div></div>標(biāo)簽，添加<divclass＝"ul"></div>標(biāo)簽，添加<divclass＝"lis"><h2></h2>書寫經(jīng)典創(chuàng)美育人———紅星初級中學(xué)書法教育活動教育活動</div>等4個標(biāo)簽，如圖3－28所示。實(shí)現(xiàn)步驟（2）在<style>標(biāo)簽中設(shè)置?{ｍargin:0；padding:0；}樣式屬性，設(shè)置.body{ｍargin:10pxauto；height:200px；width:400px；}樣式屬性，如圖3－29所示。（3）在<style>標(biāo)簽中設(shè)置.header{dis￣play：flex；justify－content：space－between；width:95％；height:30px；line－h(huán)eight:30px；border－bottoｍ:1pxdashed＃686868；ｍargin:0auto；}樣式屬性，設(shè)置.hl{height：30px；width：100px；background－color：＃4be158；transforｍ:skew（35deg）；border－radius:7px；text－align:center；}樣式屬性，如圖3－30所示。

（4）在<style>標(biāo)簽中設(shè)置.hlspan{font－size:18px；transforｍ:skew（－35deg）；display:inlineblock；}樣式屬性，設(shè)置.hr{font－size:14px；line－h(huán)eight:40px；}樣式屬性，設(shè)置.ul{width:95％；ｍargin:0auto；font－size:15px；}樣式屬性，如圖3－31所示。（5）在<style>標(biāo)簽中設(shè)置.lis{overflow:hidden；text－overflow:ellipsis；white－space:nowrap；height:28px；line－h(huán)eight:28px；}樣式屬性，設(shè)置h2{width:20px；height:22px；line－h(huán)eight:25px；display:inline－block；color:＃1a95ca；}樣式屬性，如圖3－32所示。（6）瀏覽網(wǎng)頁的效果，如圖3－27所示。任務(wù)6

輪播特效完成“輪播特效”的效果設(shè)計(jì)，如圖3－33所示。（1）劃分一定大小的區(qū)域作為輪播區(qū)，在區(qū)內(nèi)添加3個元素，每個元素設(shè)置不同的背景色和文本內(nèi)容。（2）實(shí)現(xiàn)元素從左向右輪播特效。任務(wù)描述（1）在<body>中添加一個<divclass＝"box"></div>標(biāo)簽，在<divclass＝"box"></div>標(biāo)簽內(nèi)添加一個<ul>標(biāo)簽，在<ul>標(biāo)簽中添加<liclass＝"iteｍ1">1</li>、<liclass＝"iteｍ2">2</li>等4個標(biāo)簽，如圖3－34所示。（2）在<style>標(biāo)簽中設(shè)置?{padding:0；ｍargin:0；}樣式屬性，設(shè)置.box{width:400px；height:160px；background:red；position:relative；ｍargin:0auto；overflow:hidden；}樣式屬性，如圖3－35所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽中設(shè)置ul{width:1600px；list－style:none；display:flex；flex－wrap:nowrap；position:relative；aniｍation:ｍyｍove5sinfinite；}樣式屬性，設(shè)置ulli{width:400px；height:150px；background:green；border:1pxsolidblack；}樣式屬性，如圖3－36所示。（4）在<style>標(biāo)簽中設(shè)置.iteｍ1{background:＃ff0；}.iteｍ2{background:＃0f0；}.iteｍ3{back￣ground:＃6f6；}等樣式屬性，設(shè)置＠keyfraｍesｍyｍove{0％{left:0px；}33％{left:－400px；}66％{left:－800px；}100％{left:－1200px；}}實(shí)現(xiàn)動畫，如圖3－6－5所示。（5）瀏覽網(wǎng)頁的效果，如圖3－33所示。任務(wù)7

輪播指示點(diǎn)完成“輪播指示點(diǎn)”的動畫效果設(shè)計(jì)，如圖3－38所示。（1）在指定區(qū)域內(nèi)容設(shè)置5個元素，元素大小適當(dāng)，序號合理。（2）指示點(diǎn)從最左邊開始，依次向右覆蓋顯示于元素上，實(shí)現(xiàn)指示點(diǎn)的輪播效果。任務(wù)描述（1）在<body>中添加一個<divclass＝"banner"></div>標(biāo)簽，在<divclass＝"banner"></div>標(biāo)簽內(nèi)添加一個<divclass＝"active"></div>標(biāo)簽，添加<divclass＝"nli">1</div>、<divclass＝"nli">2</div>等5個標(biāo)簽，如圖3－39所示。實(shí)現(xiàn)步驟（2）在<style>標(biāo)簽中設(shè)置.banner{width:80％；ｍargin:5pxauto；height:100px；border:5pxsolid＃82f5ff；position:relative；}樣式屬性，設(shè)置.nuｍ－li{position:absolute；top:0；left:0；height:60px；width:300px；display:flex；}樣式屬性，如圖3－40所示。（3）瀏覽網(wǎng)頁的效果，如圖3－41所示。（4）在<style>標(biāo)簽中設(shè)置.nli{background－color:blue；width:60px；height:60px；color:white；text－align:center；line－h(huán)eight:60px；}樣式屬性，設(shè)置.active{width:60px；height:60px；lineheight:60px；background－color:＃ff6600；position:absolute；left:0；aniｍation:lnuｍ8ssttif（1，end）infinite；}樣式屬性，如圖3－42所示。（5）在<style>標(biāo)簽中設(shè)置＠keyfraｍeslnuｍ{0％{left:0px；}20％{left:60px；}40％{left:120px；}60％{left:180px；}80％{left:240px；}100％{left:0px；}樣式屬性，如圖3－43所示。（6）瀏覽網(wǎng)頁的效果，如圖3－38所示。任務(wù)8

圖片輪播完成“圖片輪播”的動畫效果設(shè)計(jì)，如圖3－44所示。（1）劃分一定大小的區(qū)域作為輪播區(qū)，在區(qū)內(nèi)添加多張圖片。（2）實(shí)現(xiàn)圖片從左向右切換的輪播。任務(wù)描述（1）在<body>中添加一個<divclass＝"box"></div>標(biāo)簽，在<divclass＝"box"></div>標(biāo)簽內(nèi)添加一個<ul></ul>標(biāo)簽，在<ul></ul>標(biāo)簽內(nèi)添加<liclass＝"iteｍ"><iｍgsrc＝"iｍages/pic1.jpg"alt＝""></li>等5組標(biāo)簽作為輪播元素，如圖3－45所示。（2）在<style>標(biāo)簽中設(shè)置?{padding:0；ｍargin:0；}樣式屬性，設(shè)置.box{width:200px；height:200px；background:red；position:relative；ｍargin:0auto；overflow:hidden；}樣式屬性，如圖3－46所示。實(shí)現(xiàn)步驟（3）在<style>標(biāo)簽中設(shè)置ul{width:800px；list－style:none；display:flex；flex－wrap:nowrap；po￣sition:relative；aniｍation:ｍyｍove5sinfinite；}樣式屬性，設(shè)置ulli{width:200px；height:200px；background:green；border:1pxsolidblack；}樣式屬性，如圖3－47所示。（4）在<style>標(biāo)簽中設(shè)置.iteｍiｍg{width:100％；height:100％；}樣式屬性，設(shè)置＠keyfraｍesｍyｍove{0％{left:0px；}33％{left:－200px；}66％{left:－400px；}100％{left:－600px；}}，創(chuàng)建動畫，如圖3－48所示。（5）瀏覽網(wǎng)頁的效果，如圖3－44所示。項(xiàng)目總結(jié)本項(xiàng)目在實(shí)現(xiàn)漸變色文本、滾動公告、校園風(fēng)采、學(xué)校簡訊、校訊簡報(bào)、輪播特效、輪播指示點(diǎn)、圖片輪播等方面的應(yīng)用過程，講述了<input>、<p>、<span>、</div>、<ul>、<li>、<iｍg>等標(biāo)簽的應(yīng)用，講述了font－size、linear－gradient、－webkit－background－clip、position、aniｍation、transforｍ、background、background－size、padding－left、border－radius、white－space、overflow、text－overflow等樣式屬性的應(yīng)用。項(xiàng)目4

電商網(wǎng)站項(xiàng)目項(xiàng)目概述本項(xiàng)目根據(jù)電子商務(wù)網(wǎng)站的應(yīng)用特點(diǎn)，整理了一些常見功能任務(wù)。本項(xiàng)目選擇的任務(wù)包括排行標(biāo)志、打折展示、商品滾播、優(yōu)惠券、用戶信息、銷售計(jì)劃進(jìn)度、業(yè)績統(tǒng)計(jì)表、查看大圖、用戶登錄、精選熱點(diǎn)等方面的應(yīng)用。知識準(zhǔn)備1.transforｍ2.text－decoration3.transforｍ－origin任務(wù)1

排行標(biāo)志設(shè)計(jì)一個排行標(biāo)志，如圖4－1所示。（1）標(biāo)志由背景形狀和文字組成。（2）背景形狀包括3部分：左上角的三角形、右下角的三角形、底部的白色三角形；白色三角形層次靠前；各部分顏色適當(dāng)。（3）標(biāo)志文字字體加粗，文本顏色適當(dāng)。任務(wù)描述（1）在<body>中添加<divclass＝"tp">標(biāo)簽，在標(biāo)簽內(nèi)根據(jù)需要添加<divclass＝"tptxt">top</div>標(biāo)簽、<divclass＝"tpnuｍ">01</div>標(biāo)簽和<divclass＝"t3"></div>標(biāo)簽，如圖4－2所示。實(shí)現(xiàn)步驟（2）設(shè)置.tp{ｍargin:10pxauto；width:0px；height:0px；border－style:solid；border－width:50px40px50px40px；border－color:＃fad17e＃f3b639＃f3b639＃fad17e；position:relative；}樣式屬性，設(shè)置.tptxt{color:＃c0860c；font－weight:bold；font－size:30px；position:absolute；left:－30px；top:－45px；}樣式屬性，如圖4－3所示。（3）瀏覽網(wǎng)頁的效果，如圖4－4所示。（4）設(shè)置.tpnuｍ{color:＃fff；font－weight:bold；font－size:30px；position:absolute；left:－15px；top:－15px；}樣式屬性，如圖4－5所示。（5）瀏覽網(wǎng)頁的效果，如圖4－6所示。（6）設(shè)置.t3{border－style:solid；border－width:0px40px30px40px；border－color:transparenttransparentwhitetransparent；width:0px；height:0px；position:absolute；bottoｍ:－50px；left:－40px；}樣式屬性，如圖4－7所示。（7）瀏覽網(wǎng)頁的效果，如圖4所示。任務(wù)2

打折展示實(shí)現(xiàn)商品打折信息的展示，如圖4－8所示。（1）商品信息包括序號、商品圖、商品名稱、原價格、折后的價格。（2）原價格設(shè)置刪除線效果，折后價前景色為紅色，文字加粗。（3）鼠標(biāo)光標(biāo)移動到商品圖上，商品信息邊框?yàn)榧t色。任務(wù)描述（1）在<body>中添加<divclass＝"box"></div>標(biāo)簽；在標(biāo)簽內(nèi)添加多個<divclass＝"gd"></div>標(biāo)簽；在<divclass＝"gd"></div>標(biāo)簽內(nèi)根據(jù)需要添加<span>標(biāo)簽，顯示序號、商品圖、名稱、價格等，如圖4－9所示。（2）設(shè)置?{ｍargin:0；padding:0；box－sizing:border－box；}樣式屬性，設(shè)置.box{display:flex；justify－content:space－between；width:500px；ｍargin:0auto；}樣式屬性，設(shè)置.gd{width:30％；height:200px；padding:025px025px；border:1pxsolid＃ddd；}樣式屬性，如圖4－10所示。實(shí)現(xiàn)步驟（3）設(shè)置.gdiｍg{display:block；width:100％；height:65％；ｍargin:0auto；text－align:center；}樣式屬性，設(shè)置.gdiｍgiｍg{width:100％；height:100％；}樣式屬性，如圖4－11所示。（4）瀏覽網(wǎng)頁的效果，如圖4－12所示。（5）設(shè)置.gdnaｍe{display:block；}樣式屬性，設(shè)置.gdpirce{font－weight:bold；color:red；}樣式屬性，設(shè)置.gdpriceold{text－decoration:line－through；font－size:10px；}樣式屬性，設(shè)置.gd:hover{border:2pxsolidred；}樣式屬性，如圖4－13所示。（6）瀏覽網(wǎng)頁的效果，如圖4－14所示。任務(wù)3

商品滾播實(shí)現(xiàn)商品滾播的效果，如圖4－15所示。（1）頂部設(shè)置“商品滾播”標(biāo)題行。（2）商品信息包括商品圖、標(biāo)題。（3）在信息區(qū)域設(shè)置邊框，在邊框內(nèi)，商品信息從右向左滾動播放，循環(huán)執(zhí)行。任務(wù)描述（1）在<body>中添加<divclass＝"top"><divclass＝"toptxt">商品滾播</div></div>標(biāo)簽作為標(biāo)題；添加一個<divclass＝"box">標(biāo)簽，在<divclass＝"box">標(biāo)簽內(nèi)添加一個<ul>標(biāo)簽，在<ul>標(biāo)簽內(nèi)添加3個<li>標(biāo)簽，在每個<li>標(biāo)簽添加<divclass＝"biｍg">和<divclass＝"btxt">標(biāo)簽，<divclass＝"btxt">標(biāo)簽內(nèi)顯示商品標(biāo)題，在<divclass＝"biｍg">標(biāo)簽內(nèi)添加一個<iｍg>標(biāo)簽用于顯示商品圖，如圖4－16所示。（2）復(fù)制已添加的3個<li>標(biāo)簽，粘貼后，添加到<ul>內(nèi)，如圖4－17所示。實(shí)現(xiàn)步驟（3）設(shè)置?{ｍargin:0；padding:0；}樣式屬性，設(shè)置iｍg{height:100％；width:100％；}樣式屬性，設(shè)置.top{width:400px；height:25px；border－bottoｍ:1pxsolidrgb（56，91，147）；ｍargin:10pxauto；}樣式屬性，設(shè)置.toptxt{background－color:rgb（56，91，147）；width:90px；height:25px；lineheight:25px；font－size:15px；text－align:center；color:white；}樣式屬性，如圖4－18所示。（4）設(shè)置.box{ｍargin:0auto；width:400px；height:220px；border:1pxsolid＃35bdff；position:relative；overflow:hidden；}樣式屬性，設(shè)置.boxul{height:240px；width:1300px；list－style:none；position:absolute；left:0；flex－wrap:nowrap；aniｍation:run6sinfinite；}樣式屬性，如圖4－19所示。（5）設(shè)置.boxli{height:220px；width:200px；ｍargin－top:10px；display:inline－block；}樣式屬性，設(shè)置.biｍg{height:180px；width:200px；}樣式屬性，設(shè)置.btxt{height:40px；width:200px；ｍargin:0auto；text－align:center；line－h(huán)eight:30px；font－size:15px；}樣式屬性，如圖4－20所示。（6）設(shè)置＠keyfraｍesrun{0％{left:0；}100％{left:－610px；}}樣式屬性，實(shí)現(xiàn)動畫效果，如圖4－21所示。任務(wù)4

優(yōu)惠券設(shè)計(jì)一張優(yōu)惠券，如圖4－22所示。（1）底紋由兩部分組成，左上角為五邊形，右下角為三角形，背景色適當(dāng)。（2）左邊框設(shè)置齒形。（3）適當(dāng)?shù)膬?yōu)惠券文本信息。任務(wù)描述（1）在<body>中添加<divclass＝"tick"></div>標(biāo)簽，在<divclass＝"tick"></div>標(biāo)簽內(nèi)，添加<divclass＝"tick1"><span>￥50.00</span></div>標(biāo)簽和<divclass＝"tick2"><span>優(yōu)惠券</span></div>標(biāo)簽，如圖4－23所示。實(shí)現(xiàn)步驟（2）設(shè)置.tick{width:350px；height:150px；position:relative；ｍargin:0auto；overflow:hidden；}樣式屬性，設(shè)置.tick1{width:350px；height:150px；position:absolute；top:0；left:－10px；background:＃f3b639；border－left:20pxdottedwhite；}樣式屬性，如圖4－24所示。（3）瀏覽網(wǎng)頁的效果，如圖4－25所示。（4）設(shè)置.tick2{width：350px；height：150px；position：absolute；top：100px；left：100px；background－color:＃fad17e；transforｍ:rotate（－30deg）；}樣式屬性，如圖4－26所示。（5）設(shè)置.tickspan{displ

溫馨提示

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

評論

0/150

提交評論