WEB前端開發(fā)實戰(zhàn)課件：HTML5+CSS3網(wǎng)頁布局與美化

HTML5+CSS3網(wǎng)頁布局與美化任務(wù)一

銅鼓文化詳情頁制作htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西少數(shù)民族文化資源網(wǎng)是一個通過網(wǎng)站展示廣西少數(shù)民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網(wǎng)站。銅鼓，壯語稱作“寧董”，壯族全民崇鼓，是使用銅鼓最普遍的一個民族。在壯民族的心目中，銅鼓具有非同尋常的功能：它不僅是天地神靈的集合體和入神溝通的圣物，也是代表權(quán)力和財富的“國之重器”，而且還是重大社會活動中必備的禮器和樂器。本次專題任務(wù)是采用標(biāo)準(zhǔn)流布局的方式來完成網(wǎng)站二級頁“文化”目錄中關(guān)于壯族銅鼓文化詳情頁的制作。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成銅鼓文化詳情頁制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠使用HTML常用的標(biāo)簽構(gòu)建簡單的HTML頁面能夠通過定義樣式屬性美化頁面，實現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果能夠形成布局思維并通過標(biāo)準(zhǔn)流布局簡單網(wǎng)頁任務(wù)描述標(biāo)準(zhǔn)流布局是網(wǎng)頁布局中最基本的布局方式，它決定了網(wǎng)頁元素的默認(rèn)位置和顯示樣式。本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的銅鼓文化局詳情頁來學(xué)習(xí)如何使用HTML常用的結(jié)構(gòu)標(biāo)簽來構(gòu)建簡單的HTML頁面、學(xué)習(xí)如何通過定義CSS樣式來美化頁面、學(xué)習(xí)標(biāo)準(zhǔn)流布局網(wǎng)頁的基礎(chǔ)知識。

壯族銅鼓文化詳情頁分為頁頭、當(dāng)前位置、頁中、頁尾四大結(jié)構(gòu)，頁面頭部包含頁面頂部和頁面導(dǎo)航兩大版塊，其中導(dǎo)航部份包含標(biāo)題logo、導(dǎo)航菜單、登陸、注冊信息三個版塊，當(dāng)前位置是關(guān)于當(dāng)前位置的導(dǎo)覽，頁面主體部份包含壯族銅鼓文化內(nèi)涵、銅鼓文化核心思想兩個版塊。__________任務(wù)實施圖2

結(jié)構(gòu)布局思路圖圖1

結(jié)構(gòu)布局劃分圖布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施圖3頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化創(chuàng)建站點(diǎn)文件夾indexJS在進(jìn)行網(wǎng)頁制作之前，首先需要完成站點(diǎn)文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件Index.html文件首頁布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施創(chuàng)建頁面、鏈接樣式創(chuàng)建HTML主體結(jié)構(gòu)設(shè)置通用樣式完成頭部Header部份制作步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟完成當(dāng)前位置部分制作步驟五完成主體文章部分制作步驟六完成頁尾部分制作步驟七布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維01HTML創(chuàng)建頁面元素02CSS盒模型呈現(xiàn)元素03CSS排版元素布局思維流程學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維CSS布局基礎(chǔ)在HTML中，元素可以分類，即行內(nèi)（inline）元素、塊(block)和行內(nèi)塊（inline-block）元素?！蛐袃?nèi)元素行內(nèi)元素的特點(diǎn)：行內(nèi)元素不會單獨(dú)占一行，它的寬度和高度由其內(nèi)容決定

，且不支持盒子模型。一般不能設(shè)置行內(nèi)元素的寬度、高度、對齊等屬性。常見行內(nèi)元素如下：

標(biāo)簽說明<span>小盒子、小節(jié)點(diǎn)、小區(qū)塊<a>超級鏈接<b><i>文本內(nèi)容的粗體/斜體<strong><em>文本內(nèi)容的強(qiáng)調(diào)學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎塊元素塊元素的特點(diǎn)：每個塊元素都會獨(dú)占一行或多行，支持盒子模型，可以設(shè)置塊元素的寬度、高度、對齊等屬性。塊元素常被用于網(wǎng)頁布局。常見的塊元素如下：標(biāo)簽說明<div><section>盒子、節(jié)點(diǎn)、區(qū)塊<header><article><footer><aside><nav>語義類布局標(biāo)簽<h1>-<h6>標(biāo)題<p>段落<ul><ol><dl><li>列表類標(biāo)簽學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎行內(nèi)塊元素行內(nèi)塊元素綜合了行內(nèi)元素和塊元素的特性，開發(fā)者可以對行內(nèi)塊元素設(shè)置寬度、高度和對齊屬性，但該元素不會獨(dú)占一行，支持部分盒子模型。常見的行內(nèi)塊元素有：標(biāo)簽說明<img>外部圖片（文件）<video>外部視頻（文件）<input><select><textarea>內(nèi)部表單控件學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎元素類型的轉(zhuǎn)換每個HTML元素默認(rèn)都有自己的顯示模式，不同的顯示模式有不同的呈現(xiàn)特性，使用CSS的【display】屬性可以轉(zhuǎn)換HTML元素的顯示模式，如可以設(shè)置寬度和高度；或是希望塊元素能夠具有行內(nèi)元素的某些特性，如不獨(dú)占一行，則可以使用display屬性對元素的類型進(jìn)行轉(zhuǎn)換，其語法規(guī)則為：選擇器{display:屬性；}屬性有四個值，分別如下：屬性說明Inline將元素轉(zhuǎn)換成行內(nèi)元素block將元素轉(zhuǎn)換成塊元素Inline-block將元素轉(zhuǎn)換成行內(nèi)塊元素none將元素隱藏，不占據(jù)頁面空間學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維

通過制作廣西少數(shù)民族文化資源網(wǎng)中的“銅鼓文化詳情頁”不難發(fā)現(xiàn)，網(wǎng)頁的頭部、內(nèi)容、頁腳是自上而下順序分布的。像這種網(wǎng)頁結(jié)構(gòu)元素像流水一樣自上而下或是自左而右分布的網(wǎng)頁布局模式就稱為標(biāo)準(zhǔn)流或文檔流。這也是網(wǎng)頁布局的默認(rèn)模式。

在標(biāo)準(zhǔn)流中，塊級元素獨(dú)占一行，垂直放置。瀏覽器將按HTML標(biāo)簽的書寫順序，自上而下解析并顯示網(wǎng)頁頭部、內(nèi)容和頁腳部分。頭部內(nèi)容頁腳自

上

而

下考核評價班級：姓名：學(xué)號任務(wù)名稱：銅鼓文化詳情頁制作評價項目評價標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設(shè)計并制作校園網(wǎng)-專業(yè)介紹二級頁制作，效果如圖所示校園網(wǎng)—專業(yè)介紹二級頁效果圖1+X考證練習(xí)練一練：掃碼完成1+X考證習(xí)題htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING

HTML5+CSS3網(wǎng)頁布局與美化htmlh5imgjavascriptwebcsscolorhr任務(wù)二

節(jié)日頁面制作目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西是多民族聚居的自治區(qū)，自古以來就有許多的民族傳統(tǒng)節(jié)日，比如壯族的三月三歌節(jié)、瑤族的達(dá)努節(jié)和盤王節(jié)、苗族的踩花山、仫佬族的走坡節(jié)、侗族的花炮節(jié)，以及別有風(fēng)味的打油茶等充滿著濃郁的民族風(fēng)情的節(jié)日活動。民族節(jié)日的形式、內(nèi)容豐富多彩，它包含特有的民俗風(fēng)情、節(jié)慶典禮、宗教信仰、傳統(tǒng)服飾、烹調(diào)技藝、工藝特產(chǎn)、音樂歌舞等，以豐富的文化內(nèi)涵及特有的民族風(fēng)情吸引著廣大的海內(nèi)外游客。本次專題任務(wù)是采用浮動布局的方式來完成網(wǎng)站中節(jié)日頁的制作。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成節(jié)日頁面的制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇HTML標(biāo)簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠掌握浮動布局的原理和應(yīng)用技巧能夠掌握項目列表的使用方法和CSS樣式的應(yīng)用方法能夠利用浮動布局方法對頁面進(jìn)行布局能夠了解廣西少數(shù)民族民俗活動，增強(qiáng)民族凝聚力能夠提高溝通協(xié)作能力，增強(qiáng)工匠精神和專業(yè)素質(zhì)任務(wù)描述浮動布局是最常見的網(wǎng)頁布局方式之一，通過設(shè)置元素的float屬性可以使原本獨(dú)占一行的多個塊元素顯示在同一行中，從而為網(wǎng)頁布局提供了更多的可能性。浮動前浮動后任務(wù)實施圖1

結(jié)構(gòu)布局劃分圖民族節(jié)日頁分為頁頭、頁中和頁尾三大結(jié)構(gòu)，頁頭和頁尾與任務(wù)一壯族銅鼓文化詳情頁類似，頁中包含新聞資訊和節(jié)日博覽兩個欄目內(nèi)容，新聞資訊欄目通過圖文展示民族節(jié)日活動相關(guān)的最新新聞，節(jié)日博覽作為側(cè)邊欄，通過列表的形式按民族進(jìn)行分類，展示廣西各少數(shù)民族的節(jié)日信息。布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實施圖2頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化創(chuàng)建頁面、鏈接樣式創(chuàng)建頁面主體結(jié)構(gòu)和樣式美化創(chuàng)建頁面頭部制作新聞資訊欄目步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟制作節(jié)日博覽欄目步驟五制作頁面尾部步驟六任務(wù)實施布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化學(xué)習(xí)資源列表的應(yīng)用列表是一種非常有用的數(shù)據(jù)排列方式，最直接的用途是有序的呈現(xiàn)文字，但利用列表還可以做出其他豐富的效果，羅列不同的元素，如圖像等，使用項目列表制作導(dǎo)航菜單也是重要的應(yīng)用之一。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源列表的分類代碼

<h3>廣西的少數(shù)民族：</h3><ul><li>壯族</li><li>瑤族</li><li>侗族</li></ul>效果項目列表ul也稱為無序列表，使用<li>標(biāo)簽來羅列各個項目，并使用特殊符號來進(jìn)行分項標(biāo)識，如黑色圓點(diǎn)等。列表項之間沒有順序關(guān)系。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源列表的分類代碼<h3>網(wǎng)頁制作相關(guān)課程設(shè)計：</h3><ol><li>網(wǎng)頁美工</li><li>HTML+CSS網(wǎng)頁制作</li><li>JavaScript程序設(shè)計</li></ol>效果編號列表ol又稱為有序列表，每個列表項前面都有標(biāo)識順序的編號，如1、2、3等。編號的形式可以通過CSS樣式進(jìn)行控制。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源列表的樣式設(shè)置屬性描述list-style-type規(guī)定列表項標(biāo)記的類型。list-style-image指定圖像作為列表項標(biāo)記。list-style-position規(guī)定列表項標(biāo)記（項目符號）的位置。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置列表的樣式設(shè)置屬性值說明disc默認(rèn)值，黑色圓點(diǎn)circle空心圓圈

square黑色正方形none不顯示符號decimal數(shù)字，如1，2，3………lower-roman小寫羅馬文字，如：ⅰ，ⅱ，ⅲ，ⅳ……upper-roman大字羅馬文字，如：Ⅰ，Ⅱ，Ⅲ，Ⅳ……lower-latin小寫拉丁文，如：a，b，c，d……upper-latin大寫拉丁文，如：A，B，C，D……inherit繼承l(wèi)ist-style-type屬性，設(shè)置列表符號類型項目列表編號列表學(xué)習(xí)資源列表的樣式設(shè)置list-style-image屬性，將圖像指定為列表項標(biāo)記：語法格式：list-style-image:url(圖像的路徑及文件名);浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源列表的樣式設(shè)置list-style-position屬性，指定列表項標(biāo)記（項目符號）的位置。屬性值說明outside默認(rèn)值。保持列表符號位于文本左側(cè)，并且放置在文本以外，環(huán)繞文本不根據(jù)標(biāo)記對齊。inside列表符號放置在文本以內(nèi)，且環(huán)繞文本根據(jù)列表符號對齊。"list-style-position:outside;"表示項目符號點(diǎn)將在列表項之外。"list-style-position:inside;"

表示項目符號將在列表項內(nèi)。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源浮動與float屬性元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制，移動到其父元素中指定位置的過程。在CSS中，float屬性用來定義元素向哪個方向浮動，語法格式如下：選擇器{float:屬性值;}屬性值說明left元素向左浮動。right元素向右浮動。none默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。inherit規(guī)定應(yīng)該從父元素繼承float屬性的值。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源浮動的原理及特點(diǎn)浮動元素脫離默認(rèn)文檔流，漂浮在默認(rèn)文檔流之上，效果參考圖1-27。浮動元素不受默認(rèn)文檔流的限制，直接適用于盒子模型。浮動元素以父元素或同級元素的浮動方向為參考進(jìn)行對齊排列。浮動元素雖然脫離默認(rèn)文檔流，但是仍會對默認(rèn)文檔流中的內(nèi)容造成影響。浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置學(xué)習(xí)資源浮動帶來的不良影響浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置在浮動布局中，因為浮動元素脫離了標(biāo)準(zhǔn)流，所以會對附近的其他元素產(chǎn)生影響，使結(jié)構(gòu)布局出現(xiàn)混亂。另外，還會出現(xiàn)一種高度塌陷的現(xiàn)象：原來的父容器高度是由被包含元素?fù)纹鸬?，但是?dāng)被包含元素脫離標(biāo)準(zhǔn)流浮動后，原來的父容器高度就會塌陷。未設(shè)置浮動的狀態(tài)時，如下圖所示：當(dāng)兩個子元素向左浮動時，box1出現(xiàn)高度塌陷，box2受浮動影響向上移動，如下入所示：學(xué)習(xí)資源消除浮動不良影響的方法浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置方法一：在被浮動不良影響的元素中設(shè)置樣式clear：both。缺點(diǎn)：不能解決父元素的高度塌陷問題。方法二：在最后一個浮動元素后添加空標(biāo)簽（可以是<div>、<p>、<hr>等），并為其添加樣式clear：both。缺點(diǎn)：添加無意義的空標(biāo)簽，結(jié)構(gòu)化差，后期維護(hù)麻煩。方法三：使用偽元素清除浮動，給包含浮動的父元素添加如下樣式。

優(yōu)點(diǎn)：沒有增加標(biāo)簽，不破壞文檔結(jié)構(gòu)，沒有副作用，同時能在低版本瀏覽器上正常顯示。學(xué)習(xí)資源消除浮動不良影響的方法浮動的原理及應(yīng)用方法列表的應(yīng)用和樣式設(shè)置方法三：使用偽元素清除浮動，給包含浮動的父元素添加如下樣式。步驟一:設(shè)置.clearfloat樣式步驟二:將.clearfloat樣式應(yīng)用在浮動元素的父元素上。.clearfloat{zoom:1;}.clearfloat:after{content:"";display:block;height:0;visibility:hidden;clear:both;}設(shè)置.clearfloat樣式考核評價班級：姓名：學(xué)號任務(wù)名稱：節(jié)日頁面制作評價項目評價標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設(shè)計并制作校園網(wǎng)-專業(yè)介紹頁制作，效果如圖所示校園網(wǎng)—專業(yè)介紹效果圖1+X考證練習(xí)練一練：掃碼完成1+X考證習(xí)題htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING

HTML5+CSS3網(wǎng)頁布局與美化htmlh5imgjavascriptwebcsscolorhr任務(wù)三

古跡頁面制作目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境民族民俗風(fēng)情是廣西悠久歷史文化的重要組成部分，它神秘的風(fēng)采和誘人的魅力吸引了越來越多的旅游者。近年來，廣西已逐步發(fā)展出具有當(dāng)?shù)靥厣穆糜尉仿肪€，包括南國邊關(guān)攬勝游、壯鄉(xiāng)文化風(fēng)情游、瑤苗侗鄉(xiāng)采風(fēng)游、千年靈渠尋古游、寧明花山崖畫探奇游、百色小平足跡游等等。這些民俗旅游專線項目都取得了較好的經(jīng)濟(jì)效益和社會效益。本次專題任務(wù)是制作廣西少數(shù)民族文化資源網(wǎng)中二級頁“古跡”網(wǎng)頁，使我們充分認(rèn)識廣西自身民俗資源，促進(jìn)廣西旅游業(yè)的快速發(fā)展。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成古跡頁面的制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇HTML標(biāo)簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠利用浮動布局方法對頁面進(jìn)行布局能正確掌握背景圖片樣式的設(shè)置能正確選擇html標(biāo)簽和CSS樣式完成頁面制作能夠提高溝通協(xié)作能力，增強(qiáng)工匠精神和專業(yè)素質(zhì)任務(wù)描述網(wǎng)頁布局是網(wǎng)頁制作過程中非常重要的技術(shù)環(huán)節(jié),也是網(wǎng)頁制作過程中難度較大的一個部分。如何正確合理地進(jìn)行網(wǎng)頁布局，無論是對于網(wǎng)頁內(nèi)容的合理呈現(xiàn)還是對于提升網(wǎng)頁整體的美觀程度都是非常重要的。浮動布局作為當(dāng)下網(wǎng)頁制作中重要的一種布局技術(shù)，在實際應(yīng)用中被廣泛采納。

本任務(wù)，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中古跡網(wǎng)頁對浮動布局的原理及應(yīng)用方法進(jìn)行更為深入的學(xué)習(xí)和鞏固。任務(wù)實施圖1

結(jié)構(gòu)布局分圖古跡頁面分為頁面頭部、頁面主體和頁面尾部三大部分。其中，頁面頭部和頁面尾部與任務(wù)二節(jié)日頁面相似，頁面主體包含新聞聚焦和古跡簡介兩個欄目，新聞聚焦欄目主要通過列表的形式展示與名勝古跡相關(guān)的新聞，古跡簡介欄目用于展示名勝古跡信息。布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實施圖2頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化創(chuàng)建頁面、鏈接樣式創(chuàng)建頁面主體結(jié)構(gòu)和樣式美化創(chuàng)建頁面頭部制作新聞聚焦欄目步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟制作古跡簡介欄目步驟五制作頁面尾部步驟六任務(wù)實施布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化學(xué)習(xí)資源CSS3過渡效果transform變形屬性常見transform變形屬性（2D轉(zhuǎn)換）值描述none定義不進(jìn)行轉(zhuǎn)換。rotate(angle)定義元素在二維空間的旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。scale(x,y)定義元素在二維空間的縮放和翻轉(zhuǎn)。translate(x,y)定義元素在二維空間的偏移。transform屬性，可用于元素的變形，可實現(xiàn)元素的旋轉(zhuǎn)、縮放、移動、傾斜等變形效果。語法如下:transform:none|transform-functions;其中，none:默認(rèn)值，不設(shè)置元素變形;transform-functions:設(shè)置一個或多個變形函數(shù)。變形函數(shù)主要包括旋轉(zhuǎn)rotate()、縮放scale()、移動translate()等，設(shè)置多個變形函數(shù)時，用空格間隔。學(xué)習(xí)資源CSS3過渡效果transform變形屬性元素的旋轉(zhuǎn)，rotate()函數(shù)語法如下:rotate(angle)其中，angle表示旋轉(zhuǎn)的角度，為帶有角度單位標(biāo)識符的數(shù)值，角度單位是deg。值為正時,表示順時針旋轉(zhuǎn)；值為負(fù)時，表示逆時針旋轉(zhuǎn)。設(shè)置當(dāng)鼠標(biāo)放到無序列表項目上時的CSS樣式。順時針旋轉(zhuǎn)30度，背景顏色為橙色，文字顏色為白色。代碼如下:li:hover{transform:rotate(30deg);background-color:orange;color:white;}當(dāng)把鼠標(biāo)放到導(dǎo)航欄項目上時，欄目會旋轉(zhuǎn)一定的角度，網(wǎng)頁效果如圖所示：學(xué)習(xí)資源CSS3過渡效果transform變形屬性元素的縮放和翻轉(zhuǎn)，scale()函數(shù)語法如下:scale(x,y)其中，x:表示元素在水平方向上的縮放倍數(shù)。y:表示元素在垂直方向上的縮放倍數(shù)。x、y的值可以為整數(shù)、負(fù)數(shù)、小數(shù)。當(dāng)取值的絕對值大于1時,表示放大;絕對值小于1時，表示縮小。當(dāng)取值為負(fù)數(shù)時，元素會被翻轉(zhuǎn)。如果y值省略，則說明垂直方向上的縮放倍數(shù)與水平方向上的縮放倍數(shù)相同。當(dāng)鼠標(biāo)放到導(dǎo)航欄項目上時，欄目在水平和垂直方向同時放大1.5倍，效果如圖所示。:li:hover{transform:scale(1.5);background-color:orange;color:white;}學(xué)習(xí)資源CSS3過渡效果transform變形屬性元素的移動，translate()函數(shù)語法如下:translate(dx,dy)其中，dx:表示元素在水平方向上的偏移距離;dy:表示元素在垂直方向上的偏移距離;dx、dy的值為帶有長度單位標(biāo)識符的數(shù)值，可以為負(fù)值和帶小數(shù)的值。若取值大于0，則表示向右或向下偏移;若取值小于0，則表示向左或向上偏移。如果dy值省略，則說明垂直方向上的偏移距離默認(rèn)為0。設(shè)置鼠標(biāo)放到導(dǎo)航欄上時，欄目發(fā)生一定的偏移，向右偏移10像素,向下偏移5像素。代碼如下:transform:translate(10px,5px);學(xué)習(xí)資源CSS3過渡效果transform變形屬性同時使用多個變形函數(shù)，使得元素變形可以更加靈活，多個函數(shù)之間用空格分隔。設(shè)置向右下方向各偏移10像素，順時針旋轉(zhuǎn)30度，垂直翻轉(zhuǎn)。代碼如下:transform:translate(10px,10px)rotate(30deg)scale(1,-1);學(xué)習(xí)資源CSS3過渡效果transform變形屬性transition過渡屬性值描述transition-property屬性名，哪個屬性需要變化transition-duration持續(xù)時間transition-timing-function過渡效果的速度曲線transition-delay過渡延遲時間將元素的某個屬性從“一個值”在指定時間內(nèi)過渡到“另一個值”transition：屬性名持續(xù)時間過渡方式延遲時間學(xué)習(xí)資源CSS3過渡效果transform變形屬性transition-timing-function屬性規(guī)定過渡效果的速度曲線。

該屬性允許過渡效果隨著時間來改變其速度。值描述linear勻速ease慢速開始，變快，慢速結(jié)束ease-in慢速開始ease-out慢速結(jié)束ease-in-out慢速開始和結(jié)束考核評價班級：姓名：學(xué)號任務(wù)名稱：古跡頁面制作評價項目評價標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設(shè)計并制作校園網(wǎng)新聞中心二級頁制作，效果如圖所示校園網(wǎng)新聞中心頁效果圖1+X考證練習(xí)練一練：掃碼完成1+X考證習(xí)題htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENING

HTML5+CSS3網(wǎng)頁布局與美化任務(wù)四

服飾頁面制作htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境

中國人的漢字是象形文字，而多數(shù)的民族沒有自己的文字，所以他們就借助針、線在服飾上描繪民族圖案，講述本民族的故事，讓子孫了解本民族的文化歷史，傳承民族精神。例如壯族服飾中，存在的大量動物紋樣就折射出了壯族人民對自然的崇拜。廣西擁有著12個少數(shù)民族，而這些少數(shù)民族的服飾各有其特色之處。

本次專題任務(wù)是采用定位布局的方式來完成廣西少數(shù)民族文化資源網(wǎng)二級頁“服飾”頁面的制作。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成服飾頁面制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠使用HTML常用的標(biāo)簽構(gòu)建簡單的HTML頁面能夠通過定義樣式屬性美化頁面，實現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果能夠形成布局思維并通過定位布局簡單網(wǎng)頁任務(wù)描述定位布局是主流的頁面布局之一，定位布局可以實現(xiàn)標(biāo)準(zhǔn)流布局和浮動布局沒辦法完成的效果，比如某個元素可以自由的在一個盒子內(nèi)移動位置，并且壓住其他盒子。當(dāng)我們滾動窗口的時候，盒子是固定屏幕某個位置的。定位布局是可以讓盒子自由的在某個盒子內(nèi)移動位置或固定屏幕中某個位置，并且可以壓住其他盒子。

本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的服飾頁面來學(xué)習(xí)使用定位布局的三種定位類型，如何設(shè)置元素定位位置。

服飾頁面的頁面結(jié)構(gòu)：頁面頂部包含標(biāo)題logo、頁面導(dǎo)航欄、登陸、注冊以及頁面主圖，頁面主體部份包含民族時尚，傳統(tǒng)服飾，壯美配飾以及固定側(cè)邊欄。頁尾部分。任務(wù)實施圖2

結(jié)構(gòu)布局思路圖圖1

結(jié)構(gòu)布局分析圖布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施圖3頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化創(chuàng)建站點(diǎn)文件夾fineryJS在進(jìn)行網(wǎng)頁制作之前，首先需要完成站點(diǎn)文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件finery.html文件服飾布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施創(chuàng)建站點(diǎn)、鏈接樣式、搭建頁面主體結(jié)構(gòu)完成頁頭（header）內(nèi)容制作民族時尚欄目制作傳統(tǒng)服飾欄目步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟制作壯美配飾欄目步驟五制作固定側(cè)邊欄欄目步驟六完成頁腳（footer）內(nèi)容步驟七布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施學(xué)習(xí)資源定位布局基礎(chǔ)定位布局布局思維01HTML創(chuàng)建頁面元素02CSS盒模型呈現(xiàn)元素03CSS排版元素布局思維流程學(xué)習(xí)資源定位的組成定位=定位模式+邊偏移◎定位模式position屬性，決定了html元素在頁面中的定位方式以及定位的參照對象。定位布局基礎(chǔ)定位布局布局思維值定位方式文檔流參照對象static靜態(tài)定位（默認(rèn)值）默認(rèn)文檔流依據(jù)默認(rèn)文檔流中元素的順序依次排列=無定位absolute絕對定位定位文檔流相對于非static定位的父元素進(jìn)行定位relative相對定位相對于自身在默認(rèn)文檔流中的位置進(jìn)行定位fixed固定定位相對于瀏覽器視口進(jìn)行定位學(xué)習(xí)資源邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素的上邊線的距離bottom底部偏移量，定義元素相對于其父元素的下邊線的距離right右側(cè)偏移量，定義元素相對于其父元素右邊線的距離left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離◎邊偏移定位布局基礎(chǔ)定位布局布局思維◎定位層對象不設(shè)定position屬性，即保持對象默認(rèn)的【static】的靜態(tài)定位方式，對象處于默認(rèn)文檔流中。設(shè)定position屬性，即將對象轉(zhuǎn)化為【非static】的動態(tài)定位方式，這種【非static】的定位對象，我們往往稱為“定位層”。學(xué)習(xí)資源◎定位文檔流定位布局基礎(chǔ)定位布局布局思維定位層對象，脫離默認(rèn)文檔流，形成新的定位文檔流。定位文檔流依附于Z軸走向排列，多個定位文檔流具有Z軸方向的前后疊加順序關(guān)系。與浮動文檔流不同，定位文檔流將完全脫離默認(rèn)文檔流，無任何關(guān)聯(lián)。學(xué)習(xí)資源◎定位文檔流的順序控制定位布局基礎(chǔ)定位布局布局思維屬性說明z-index規(guī)定定位元素的堆疊順序，擁有更高順序的元素總是會處于較低順序的元素的前面z-index屬性僅對定位層對象生效，用來控制對象的定位文檔流層疊關(guān)系。z-index：Z軸的索引順序。值用來指定順序關(guān)系，number數(shù)字形式，沒有單位，允許負(fù)值。未定義z-index的情況下，定位對象依據(jù)它們在HTML結(jié)構(gòu)中的順序，寫在后面的在Z軸上越靠前z-index：默認(rèn)值為0，正值越大，層疊級別越高，Z軸上越靠前；學(xué)習(xí)資源◎相對定位relative相對定位是元素在移動位置的時候，是相對于它原來的位置來說的。特點(diǎn)：定位布局基礎(chǔ)定位布局布局思維在相對定位中同一個方向上的定位屬性只能使用一個給相對定位的元素設(shè)置margin/padding等屬性的時會影響到標(biāo)準(zhǔn)流的布局相對定位是不脫離標(biāo)準(zhǔn)流的,會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間在相對定位中是區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素。學(xué)習(xí)資源◎絕對定位absolute絕對定位是元素在移動位置的時候，是相對于它的祖先元素來說的。定位布局基礎(chǔ)定位布局布局思維如果祖先元素父級有定位(相對、絕對、固定定位)，則以最近一級，有定位祖先元素為參考點(diǎn)移動位置如果沒有祖先元素，或者祖先元素沒定位，即默認(rèn)情況下所有的絕對定位的元素,無論有沒有祖先元素,都會以body作為參考點(diǎn)。絕對定位不再占用原先的位置（脫標(biāo)）絕對定位參考點(diǎn)學(xué)習(xí)資源◎固定定位fixed固定定位是元素固定于瀏覽器的可視區(qū)的位置。定位布局基礎(chǔ)定位布局布局思維特點(diǎn)02跟父元素沒有任何關(guān)系03不隨滾動條滾動01以瀏覽器的可視窗口為參照點(diǎn)移動元素04固定定位不再占有原先的位置(脫標(biāo))05固定定位也可以看做是一種特殊的絕對定位06定定位和絕對定位一樣不區(qū)分行內(nèi)/塊級/行內(nèi)塊級學(xué)習(xí)資源

通過制作廣西少數(shù)民族文化資源網(wǎng)中的“服飾頁面”不難發(fā)現(xiàn)，網(wǎng)頁的內(nèi)容，我們可以讓其在頁面的任何位置。像這種網(wǎng)頁結(jié)構(gòu)元素讓盒子自由的在某個盒子內(nèi)移動或固定在屏幕中的某個位置，并且可以壓住某個盒子。

在定位布局中，通過設(shè)置元素的定位模式和邊偏移量，實現(xiàn)頁面內(nèi)容的布局方式。定位布局基礎(chǔ)定位布局布局思維考核評價班級：姓名：學(xué)號任務(wù)名稱：服飾頁面制作評價項目評價標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是總分：

課后拓展練一練：設(shè)計并制作南寧市第六職業(yè)技術(shù)學(xué)校校園網(wǎng)---師生風(fēng)采二級頁制作，效果如圖所示校園網(wǎng)校園風(fēng)采效果圖1+X考證練習(xí)練一練：掃碼完成1+X考證習(xí)題htmlh5imgjavascriptwebcsscolorhr感謝您的聆聽THANKYOUFORLISTENINGHTML布局+CSS美化任務(wù)五

美食詳情頁制作htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西是中國5個少數(shù)民族自治區(qū)之一，地處中、南亞熱帶季風(fēng)氣候區(qū)，氣候溫暖，熱量豐富，有很多地方美食，自古以來廣西就是官宦商旅云集之地，因而這里的飲食習(xí)慣融合了粵、川、湘、浙、贛、閩等地方菜肴特色，善長眾菜合調(diào)，粗菜細(xì)做。本次專題任務(wù)是完成廣西少數(shù)民族文化資源網(wǎng)中二級頁“美食”頁面，讓更多的人了解廣西的特色美食，喜歡廣西美食，起到很好的宣傳作用，從而促進(jìn)廣西經(jīng)濟(jì)的發(fā)展。本次專題任務(wù)是采用彈性布局的方式來進(jìn)行美食頁面的布局，利用響應(yīng)式布局來完成網(wǎng)頁電腦端、iPad端和移動端三個端口的展示。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成美食詳情頁制作甲方提供的設(shè)計圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式、響應(yīng)式布局、彈性布局相關(guān)知識完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠掌握響應(yīng)式布局的基礎(chǔ)知識能夠掌握彈性布局的基礎(chǔ)知識能夠通過mediaquery媒體查詢的使用和定義樣式屬性實現(xiàn)三個端口的自適應(yīng)，實現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果任務(wù)描述響應(yīng)式布局是一個網(wǎng)站能夠兼容多個終端而不是為每個終端做一個特定的版本。本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的美食詳情頁來學(xué)習(xí)響應(yīng)式布局、彈性布局的基礎(chǔ)知識、學(xué)習(xí)mediaquery媒體查詢、學(xué)習(xí)如何通過定義CSS樣式來實現(xiàn)電腦端、iPad端和手機(jī)端自適應(yīng)。

美食詳情頁分為頁頭、頁面主體、頁尾三大結(jié)構(gòu)，頁面頭部包含標(biāo)題logo、頁面導(dǎo)航欄、登陸、注冊信息，獲取當(dāng)前時間、美食頁面的banner，頁面主體部份包含相約廣西欄目、廣西美食介紹欄目兩個板塊任務(wù)實施圖2

結(jié)構(gòu)布局思路圖圖1

結(jié)構(gòu)布局劃分圖布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實施圖3頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化foodvideo創(chuàng)建站點(diǎn)文件夾JS在進(jìn)行網(wǎng)頁制作之前，首先需要完成站點(diǎn)文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件video文件夾存放視頻文件food.html文件首頁任務(wù)實施布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化創(chuàng)建頁面、鏈接樣式、搭建頁面主體結(jié)構(gòu)完成頁面頭部制作相約廣西欄目制作廣西特色美食介紹欄目步驟一步驟二步驟三步驟四構(gòu)建HTML響應(yīng)式布局+CSS頁面美化操作步驟制作頁面尾部步驟五完成美食頁面平板端制作步驟六完成美食頁面移動端制作步驟七布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實施學(xué)習(xí)資源學(xué)習(xí)資源響應(yīng)式布局的概念響應(yīng)式布局意在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗。響應(yīng)式WEB設(shè)計是一個讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法,響應(yīng)式設(shè)計可以隨著所顯示的屏幕大小而改變,實現(xiàn)響應(yīng)式設(shè)計的核心就是媒體查詢。使用@media媒體查詢，可以針對不同的媒體類型定義不同的樣式。優(yōu)點(diǎn)：1、面對不同分辨率設(shè)備靈活性強(qiáng)。2、能夠快捷解決多設(shè)備顯示適應(yīng)問題。響應(yīng)式布局的優(yōu)、缺點(diǎn)缺點(diǎn)：1、兼容各種設(shè)備工作量大，效率低下。2、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長。響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源01flex（彈性布局）02mediaquery（媒體查詢）03vw/vh實現(xiàn)響應(yīng)式布局的五種方式04%(百分百)04rem響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源flex彈性布局的定義Flex彈性布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時，確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。?yīng)用它可以更輕松地設(shè)計靈活的響應(yīng)式布局結(jié)構(gòu)，而無需使用浮動或定位。使用flex彈性布局的目的是用一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。如需使用flex彈性布局，首先需要定義flex容器（將display屬性設(shè)置為flex）。Flex容器內(nèi)包含了一個或多個flex元素。響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源1.主軸與交叉軸

（flex-direction）：利用該屬性定義主軸方向，即項目的排列方向值描述row默認(rèn)值。水平堆疊flex項目（從左到右）。row-reverse水平堆疊