第32 章項目實戰-移動端流體布局5

標籤：

第32 章項目實戰-移動端流體布局[5]學習要點：1.導航固頂2.三個欄目3.公司簡介本章主要開始如果通過第一個PC 端項目進行重構，設計成移動端可訪問的頁面，這個項目採用的是流體布局。一．導航固定由於行動裝置螢幕高度較低，沒有捲軸操作的便利性。一般來說，欄目的導航部分總是固定在行動裝置的某一個方位。我們這裡將頭部的導航永遠固定在頭部，不會隨著頁面向下滑動而更改。//固頂定位#header {position: fixed;top: 0;z-index: 9999;}//相應的向下便宜45px#adver {padding: .45rem 0 0 0;}三．三個欄目和固定式配置一樣，欄目都有一個圖片背景以及大小標題。//HTML 部分旅遊資訊介紹各種最新旅遊資訊、資訊要聞、景點攻略等票務訂購各種飛機票、火車票、汽車票和輪渡票的訂購服務公司簡介公司的發展曆程、獲得榮譽以及連絡方式//CSS#headline {max-width: 6.4rem;margin: 0 auto;padding: 0.45rem 0 0 0;position: relative;}#headline hgroup {position: absolute;top: 50%;left: 10%;}#headline h2 {color: #eee;letter-spacing: 0.01rem;font-size: .22rem;}#headline h3 {color: #eee;letter-spacing: 0.01rem;font-size: .14rem;}三．公司簡介這個欄目最簡單，我們最優先完成。//html關於我們

瓢城旅行社旅遊網創立於2006 年10 月，以“讓旅遊更簡單”為使命，為消費者提供由北京、上海、廣州、深圳等64 個城市出發的旅遊產品預訂服務，產品全面，價格透明，全年365 天24 小時400 電話預訂，並提供豐富的後續服務和保障。

目前，瓢城旅行社旅遊網提供8 萬餘種旅遊產品供消費者選擇，涵蓋跟團、自助、自駕、郵輪、酒店、簽證、景區門票以及公司旅遊等，已成功服務累計超過400 萬人次出遊。

同時基於瓢城旅行社旅遊網全球中文景點目錄以及中文旅遊社區，可以更好地協助遊客瞭解目的地資訊，妥善制定好出遊計劃，並方便地預訂旅程中的服務項目。

聯絡我們

• 瓢城旅行社股份有限公司
• 地址：江蘇省鹽城市亭湖區大慶中路1234 號
• 郵編：1234567
• 電話：010-88888888
• 傳真：010-88666666

//CSS.list {max-width: 6.4rem;margin: .15rem auto;font-size: .16rem;padding: 0 .1rem;color: #666;}.list h2 {font-size: .20rem;border-bottom: 1px dashed #999;padding: 0 0 .15rem 0;}.about p {line-height: 2;margin: .2rem 0;}.about address {font-style: normal;margin: .2rem 0;line-height: 1.6;}//響應式部分/*媒體查詢，大於480px 小於640px*/@media (min-width: 480px) and (max-width: 640px) {#tour h3, #footer, #tour figcaption, #tour .info,.list {font-size: .16rem;}#headline h2 {font-size: .22rem;}#headline h3 {font-size: .14rem;}.list h2 {font-size: .20rem;}}/*媒體查詢，小於480px*/@media (max-width: 480px) {#tour h3, #tour figcaption, #tour .info,.list {font-size: .14rem;}#headline h2 {font-size: .18rem;}#headline h3 {font-size: .12rem;}.list h2 {font-size: .17rem;}}代碼：瓢城旅行社-移動端網站導航

• 首頁
• 資訊
• 票務
• 關於

票務訂購各種飛機票、火車票、汽車票和輪渡票的訂購服務機票預定用戶端 | 觸屏版 | 電腦版Copyright ? YCKU 瓢城旅行社 | 蘇ICP備120110119號瓢城旅行社-移動端網站導航

• 首頁
• 資訊
• 票務
• 關於

旅遊資訊介紹各種最新旅遊資訊、資訊要聞、景點攻略等熱門旅遊用戶端 | 觸屏版 | 電腦版Copyright ? YCKU 瓢城旅行社 | 蘇ICP備120110119號瓢城旅行社-移動端網站導航

• 首頁
• 資訊
• 票務
• 關於

搜尋熱門旅遊最新的各種熱門旅遊資訊的推薦！<曼穀-芭提雅6 日遊>

包團特惠，超豐富景點

滿意度 77%￥ 2864 起<馬爾代夫雙魚島Olhuveli4 晚6 日自助遊>

上海出發，機+酒包含:早晚餐+快艇

滿意度 97%￥ 8039 起<海南雙飛5 日遊>

含鹽城接送，全程掛牌四星酒店

滿意度90%￥ 2709 起<富山-大阪-東京8 日遊>

暑期親子，2 天自由，無導遊安排

滿意度97%￥ 9499 起<法瑞意德12 日遊>

4 至5 星，金色列車，少女峰

滿意度97%￥ 9199 起<巴厘島6 日半自助遊>

藍夢出海，獨棟別墅，悅榕莊下午茶

滿意度95%￥ 6488 起<塞舌爾杜拜9 日自助遊>

一遊兩國，4 晚塞舌爾，2 晚杜拜

滿意度100%￥ 9669 起<花樣姐姐土耳其9 日或10 日遊>

最高立減3000！中餐六菜一湯

滿意度93%￥ 9999 起用戶端 | 觸屏版 | 電腦版Copyright ? YCKU 瓢城旅行社 | 蘇ICP備120110119號瓢城旅行社-移動端網站導航

• 首頁
• 資訊
• 票務
• 關於

公司簡介公司的發展曆程、獲得榮譽以及連絡方式關於我們

瓢城旅行社旅遊網創立於2006年10月，以“讓旅遊更簡單”為使命，為消費者提供由北京、上海、廣州、深圳等64個城市出發的旅遊產品預訂服務，產品全面，價格透明，全年365天24小時400電話預訂，並提供豐富的後續服務和保障。

目前，瓢城旅行社旅遊網提供8萬餘種旅遊產品供消費者選擇，涵蓋跟團、自助、自駕、郵輪、酒店、簽證、景區門票以及公司旅遊等，已成功服務累計超過400萬人次出遊。

同時基於瓢城旅行社旅遊網全球中文景點目錄以及中文旅遊社區，可以更好地協助遊客瞭解目的地資訊，妥善制定好出遊計劃，並方便地預訂旅程中的服務項目。

聯絡我們

• 瓢城旅行社股份有限公司
• 地址：江蘇省鹽城市亭湖區大慶中路1234號
• 郵編：1234567
• 電話：010-88888888
• 傳真：010-88666666

用戶端 | 觸屏版 | 電腦版Copyright ? YCKU 瓢城旅行社 | 蘇ICP備120110119號

第32 章項目實戰-移動端流體布局5