HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）（微課版）（第2版） 課件6任務(wù)實施

06使用CSS3美化頁面任務(wù)01.美化頁面通用尾部02.03.04.美化頁面通用頭部美化課程資源表格制作課程推薦部分美化頁面通用尾部1任務(wù)要求（1）按照下圖所示效果在2.1任務(wù)制作的頁面通用尾部的HTML文件基礎(chǔ)上進(jìn)行美化。（2）使用<footer></footer>包裹整體，將背景顏色設(shè)置為#002752。（3）要求實現(xiàn)版心寬度1080像素且水平居中，并將文字顏色設(shè)置為白色。版心居中的方式：設(shè)定要居中的元素寬度（width:1080px;）；設(shè)定上、下外邊距為為0，左、右外邊距為自動（margin:0auto）；設(shè)定上、下內(nèi)邊距為10像素。（4）使用超鏈接實現(xiàn)頁面中的聯(lián)系電話的撥號功能與詳細(xì)郵箱的發(fā)信功能。（5）設(shè)定圖片的垂直對齊為中線對齊。任務(wù)實施（1）設(shè)定footer標(biāo)簽的相關(guān)樣式。（2）在footer標(biāo)簽中增加一個div標(biāo)簽，作為用來實現(xiàn)水平居中包裹層，并設(shè)定寬度與外邊距。（3）設(shè)定圖片垂直對齊方式。（4）清除超鏈接默認(rèn)下畫線。參考代碼html參考代碼css操作視頻美化頁面通用頭部2任務(wù)要求（1）按照下圖所示效果在2.2任務(wù)制作的頁面通用頭部基礎(chǔ)上進(jìn)行美化。（2）設(shè)定網(wǎng)站Logo部分字體大小為20像素，字體加粗。（3）設(shè)定導(dǎo)航部分的文字內(nèi)容字體大小為16像素，顏色為#888888，設(shè)定當(dāng)前頁面對應(yīng)的導(dǎo)航按鈕（圖6-20中為“首頁”）的字體顏色為#000000。（4）“登錄”“注冊”按鈕具有4像素的圓角（border-radius:4px;），字體大小16像素，特性為行內(nèi)塊狀元素。（5）設(shè)定“登錄”按鈕：背景色為白色，字體顏色為#007bff；邊框1像素寬，直線類型，顏色為#007bff；鼠標(biāo)懸浮時，背景色為#007bff，字體顏色為#ffffff。（6）設(shè)定“注冊”按鈕：背景色為#2a8745，字體顏色為#ffffff；鼠標(biāo)懸浮時，背景色為白色，字體顏色為#2a8745。任務(wù)實施（1）使用之前任務(wù)已完成的頁面通用頭部代碼作為HTML內(nèi)容。（2）從左至右分別對網(wǎng)站Logo、導(dǎo)航和“登錄”“注冊”按鈕部分進(jìn)行文字、背景色等樣式進(jìn)行設(shè)定。參考代碼html參考代碼css操作視頻美化課程資源表格3任務(wù)要求（1）對5.2任務(wù)完成的課程播放頁面中的“課程資料”表格部分進(jìn)行美化，實現(xiàn)下圖所示效果。（2）表格的寬度為900像素。（3）表格標(biāo)題背景顏色為#eeeeee且標(biāo)題字體加粗。（4）表頭背景色為#aaaaaa。（5）表格主體、表格尾部背景色為粉色（pink）。（6）表格中的所有的超鏈接都設(shè)定為綠色（green），無下畫線。（7）表格主體部分第2、3列內(nèi)容和表格尾部內(nèi)容水平居中。任務(wù)實施（1）將HTML代碼中table標(biāo)簽的border屬性與width屬性去除，用CSS樣式指定。（2）在CSS中將table標(biāo)簽的width屬性設(shè)為900px。（3）依次完成對應(yīng)樣式修改。（4）對于表格主體部分第2、3列內(nèi)容和表格尾部內(nèi)容居中，通過結(jié)構(gòu)偽類選擇器進(jìn)行選擇和樣式修改。參考代碼操作視頻制作課程推薦部分4任務(wù)要求（1）按照下圖所示效果制作“新云課堂”課程推薦頁面“更多好課”部分。（2）對應(yīng)的CSS代碼在css目錄下的more.css文件中完成，并在index.html文件中引入。（3）設(shè)定整個區(qū)域的背景色為#f5f5f5。（4）圖片以背景圖方式加入，高度設(shè)置為60像素，寬度自動適配，水平居中，背景圖大小自動，不重復(fù)。（5）文本內(nèi)容設(shè)定顏色為#999999，字體加粗，字體大小16像素，行高16像素，水平居中。任務(wù)實施（1）根據(jù)效果完成HTML內(nèi)容代碼，新建more.css文件。（2）在index.html文件中引入more.css文件。（3）設(shè)定整體背景色。（4）