響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 習題及答案匯 孫曉娟 ch01 制作 HBuilder百科頁面-ch10 制作物流公司響應(yīng)式網(wǎng)站_第1頁
響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 習題及答案匯 孫曉娟 ch01 制作 HBuilder百科頁面-ch10 制作物流公司響應(yīng)式網(wǎng)站_第2頁
響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 習題及答案匯 孫曉娟 ch01 制作 HBuilder百科頁面-ch10 制作物流公司響應(yīng)式網(wǎng)站_第3頁
響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 習題及答案匯 孫曉娟 ch01 制作 HBuilder百科頁面-ch10 制作物流公司響應(yīng)式網(wǎng)站_第4頁
響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 習題及答案匯 孫曉娟 ch01 制作 HBuilder百科頁面-ch10 制作物流公司響應(yīng)式網(wǎng)站_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目1制作HBuilder百科頁面簡述HTML5。HTML5是HTML的第5代版本，是構(gòu)建及現(xiàn)聯(lián)網(wǎng)內(nèi)容的一種語言方式，是聯(lián)網(wǎng)的核心技術(shù)之一。簡述HTML5的優(yōu)勢?？缙脚_性HTML5顯著的優(yōu)勢在于跨平臺性，用HTML5搭建的站點與應(yīng)用可以PC端與動端Windows與Linux安與i0S。它可以被輕易地植到各種不同的開放平臺、應(yīng)用平臺上。這種強大的兼容性可以顯著地降低開發(fā)與運營成本。(2)增加了新特性特殊內(nèi)容元素。HTML5增加了許多特殊內(nèi)容元素。例如，分組元素、結(jié)構(gòu)元素、內(nèi)容交互元素等，有助于網(wǎng)站開發(fā)人員定義重要的內(nèi)容，其語義化元素增加了代碼的可讀性。智能表單。表單是實現(xiàn)用戶與頁面后臺交萬主要的組成部分，HTML5新增加的表單元素，使得原本需要使用JavaScript來實現(xiàn)的控件，可以直接使用HTMLS的表單來實現(xiàn)，另外，通過HTML5的智能表單屬性標簽也可以實現(xiàn)，如內(nèi)容提示、焦點處理、數(shù)據(jù)驗證等功能。繪圖畫布。HTML5的canvas元素可以實現(xiàn)畫布功能，該元素通過自帶的API結(jié)合JavaScript在網(wǎng)頁上繪制圖形。canvas元素使得瀏覽器無須使用Flash、Silverlight等插件就能直接顯示圖形或動畫圖像。多媒體。HTML5增加了audio元素和video元素來實現(xiàn)對多媒體中的音頻、視頻使用的支持，只要在網(wǎng)頁中嵌入<audio>標記和<video>標記，而無須使用第三方插件(如Flash)就可以實現(xiàn)音頻、視頻的播放。地理定位HTML5引入了Geolocation的API通過GPS或網(wǎng)絡(luò)信息可以實現(xiàn)用戶的定位功能，使定位更加準確、靈活。數(shù)據(jù)存儲HTML5相比傳統(tǒng)的數(shù)據(jù)存儲有自己的存儲方式，允許在客戶端實現(xiàn)較大規(guī)模的數(shù)據(jù)存儲。多線程。HTML5利用WebWorker將Web應(yīng)用程序從原來的單線中解放出來通過創(chuàng)建一個WebWorker對象就可以實現(xiàn)多線操作。(3)化繁為簡HTML5循了“簡單至上”的原則，主要體現(xiàn)在字符集聲明、文檔類型聲明、簡化而強大的HTML5API支持、以瀏覽器原生能力代復(fù)雜的JavaScript代碼方面。簡述如何創(chuàng)建第一個HTML5頁面。HBuilder是DCloud(數(shù)字天堂)推出的一款支持HTML5的Web開發(fā)IDE，是專為前端打造的開發(fā)工具。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder的主體是由Java編寫的，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。快，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提高了HTML、JavaScript、CSS的開發(fā)效率。下面利用HBuilder制作一個簡單的HTML5頁面，具體步驟如下。打開HBuilder，選擇菜單欄中的“文件”一“新建”“We項目”命令，如圖1-2所示打開“創(chuàng)建Web項目”窗口。在“創(chuàng)建Web項目”窗口的“項目名稱”輸入中輸入“第一個HTML5”，并選擇項目存儲的位置，新建名為H5的文件夾，如圖1-3所示。單擊“完成”按在“項管理”中將看到剛剛創(chuàng)的Web項目選擇“第一個HTML5”項目名，在彈出的下拉列表中雙擊“index.html”選項，此時將出現(xiàn)“index.html”的默認代碼如圖1-4所示。在body></body>標記之間添加“這是第一個HTML5頁面”文本如圖1-5所示按Ctrl+S快捷鍵保存頁面。項目2制作化妝品展示列表頁面如何應(yīng)用class選擇器。<!DOCTYPEhtml><html><head><metacharset="UTF-8><title></title><styletype-"text/css>.red{color:#fa0303;</style></head><body><hlclass="red">我是標題標記，我是紅色的。</h1><pclass"red">我是段落標記，我也是紅色的。<p>1z</body>18</html>偽元素選擇器包括和。before選擇器；after選擇器。結(jié)構(gòu)化偽類選擇器包括哪些？結(jié)構(gòu)化偽選擇器是CSS3中新增加的選擇器常用的結(jié)構(gòu)化偽類選擇器包括only-child選擇器、:first-child選擇器、:last-child選擇器、:nth-child(n)選擇器、nth-last-child(n)選擇器、:nth-last-of-type(n)選擇器、:nth-last-of-type(n)選擇器、:target選擇器。項目3制作電商主播排行榜頁面簡述樣式分析。排行背景:通過最外層的大盒子對頁面進行整體控制，需要對其設(shè)置寬度、高度、外邊距、背景、圓角和邊框樣式。排行:使用<div>標記控制排行整體內(nèi)容，需要對其設(shè)置寬度、外邊距、外上邊距、圓角和陰影樣式;使用<h1>標記顯示圖片，需要對其設(shè)置背景、寬度、高度和圓角樣式;使用<0>標記控制有序列表，需要對其設(shè)置內(nèi)左邊距、背景、寬度和圓角樣式;設(shè)置3個列表項<li>標記的寬度、高度、行高、文字大小和多重背景圖像樣式如何制作頁面結(jié)構(gòu)。制作頁面結(jié)構(gòu)，代碼如下。<divclass"container"<divclass-"container-1"><h1></h1><ol><liclass-"center">薇婭viya</li><liclass-"center">李佳琦Austin</li><liclass-"bottom>列兒寶貝</li></ol></div></div>如何定義排行背景的樣式。.container{width:350px;height:350px;margin:20pxauto;background-image:radial-gradient(ellipseatcenter,#f87b00,#fe502d);border-radius:20%border:5pxsolid#e7e4e2;3通過一個大的盒模型對頁面進行整體控制，根據(jù)效果圖片為其添加相應(yīng)的樣式。.container-1fwidth:200px;margin:0pxauto;margin-top:50px;border-radius;20px;box-shadow:10px10px10px#000;由于主播排名部分有陰影、圓角樣式并且位于最外層盒模型的水平居中位置，因此，按照效果圖片為其設(shè)置寬度、外邊距、圓角和陰影樣式。項目4制作家裝行業(yè)產(chǎn)品展示頁面簡述2D轉(zhuǎn)換方法。translate0:平移方法；scale0:縮放方法；skew0:傾斜方法；rotate0:旋轉(zhuǎn)方法；translate0方法。簡述3D轉(zhuǎn)換方法。rotateX（）rotateY（）如何綁定動畫。在@keyframes屬性中定義了動畫之后，必須使用animation屬性對動畫進行捆綁，否則不會產(chǎn)生動畫效果。animation屬性的語法格式如下。animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation·語法格式iteration-countanimation-direction；上述語法格式中，animation-name用于定義要應(yīng)用的動畫名稱，為@keyframes屬性定義的動畫名稱;animation-duration用于定義完成整個動畫效果所需要的時間，以秒或毫秒為單位;animation-timing-function用于定義動畫的速度曲線，與tansition-timig-function相同:animation-delay用于定義執(zhí)行動畫效果之前延遲的時間，即規(guī)定動畫從什么時候開始;animation-iteration-count用于定義動畫播放的次數(shù);animation-direction用于定義當前動畫播放的方向。需要注意的是，使用animation屬性對動畫進行捆綁，同時需要規(guī)定兩項動畫屬性:動畫名稱、動畫的時長。項目5制作旅游網(wǎng)站的導(dǎo)航欄和banner簡述HTML元素。HTML元素分為兩種:塊元素(block)和行內(nèi)元素(inline)塊元素總是獨占一行，能夠設(shè)置其寬度、高度、padding、margin和border屬性，默認寬度是離其最近的父元素寬度的100%。常用的塊有divph1h6ullifo行內(nèi)元素不能獨占一行，要與其他元素在同一行顯示，常用的行內(nèi)元素有span、a、input、strong、em、img等，大多數(shù)行內(nèi)元素的寬度、高度和上/下margin不能設(shè)置。簡述制作導(dǎo)航欄的方法。<nav><ul><li><ahref="#>網(wǎng)站首頁</a></li>sli><ahrcf"#企業(yè)簡介</a>S/li><li><ahref"#”>新聞中心</a></li><li><ahref-"#招標平臺</a></li><li><ahref-"#>聯(lián)系我們</a></li><ul></nav>簡述定義CSS樣式。1.定義全局樣式*{margin:0px;padding:0px;)ulliflist-style-type:none;aftext-decoration:none;/*初始化頁面*//*定義全局樣式，去掉列表前的小黑點*//*定義全局樣式a，下畫線*/2.定義導(dǎo)航欄的樣式navfwidth:S50px;margin:0auto;navulliffloat:lcft;width:110px;height:30px;line-height:30px;text-align:center;background-image:linear-gradient(180deg,#b2d1dc,#346b7e);navulliaffont-size:14px;color:#MfE;font-weight:bolder;letter-spacing:2px;}簡述定義文字描述部分的樣式。#banner-info{width:160px;height:140px;background-color:#a9adac;opacity:0.7;position:absolute:left:50pxtop:25px;#banner-infop{font-family:楷體";font-size:30px;font-weight:bolder,color:#FFFFFF;margin:20px10px;}#banner-infogreen{font-family.”楷體”;font-size:22px;color:#104c06;margin:20px5px;text-align:right;}項目6制作信息注冊頁面簡述表單元素及屬性。常用的表單元素包含label、input、button等。元素描述labellabel元素表對用戶面中個的說明inputinput元素用于為基于Web表單創(chuàng)建交式控件，以便接來自用戶的數(shù)據(jù)buttonbutton元素表示一個可單擊的按鈕，可以用在表單或文檔其他需要使用簡單標準按的地方fieldsetfeldset元素可將表單內(nèi)的相關(guān)元素分組legendlegend元素用于表示它的父元素eldset的內(nèi)容的標題textareatextarea元素表示一個多行純文本編輯控件selectselect元素表示一個控件，提供一個選項列表optionoption用于定義在select或datalist元素中包含的項簡述表單校驗。當用戶訪問一個帶注冊表單的網(wǎng)站時，如果提交的輸入信息不符合預(yù)期格式，則注冊頁面會有一個反饋信息，比如“該字段是必填的”(意思是該字段不能為空)“請?zhí)顚懻_的手機號碼”“請輸入一個合法郵地址”“密碼長度應(yīng)該是6至20位的，且至少包含一個大寫字母及一個數(shù)字”等，這就是表單校驗。表單校驗可以通過多種不同的方式實現(xiàn)。在實踐中，一般都會使用客戶端校驗與服務(wù)器端校驗相結(jié)合的方式，以保證數(shù)據(jù)的正確性與安全性。本書側(cè)重于講解客戶端校驗。客戶端校驗發(fā)生在瀏覽器端，指的是表單數(shù)據(jù)被提交到服務(wù)器之前的校驗，這種方式能實時反債用戶輸入的校驗結(jié)果。這種類型的校驗可以有兩種方式:一種是JavaScript校驗，這是一種可以完全自定義的實現(xiàn)方式;另一種是HTML5內(nèi)置校驗這種方式不需要使用JavaScript，而且性能更好但是不能像JavaScript那樣可自定義。本節(jié)著重講解使用HTMLS內(nèi)置校驗的方式。簡述定義表單校驗的樣式。input:focus;invalid//定義input元素未校驗成功的樣式*/background-color:#fe7e7;}input:valid{}/定義input元素校驗成功的樣式*/border:1pxsolidgreen;}textarea:focus:invalid{/*定義textarea元素未校驗成功的樣式*/background-color:#fe7e7:}textarea:valid/定義textarea元素校驗成功的樣式*/border:1pxsolidgreen;、}項目7制作視頻播放頁面簡述多媒體的格式。1.視頻格式在HTML5中可以入的視頻格式有以下3種。Ogg:帶有Theora視頻編碼和Vorbis音頻編碼的Ogg格式。MPEG4:帶有H.264視頻編碼和AAC音頻編碼的MPEG4格式。WebM:帶有VP8視頻編碼和Vorbis音頻編碼的WebM格式。2.音頻格式在HTML5中可以入的音頻格式有以下3種。Vorbis:類似AAC音頻編碼的另一種免費開源的音頻編碼，用于代MP3的下一代音頻壓縮格式。MP3:一種音頻壓縮格式，用來大幅度地減少音頻數(shù)據(jù)量。WAV:在錄音時使用的標準的Windows文件格式，屬于一種無損的音樂格式。簡述視頻、音頻中的source元素。1.使用source元素添加視頻的語法格式如下。videocontrols-"controls"><sourcesrc="視頻文件地”type-"媒體文件類型/格式><sourcesrc-"視頻文件地址”type-"媒體文件類型/格式>..</video>2.使用source元素添加音頻的語法格式如下<audiocontrols="controls">Ssourcesrc="音頻文件地址”type="媒體文件類型/格式"式><sourcesrc"音頻文件地”type"媒體文件類/格式式>...S/audio>簡述制作視頻放列表的方法。<divclass="videolist"><p>視播放列表:</p><ul><li><ahref-"#news1"><imgsrc-"img/1jpg</a</li><li><ahref-"#news2"<igsrc!ig/2jpg".</a></li><li><ahref-"#news3"-<imgsrc="img/3.jpg/a></li></ul></div>簡述制作視頻播放的方法。<divclass="mn"><divclass-"abc"id-"newsI"><videosrc="video/1mp4"controlsautoplayloop></video></diy><divclass="abc"id-"news2"><videosrc="video/2mp4"controlsautoplayloop2</video>/div><divclass="abc"id-'news3"><videosrc!video/3mp4"controlsautoplayloop></video></div></div>項目8制作垃圾分類頁面簡述什么是視口。視口是指網(wǎng)頁的可視區(qū)域，它定義了瀏覽器能顯示內(nèi)容的屏幕區(qū)域。簡述媒體查詢。使用媒體查詢可以根據(jù)不同的設(shè)備特征應(yīng)用不同的樣式，比如，設(shè)備的寬度、高度、像素比等使頁面在不同終端設(shè)備下達到不同的渲染效果。媒體查詢有兩種方式。第一種是利用link元素添加media屬性的方式。第二種是@media方式，這種方式的HTTP請求少一些，但HTML文件會變大。簡述定義div.garbage-tips部分的樣式。/*定義div.garbage-tips部分的樣式*/garbage-tips{width:100%;clear:both;padding:lem;.tips-title>span{font-weight:500;line-height:24px;font-size:20px;color:#616161;}.feed{clear:both;margin:24px0;}.feed-thumbnail{fwidth:100px;float:left;margin-right:lem;}feed-title!font-size:1.5em;font-weight:bolder:}..feed-textffont-size:1em;..。.-.feed-titlea{text-decoration:none;color:#666;padding-top:1.5em;padding-bottom:1.5em;}.feed-titlea:hover,.feed-titlea:active{text-decoration:underline;}項目9制作個人信息頁面簡述justify-content屬性。justify-content屬性定義了項目在主軸上的對齊方式，也就是說，瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。使用方法如下。.container!{justify-content:flex-startflex-end|center|space-betweenspace-around;}justify-content屬性的默認值為flex-stat，表示左對齊;flex-end表示右對齊center表示居中對齊;space-between表示兩端對齊，即項目之間的間隔都相等;space-around表示每個項目兩側(cè)的間隔相等，即項目之間的間隔比項目與邊框之間的間隔大一倍。下面通過例9-4對justify-content屬性進行講解。簡述align-items屬性。align-items屬性用于定義項目在交叉軸上如何對齊align-items屬性將所有直接子節(jié)點上的align-self屬性的屬性值設(shè)置為一組，align-self屬性用于置項在其包含塊中直方向上的對齊方式align-items屬性的使用方法如下。Container{align-items:flex-start!flex-end!center!baselinestretch;}簡述align-self屬性。align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可蓋align-items屬性。該屬性的默認值為auto，表示繼承父元素的aigu-items屬性，如果沒有父元素，則等同于stretch。其使用方法如下。item{align-self:autoflex-startflex-endcenterlbaseline|stretch;}注意:float、clear和vertical-align屬性對伸縮項目沒有作用。項目10制作物流公司響應(yīng)式網(wǎng)站簡述頁面結(jié)構(gòu)搭建的內(nèi)容。完成視口的配置；完成自定義的CSS文件(index-styleess)和JavaScript文件(jquery.minjs)的引入；完成頁面中模塊的分配，即最外層的盒子。簡述導(dǎo)航欄的頁面結(jié)構(gòu)的代碼。1.在indexhtml文件中添加如下代碼<!-導(dǎo)-><nav><divclass-"container"><inputtype="checkbox"id="togglebox"/>Sulliclass="onc"><ahref"indexhtml>網(wǎng)站首頁</a></li><li>關(guān)于我們</li><li>服務(wù)案例</li><li><ahref="indexhtml>新聞中心</a></li><li><ahref"indexhtml>聯(lián)系我們</a></li></ul><labelclass="mcnu"for-"togglebox"><imgsrc="img/iconpng"></label></div>2314</nav>上述代碼中的第4行和第12行用于實現(xiàn)當網(wǎng)頁在Pad上顯示時，原導(dǎo)航欄消失顯示漢堡菜單。在index-stylecss文件中添加如下樣式代碼。/導(dǎo)航欄的樣式*/nav{position:relative;z-index:999;padding:15px0%;navli(display:inline-block;margin-left:30px;margin-right:30px;navullia(color:gray;font-size:lrem,navuloneafcolor:#1E50AEfont-weight:800navullia:hoverfcolor:#1E50AE;navinput[type-'checkbox"]menufposition:absolute;right:2%top:Opx;display:none;*當屏幕寬度小于或等于768px時，導(dǎo)航欄的樣式*/@mediaonlyscreenand(max-width:768px)logo.c-rightidisplay:none;)menufdisplay:block;cursor:pointer;menuimg(max-width:100%navulfdisplay:none;navinput[type="checkbox"]:checked-ul[display:block;navullifwidth:100%;display:inline-block;text-align:center;margin:10px0px;/*當屏幕寬度小于或等于480px時，導(dǎo)航欄

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論