Web前端技術項目式教程(HTML5+CSS3+Flex+Bootstrap)（簡體書）

本書以一個完整旅遊公司網站的開發項目為主線，貫穿所有知識點，較為全面地介紹了Web前端開發中使用HTML5和CSS3標準化重構網頁的技術。
全書共10個任務，包括初探Web前端技術、使用HTML5搭建旅遊公司網站首頁結構、使用DIV+CSS實現旅遊公司網站首頁佈局、使用CSS3美化超鏈接、使用CSS3製作導航、美化網頁、添加用戶交互界面――表單、使用Flex實現網頁響應式佈局、使用Bootstrap實現網頁響應式佈局、綜合練習――兒童玩具商城網站設計與製作等。每一任務都配有課後練習，幫助讀者及時鞏固所學知識；最後一章的綜合練習幫助讀者進一步提升網頁設計與製作的技能實踐水平。

任務一 初探Web前端技術 1





任務描述 1





知識引入 1





1．網站、網頁和主頁 1





2．什麼是Web和Web標準 4





3．Web前端技術的發展 4





4．搭建Web前端開發環境 5





5．Web頁面的基本結構 6





6．瀏覽器兼容性 7





任務實現：動手編寫第 一個前端頁面 7





任務小結 10





課後練習 10





任務二 使用HTML5搭建旅遊公司網站首頁結構 11





任務描述 11





知識引入 11





1．HTML5的標題、段落和文本格式化標簽 11





2．HTML5的圖片標簽 13





3．HTML5的列表標簽 14





4．HTML5的超鏈接標簽 15





5．HTML5的表格標簽 17





6．傳統的佈局標簽和 19





7．HTML5的各種語義化分段元素 19





任務實現：搭建旅遊公司網站首頁結構 22





1．規劃網站目錄結構 22





2．分析首頁文檔結構 22





3．構建首頁結構 22





4．添加網頁內容 24





任務拓展：製作旅遊公司網站二級頁面 32





任務小結 35





課後練習 35





任務三 使用DIV+CSS實現旅遊公司網站首頁佈局 36





任務描述 36





知識引入 36





1．CSS規則的基本語法 36





2．CSS選擇器 37





3．CSS規則的應用方式 40





4．CSS的層疊和繼承 41





5．CSS盒子模型 43





6．CSS盒子的定位機制 46





7．DIV+CSS佈局剖析 51





任務實現：使用DIV+CSS佈局旅遊公司首頁 55





1．新建CSS樣式表文件並應用到網頁中 55





2．基礎樣式設置 55





3．主體內容.main_top區域佈局與定位 56





5．主體內容.main_middle區域佈局與定位 58





6．主體內容.main_bottom區域佈局與定位 58





7．頁腳區域佈局與定位 58





任務拓展：使用CSS實現旅遊公司網站二級頁面“華陽湖景區”的佈局結構 59





任務小結 61





課後練習 61





任務四 使用CSS3美化超鏈接 62





任務描述 62





知識引入 62





1．超鏈接的基本屬性 62





2．CSS樣式偽類 63





3．鼠標特效 64





任務實現：實現首頁中的超鏈接效果 66





1．設置首頁頭部導航條超鏈接樣式 66





2．設置尾部超鏈接樣式 68





任務拓展：實現二級頁面“華陽湖景區”的導航條鏈接 72





任務小結 73





課後練習 73





任務五 使用CSS3製作導航 74





任務描述 74





知識引入 74





1．列表符號 74





2．圖片符號 76





3．列表符號位置 77





任務實現：製作旅遊公司網站首頁導航 79





1．編排頁面中間內容區域 81





任務拓展：製作二級菜單和職位列表 84





1．text-shadow 94





2．box-shadow 96





3．border-radius 99





4．background 101





5．opacity 102





6．Font Awesome字體圖標 103





7．Animation動畫屬性 105





任務實現：美化旅遊公司網站頁面 108





1．為網頁添加圖標 108





2．為按鈕添加陰影 108





3．設置圖片透明度 109





任務拓展：利用阿裡巴巴矢量圖標庫製作購物車 110





任務小結 112





課後練習 113





任務七 添加用戶交互界面――表單 114





任務描述 114





知識引入 114





1．標簽 115





2．元素 116





3．HTML5新增的類型 123





任務實現：製作旅遊公司網站首頁搜索框、意見反饋表 126





1．實現搜索框長度變化 133





任務小結 134





課後練習 134





任務八 使用Flex實現網頁響應式佈局 135





任務描述 135





知識引入 135





1．響應式佈局基礎知識 135





2．Flex佈局 139





任務實現：使用Flex佈局重構旅遊公司首頁 144





1．實現圖片為響應式 145





2．設置怪異盒模型計算容器寬度 145





3．媒體查詢 145





5．實現首頁頭部響應式效果 146





6．主體內容.main_top區域的實現 147





7．主體內容.main_middle區域的實現 148





8．主體內容.main_bottom區域的實現 149





9．實現頁腳效果 150





任務拓展：使用Flex佈局重構二級頁面“華陽湖景區” 151





任務小結 152





課後練習 152





任務九 使用Bootstrap實現網頁響應式佈局 153





任務描述 153





知識引入 153





1．Bootstrap環境搭建 153





2．容器 154





3．柵格系統 154





4．組件 156





任務實現：使用Bootstrap重構旅遊公司首頁 157





1．下載Bootstrap 157





2．網頁頭部代碼實現 158





3．圖片輪播效果代碼實現 159





4．公司介紹區域代碼實現 160





5．景區圖片部分代碼實現 161





6．求職信息區域代碼實現 162





7．頁腳區域代碼實現 164





任務拓展：使用Bootstrap重構二級頁面“華陽湖景區” 164





任務小結 167





課後練習 167





任務十 綜合練習――兒童玩具商城網站設計與製作 168





任務描述 168





任務實現：設計與製作兒童玩具商城網站 169





1．規劃網站目錄結構 169





2．首頁代碼實現 170





3．“進口玩具”頁面代碼實現 191





4．“相關文章”頁面代碼實現 201





5．“聯繫我們”頁面代碼實現 207





任務小結 209





課後練習 209