HTML5 CSS3Web前端開發(fā)技術(shù)（任務(wù)式）（微課版）（第2版） 課件全套 于麗娜 單元1-12 搭建項目開發(fā)環(huán)境 - 使用 CSS3 媒體查詢實現(xiàn)頁面響應(yīng)式布局

安裝Chrome瀏覽器01任務(wù)要求完成Chrome瀏覽器的安裝修改默認搜索引擎為百度搜索設(shè)置Chrome瀏覽器為默認瀏覽器任務(wù)實施1.下載Chrome2.在線安裝Chrome3.修改默認搜索引擎4.修改默認瀏覽器安裝HBuilderX

IDE02任務(wù)要求完成HBuilderX

IDE的安裝任務(wù)實施下載HBuilderXWindows標準版解壓HBuilderX到指定目錄設(shè)置HBuilderX.exe兼容性為以管理員身份運行將HBuilderX.exe固定到任務(wù)欄使用HBuilderX03任務(wù)要求在HBuilder工具中創(chuàng)建新云課堂項目目錄編寫測試內(nèi)容頁面內(nèi)容使用內(nèi)置瀏覽器插件預(yù)覽，驗證環(huán)境是否搭建成功。任務(wù)實施運行HBuilderX創(chuàng)建項目創(chuàng)建目錄創(chuàng)建index.html編寫測試頁面內(nèi)容，保存文件在瀏覽器中運行安裝內(nèi)置瀏覽器插件并在插件中運行制作頁面通用尾部1任務(wù)要求使用基礎(chǔ)HTML標簽制制作頁面通用尾部內(nèi)容如圖使用p標簽作為段落，將內(nèi)容分為三段，公司信息、圖標logo、版權(quán)說明公司信息段落中使用<br/>標簽換行，使用超鏈接設(shè)定電話與郵箱。在版權(quán)信息中，用超鏈接設(shè)定公司超鏈接字體大小樣式使用默認設(shè)置即可任務(wù)實施使用footer標簽作為頁面通用尾部的內(nèi)容包裹層使用p標簽作為每行的劃分，并在該標簽的內(nèi)容中填寫對應(yīng)的文字文本、a標簽鏈接、圖片內(nèi)容將圖片素材放置當(dāng)前項目的src/images文件夾下，并設(shè)定img標簽的src屬性使用實體字符完成版權(quán)符號制作頁面通用尾部1任務(wù)要求使用基礎(chǔ)HTML標簽制制作頁面通用尾部內(nèi)容如圖使用p標簽作為段落，將內(nèi)容分為三段，公司信息、圖標logo、版權(quán)說明公司信息段落中使用<br/>標簽換行，使用超鏈接設(shè)定電話與郵箱。在版權(quán)信息中，用超鏈接設(shè)定公司超鏈接字體大小樣式使用默認設(shè)置即可任務(wù)實施使用footer標簽作為頁面通用尾部的內(nèi)容包裹層使用p標簽作為每行的劃分，并在該標簽的內(nèi)容中填寫對應(yīng)的文字文本、a標簽鏈接、圖片內(nèi)容將圖片素材放置當(dāng)前項目的src/images文件夾下，并設(shè)定img標簽的src屬性使用實體字符完成版權(quán)符號制作課程說明頁面3任務(wù)要求使用基礎(chǔ)HTML標簽制作課程說明頁面內(nèi)容，效果如下圖：使用p或div標簽作為段落，將內(nèi)容分為兩段：標題信息和圖文內(nèi)容。字體大小樣式使用默認設(shè)置即可，其中圖片寬度為500像素。完成課程說明頁面內(nèi)容后，將之前的通用頁頭，頁尾內(nèi)容在當(dāng)前頁中，合并為一個完整頁面。任務(wù)實施使用section標簽作為頁面通用尾部的內(nèi)容包裹層使用hr進行性區(qū)域劃分，填寫對應(yīng)的文字文本、a標簽鏈接、圖片內(nèi)容將圖片素材放置當(dāng)前項目的images文件夾下，并設(shè)定img標簽的src屬性制作課程視頻列表1任務(wù)要求使用a、p、ol、li元素實現(xiàn)如圖所示的課程列表使用h4元素生成課程標題。任務(wù)實施使用h4標簽生成標題。使用ol與li生成有序列表。列表中的li內(nèi)使用a元素表示鏈接，鏈接目標使用#表示即可。制作課程推薦列表2任務(wù)要求使用h2、a、img、p、ul、li標簽實現(xiàn)如圖所示的課程推薦列表圖片寬度均為400px，高度自適應(yīng)任務(wù)實施將相關(guān)圖片放置項目根目錄的src/imges路徑下使用一個div元素包裹ul、li組成的三個排行結(jié)構(gòu)在li中用a元素包裹img與p元素補充img元素的寬高與資源地址補充p元素中的文本內(nèi)容制作課程資源表格3任務(wù)要求按照圖片內(nèi)容，使用表格制作課程資料表格整體，設(shè)定邊框?qū)挾葹?使用caption元素制作表格標題使用tr、td、th構(gòu)成5行3列的表格主體名稱，類型，獲取文字加粗，水平居中下載與跳轉(zhuǎn)使用鏈接實現(xiàn)任務(wù)實施劃分表格結(jié)構(gòu)表格標題、表格頭部、表格主體三部分完成標題內(nèi)容在表格頭部使用tr、th完成單行三列的單元格排列在表格主體使用tr、td完成四行三列的單元格排列依次進行對應(yīng)單元格跨列合并，并刪除多余單元格制作課程播放區(qū)域4任務(wù)要求完成課程頁面的播放區(qū)域，如下圖使用h2制作標題內(nèi)容視頻寬度900像素，高度400像素增加視頻封面視頻顯示控制面板任務(wù)實施在頁面合適位置添加video元素設(shè)定video元素的封面設(shè)定video元素的控件為顯示狀態(tài)，寬度為900像素，高度為400像素。制作信息登記頁面1任務(wù)要求按照圖片效果完成個人信息登記頁面提交按鈕使用input元素完成表單控件進行l(wèi)abel包裹部分控件需要做驗證任務(wù)實施使用form元素并設(shè)定method與action屬性添加各個表單控件制作用戶登錄頁面2任務(wù)要求按照圖片效果完成登錄表單登錄按鈕使用input元素完成為用戶名，密碼和表單控件進行l(wèi)abel包裹使用復(fù)選框制作自動登錄選項使用圖片按鈕制作提交按鈕任務(wù)實施使用form元素并設(shè)定method與action屬性添加文本輸入框添加密碼輸入框添加登錄按鈕制作用戶注冊頁面3任務(wù)要求按照圖片效果完成注冊表單注冊按鈕使用input元素完成為用戶名，密碼和表單控件進行l(wèi)abel包裹對應(yīng)輸入框中添加對應(yīng)文本預(yù)占位提示內(nèi)容添加驗證條件，賬戶、密碼、確認密碼為必填添加驗證條件，賬戶驗證為手機號格式，正則表達式為^1[3456789]\d{9}$添加驗證條件，賬戶驗證為密碼格式，正則表達式^[a-z0-9_-]{6,18}$任務(wù)實施在項目根目錄中創(chuàng)建生成reg.html使用form元素并設(shè)定method與action屬性，action為空，method為POST方式添加文本輸入框添加密碼輸入框添加確認密碼輸入框添加注冊按鈕添加對應(yīng)輸入框的required與pattern屬性美化課程說明頁面1任務(wù)要求按照提供的HTML代碼與參考效果進行頁面美化所有標簽元素清除內(nèi)外邊距主標題字體大小20磅副標題字體大小14磅，顏色#333333課程難度、課程時長、課程講師對應(yīng)內(nèi)容字體大小10磅課程教師部分內(nèi)容字體顏色白色、背景色為orange進入按鈕，設(shè)置字體白色，字體大小30pt，背景色為orange，并且去除下劃線。簡介段落首行縮進兩個字的寬度設(shè)定圖片寬度為400像素任務(wù)實施根據(jù)要求使用通配符選擇器、標簽選擇器、層次選擇器、結(jié)構(gòu)偽類選擇器等進行元素的選取，并進行相應(yīng)樣式效果的設(shè)定。美化課程播放頁面2任務(wù)要求將已有的播放器部分代碼、資源表格部分代碼、視頻列表部分代碼進行整合所有標簽元素清除內(nèi)外邊距播放器設(shè)置寬度為800像素，高度根據(jù)視頻資源自動適配資料表格設(shè)置寬度為800像素，標題居中，外邊框為直線，黑色，寬度2像素；表頭部分背景色#aaa,主體部分奇數(shù)列背景色#ccc，偶數(shù)列背景色#eee，表格內(nèi)的超鏈接字體加粗視頻列表設(shè)置寬度800像素，標題居中，播放中的是鏈接設(shè)置字體顏色為red并顯示下劃線，其他鏈接字體顏色為orange,無下劃線參考效果圖任務(wù)實施將已有的播放器部分代碼、資源表格部分代碼、視頻列表部分代碼進行整合為一個HTML文件，并通過外部樣式方式引入css文件。根據(jù)要求使用通配符選擇器、標簽選擇器、層次選擇器、結(jié)構(gòu)偽類選擇器等進行元素的選取，并進行相應(yīng)樣式效果的設(shè)定。美化頁面通用尾部1任務(wù)要求按照效果圖在已有的HTML文件基礎(chǔ)上，實現(xiàn)如下效果：使用<footer></footer>包裹整體要求實現(xiàn)版心寬度1080像素并水平居中，并文字顏色設(shè)置為白色，背景顏色設(shè)置#002752版心居中的方式，設(shè)定要居中的元素寬度（width:1080px;），外邊距為上下為0，左右為自動（margin:0auto），設(shè)定上下內(nèi)邊距各10像素。使用超連接實現(xiàn)頁面中的電話鏈接的撥號功能與郵箱地址的發(fā)信功能設(shè)定圖片的垂直對齊為中線對齊任務(wù)實施設(shè)定footer的相關(guān)樣式在footer中增加一個div，作為用來實現(xiàn)水平居中包裹層，并設(shè)定寬度與外邊距設(shè)定圖片垂直對齊方式清除超鏈接默認下劃線美化頁面通用頭部2任務(wù)要求按照效果圖在已有的HTML文件基礎(chǔ)上，實現(xiàn)如下效果：使用<footer></footer>包裹整體要求實現(xiàn)版心寬度1080像素并水平居中，并文字顏色設(shè)置為白色，背景顏色設(shè)置#002752版心居中的方式，設(shè)定要居中的元素寬度（width:1080px;），外邊距為上下為0，左右為自動（margin:0auto），設(shè)定上下內(nèi)邊距各10像素。使用超連接實現(xiàn)頁面中的電話鏈接的撥號功能與郵箱地址的發(fā)信功能設(shè)定圖片的垂直對齊為中線對齊任務(wù)實施使用之前任務(wù)已完成的代碼作為html內(nèi)容從左至右分別對網(wǎng)頁logo，導(dǎo)航和右側(cè)的登錄注冊部分進行文字，背景色等樣式的設(shè)定美化課程資源表格3任務(wù)要求將課程播放頁面中的表格部分進行美化，參考效果如圖6-3表格的寬度填充滿父容器寬度，寬度900像素表格標題背景為#eee且字體加粗表頭背景色為#aaa表格主圖背景色為粉色（pink）表格中的所有的超鏈接都設(shè)定為綠色（green），無下劃線表格主體部分第2、3列內(nèi)容，表格尾部內(nèi)容水平居中任務(wù)實施將html代碼中table的border屬性與寬度width屬性去除，用css樣式指定。2.table的寬度為width100%，填充所在的section元素3.依次完成對應(yīng)樣式修改4.對于類型與獲取部分的內(nèi)容居中，通過結(jié)構(gòu)偽類選擇器進行選擇和樣式修改制作課程推薦部分4任務(wù)要求按照效果圖制作新云課堂課程推薦部分對應(yīng)的css代碼在css目錄下的more.css中完成，并在index.html中引入設(shè)定整個區(qū)域的背景色為#f5f5f5圖片以背景圖方式加入，高度設(shè)置為60像素，寬度自動適配，水平居中，背景圖大小自動，不重復(fù)文本內(nèi)容設(shè)定顏色為#999，字體加粗，字體大小16像素，行高16像素，水平居中任務(wù)實施根據(jù)效果完成HTML內(nèi)容代碼，新建more.css文件在html文件中引入more.css文件設(shè)定整體背景色對圖片區(qū)域進行樣式修改，并通過背景圖定位方式使圖片內(nèi)容水平居中對文本區(qū)域進行樣式修改，并通過文本對齊方式使文字內(nèi)容水平居中制作課程視頻列表01任務(wù)要求按照效果圖完成視頻列表部分視頻列表文本標題水平居中，增加下邊框（border:1pxsolid#aaa）視頻列表區(qū)域背景色為#eee,寬度為100%，ol列表寬度為1080像素每個鏈接的a元素設(shè)定背景色#fff，寬度220像素，高度自動，內(nèi)邊距10像素（padding:10px），外邊距4像素（margin:4px），邊框?qū)挾?像素，直線顏色#aaa；無下劃線；字體顏色orange播放中的對應(yīng)鏈接字體添加下劃線，顏色紅色任務(wù)要求任務(wù)實施對已完成的課程視頻列表內(nèi)容進行備份并修改引入base.css、class_list.css文件設(shè)定全體區(qū)域的背景色及寬度樣式設(shè)定有序列表寬度，并確保base.css中進行了text-decoration:none方式的列表樣式清除設(shè)定每個視頻單元的相關(guān)樣式制作課程視頻列表2任務(wù)要求參考下方效果圖，在login.html完成登錄頁面的美化表單水平居中；表單背景色#eee，邊框?qū)挾葹?像素，黑色直線；并設(shè)定四角20像素圓角，溢出部分隱藏處理；添加外部盒子陰影效果，向右、向下各偏移2像素，陰影顏色為#666，擴散范圍4像素。標題文字白色，背景色#002752表單內(nèi)容水平居中表單內(nèi)的文本輸入框（賬戶、密碼），上下外邊距為字體大小的2倍標注元素進行對應(yīng)輸入框標注關(guān)聯(lián)任務(wù)實施對已完成的登錄頁面內(nèi)容進行備份并修改設(shè)定登錄表單的寬度，并使用外邊距水平居中，設(shè)定內(nèi)部內(nèi)容水平居中，設(shè)定圓角效果等設(shè)定標題部分相關(guān)樣式，并使用增加等距上下內(nèi)邊距的方式實現(xiàn)文本垂直居中設(shè)定表單內(nèi)部div下外邊距的方式實現(xiàn)內(nèi)容部分垂直間距美化用戶注冊頁面3任務(wù)要求參考下方效果圖，在reg.html中完成注冊頁面的美化表單水平居中；表單背景色#eee，邊框?qū)挾葹?像素，黑色直線；并設(shè)定四角20像素圓角，添加外部盒子陰影效果，向右、向下各偏移2像素，陰影顏色為#666，擴散范圍4像素。標題文字白色，背景色#002752表單內(nèi)容水平居中表單內(nèi)的文本輸入框（賬戶、密碼），上下外邊距為字體大小的2倍標注元素內(nèi)容與對應(yīng)輸入框標注關(guān)聯(lián)任務(wù)實施對已完成的登錄頁面內(nèi)容進行備份并修改設(shè)定登錄表單的寬度，并使用外邊距水平居中，設(shè)定內(nèi)部內(nèi)容水平居中，設(shè)定圓角效果等設(shè)定標題部分相關(guān)樣式，并使用增加等距上下內(nèi)邊距的方式實現(xiàn)文本垂直居中設(shè)定表單內(nèi)部div下外邊距的方式實現(xiàn)內(nèi)容部分垂直間距使用浮動左右布局01任務(wù)要求按照效果圖在已有的HTML文件基礎(chǔ)上，實現(xiàn)如下效果：頁面頭部區(qū)域內(nèi)容通過浮動進行左右布局清除浮動帶來的父元素高度崩塌問題給header部分增加內(nèi)邊距，產(chǎn)生四周8像素的留白空間任務(wù)實施對已完成的通用頁面頭部內(nèi)容進行備份并修改設(shè)定header元素的class為clear-fix，匹配common.css的清除浮動樣式內(nèi)容設(shè)定header元素中使用div元素將內(nèi)容分為左右兩部分，左部分包含網(wǎng)站名稱與導(dǎo)航部分，有部分包含登錄、注冊按鈕，并分別進行左浮動、右浮動。設(shè)定頭部左側(cè)部分class為clear-fix，匹配common.css的清除浮動樣式內(nèi)容設(shè)定頭部左側(cè)中的網(wǎng)站名稱與導(dǎo)航部分分別進行左浮動使用浮動單行布局2任務(wù)要求按照效果圖將已有的“成長之路”部分進行改造，實現(xiàn)如下效果：成長之路部分整體寬度1080像素并水平居中成長路線標題部分兩側(cè)使用::before、::after選擇器動態(tài)添加兩條灰色直線并通過設(shè)定父容器清除浮動樣式，清除浮動帶來的父元素高度崩塌問題3個課程單元水平排列并設(shè)定外邊距20像素效果圖任務(wù)實施對已完成的頁面內(nèi)容進行備份并修改設(shè)定標題部分內(nèi)容，在header.css中使用::before、::after選擇器動態(tài)添加兩條灰色直線設(shè)定課程單元所在的父元素div的class為clear-fix，匹配common.css的清除浮動樣式內(nèi)容，使用公用樣式來設(shè)定div的寬度為1080并并實現(xiàn)水平居中設(shè)定課程單元對應(yīng)的元素進行左浮動使用浮動多行布局3任務(wù)要求將課程視頻列表內(nèi)容通過浮動布局，實現(xiàn)多行布局。效果如圖任務(wù)實施對已完成的頁面內(nèi)容進行備份并修改設(shè)定ol元素class為clear-fix，匹配common.css的清除浮動樣式內(nèi)容設(shè)定ol元素中的li元素為左浮動制作課程層疊角標01任務(wù)要求按照效果圖在已有的HTML文件基礎(chǔ)上，實現(xiàn)如下效果使用浮動將課程水平排列至一行設(shè)置三種右上角上層狀態(tài)標志HOT、UPAGRADE、NEW，分別設(shè)置對應(yīng)的樣式效果使用絕對定位方式進行角標位置任務(wù)實施對已完成的頁面內(nèi)容進行備份并修改使用浮動將課程水平排列至一行使用::after選擇器設(shè)定3種不同的角標的樣式內(nèi)容設(shè)定課程單元相對定位設(shè)定課程單元中的角標對應(yīng)元素絕對定位，并設(shè)定偏移量，使角標定位在課程單元右上角絕對定位實現(xiàn)登錄頁面居中02任務(wù)要求使用絕對定位的方式實現(xiàn)登陸頁面中的主要內(nèi)容元素在頁面水平居中且垂直居中任務(wù)實施將確定的表單內(nèi)容區(qū)域進行絕對定位，但不設(shè)定相關(guān)四個方向上的偏移量設(shè)定。在為以絕對定位的元素設(shè)定四個方向的外邊距為auto。這是在不使用js或flex彈性布局的時的一種絕對定位的特殊用法。固定定位置頂按鈕03任務(wù)要求將已完成課程播放頁面整理為一個頁面class.html將指定按鈕固定到頁面右下方，距離右下角顯示區(qū)域邊緣附近。將通用頭部內(nèi)容區(qū)域通過粘性定位固定到頁面頂部效果圖任務(wù)實施將已完成的頁面內(nèi)容復(fù)制備份并修改制作錨點鏈接作為置頂按鈕為header添加id屬性，作為錨點目標將置頂按鈕定位在窗口可視區(qū)域右下角粘性定位頁面通用頭部04任務(wù)要求將頁面通用頭部在任務(wù)9.3的基礎(chǔ)上，實現(xiàn)header部分的粘性定位，定位于頁面頂部。并滾動垂直滾動條驗證效果是否正確。效果圖任務(wù)實施將已完成的頁面內(nèi)容復(fù)制備份并修改為header部分增加粘性定位并設(shè)定定位偏移量制作鼠標懸浮過渡效果1任務(wù)要求對已有的”成長路線“部分對應(yīng)的元素增加鼠標懸浮特效，課程路線部分整體放大1.2倍，增加盒子陰影，陰影顏色#fd7e14，內(nèi)部字體顏色變更為#fd7e14。效果圖任務(wù)實施對已完成的頁面內(nèi)容進行備份并修改增加對應(yīng)商品的hover偽類樣式在偽類樣