項目一HTML布局+CSS美化任務五

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

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

美食詳情頁分為頁頭、頁面主體、頁尾三大結構，頁面頭部包含標題logo、頁面導航欄、登陸、注冊信息，獲取當前時間、美食頁面的banner，頁面主體部份包含相約廣西欄目、廣西美食介紹欄目兩個板塊任務實施圖2

結構布局思路圖圖1

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

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

響應式布局flex彈性布局媒體查詢學習資源2.項目分行flex-wrap：利用該屬性定義當一條軸線排不下所有項目時，如何換行值描述wrap換行nowrap不換行wrap-reverse行序反向響應式布局flex彈性布局媒體查詢學習資源3.排序方向justify-content、align-items：justify-content屬性用于定義flex項目在主軸上對齊。align-items屬性用于定義flex項目在交叉軸對齊。值描述flex-start默認值。將flex項目在容器的開頭對齊flex-end將flex項目在容器的末端對齊center將flex項目在容器的中心對齊stretch拉伸顯示baseline基線對齊

響應式布局flex彈性布局媒體查詢學習資源4.分行的排序方式align-content：align-content屬性規定當分行時，每一行的排序方式值描述flex-start默認值。每行在容器的開頭對齊flex-end每行在容器的末端對齊center每行在容器的中心對齊space-around在每行之前、之間和之后都帶有空格space-between每行之間都有相等距離響應式布局flex彈性布局媒體查詢學習資源響應式布局flex彈性布局媒體查詢1.媒體查詢的定義媒體查詢是CSS3的新增屬性。它是實現響應式布局的關鍵，可以針對不同的媒體類型和不同的屏幕尺寸定義不同的樣式，在重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新進行渲染。媒體查詢目前廣泛應用于蘋果手機、Android手機、平板電腦等設備。學習資源響應式布局flex彈性布局媒體查詢2.媒體查詢語法@mediamediatypeand

|

not|only(mediafeafure){css-code;}語法解釋：（1）用@開頭，@media注意@符號。（2）mediatype用于定義媒體類型。（3）關鍵字為and，not，only(注意and前后都有空格)。（4）mediafeature媒體特性必須用括號()括起。關鍵字解釋：And：可以將多個媒體特性連接到一起，相當于“且”的意思。Not:排除某個媒體類型，相當于“非”的意思，可以省略。Only:指定某個特定的媒體類型，可省略。學習資源響應式布局flex彈性布局媒體查詢3.媒體類型值描述all默認值。用于所有媒體類型的設備print用于打印機screen用于計算機、平板電腦、智能手機等speech用于屏幕閱讀器等發聲設備mediatype屬性值考核評價班級：姓名：學號任務名稱：古跡頁面制作評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發任務□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結構分析能夠進行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網站搭建網站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標準□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務□是□是工作規范能按企業規范要求進行操作□是□是成果展示能準確表達，匯報成果□是□是非技術考評（20%）態度學習態度是否端正□是□是紀律遵守紀律□