網(wǎng)站前端技術案例教程（HTML+CSS+JavaScript）（第二版）

以建設旅游資訊網(wǎng)站為任務驅動，將復雜的網(wǎng)站設計轉化為多個通俗易懂的任務。

第二版加入 flex 布局內容并對部分案例進行優(yōu)化，使得案例編排更合理。

配備豐富的立體化教學資源，包括源代碼、教學課件、配套視頻等。

隨著互聯(lián)網(wǎng)的快速發(fā)展和競爭日漸激烈，網(wǎng)站用戶體驗成為了重要的關注點，專業(yè)的前端工程師隨之成為熱門職業(yè)，各大公司對前端工程師的需求量都很大，要求也越來越高，優(yōu)秀的前端工程師更是稀缺。在各大人才招聘網(wǎng)站上都能看到不斷更新的前端工程師的崗位招聘需求，因此學好前端技術對就業(yè)和發(fā)展都非常有用。前端工程師的職責是制作標準優(yōu)化的代碼，增加交互動態(tài)功能，并進行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過技術改善用戶體驗。前端工程師需要掌握的技術有HTML、JavaScript、CSS，以及最新出現(xiàn)的各種框架如node.js、AngularJS、vue.js等。雖然未來會出現(xiàn)更多新技術和新框架來幫助前端工程師完成各種復雜的任務，但是它們都離不開三大核心技術：HTML、JavaScript、CSS。

本書以HTML、CSS、JavaScript 三大核心技術的知識點為主線，以建設一個旅游資訊網(wǎng)站為任務驅動，將復雜的網(wǎng)站設計操作轉化為多個通俗易懂的任務，最后匯總成一個綜合案例—“黃姚古鎮(zhèn)旅游網(wǎng)”網(wǎng)站開發(fā)。全書共分11個模塊、32個案例，每個案例以實例為引導，操作步驟清晰，有利于初學者系統(tǒng)地學習前端網(wǎng)頁設計的基礎知識，掌握網(wǎng)站開發(fā)的方法與過程。本書采用“案例驅動”編寫方式，將知識點巧妙地設計到相應案例中，使讀者在實現(xiàn)案例效果的同時掌握基礎知識。本書案例具有連貫性，最后把前面所有案例串聯(lián)起來形成一個綜合案例，讓學生的學習更有成就感。第二版加入了flex布局內容，并對部分案例進行了優(yōu)化，使得案例編排更合理，使用更方便。

本書由黃華升任主編（負責統(tǒng)稿工作），羅蘭花、袁淑丹、巫湘林、任子亭任副主編，另外參與編寫的還有韋小梧、吳繼軍、陳楊明、張琴芳、胡世洋、殷玉玲、胡元闖、陳醒基、王珍珍、黃江鑫、張紅軍等。

本書配有案例源代碼、電子教案、操作視頻等教學資源。在“學習通”平臺（https://mooc1.chaoxing.com/course/201676611.html）提供了慕課資源，方便開展混合式教學。

在本書編寫過程中，編者得到了賀州學院領導和中國水利水電出版社的幫助與支持，在此一并表示感謝。由于時間倉促，加之編者水平有限，書中疏漏甚至錯誤之處在所難免，懇請讀者批評指正。

編 者

2022年3月

第1章 網(wǎng)頁制作基礎知識 1
1.1 網(wǎng)站建設基本概念 1
1.1.1 名詞解釋 1
1.1.2 Web標準概述 3
1.2 網(wǎng)頁制作入門 4
1.2.1 HTML簡介 4
1.2.2 CSS簡介 5
1.2.3 JavaScript簡介 5
1.3 案例1：歡迎來到黃姚古鎮(zhèn) 5
1.3.1 常用編輯工具對比 5
1.3.2 使用HBuilder編輯網(wǎng)頁 7
第2章 建設基本HTML頁面 11
2.1 案例2：黃姚古鎮(zhèn)簡介 11
2.1.1 案例描述 11
2.1.2 相關知識 12
2.1.3 實現(xiàn)過程 17
2.2 案例3：黃姚古鎮(zhèn)簡介引文注釋 18
2.2.1 案例描述 18
2.2.2 相關知識 19
2.2.3 實現(xiàn)過程 21
2.3 案例4：醉黃姚—圖文黃姚簡介 22
2.3.1 案例描述 22
2.3.2 相關知識 22
2.3.3 實現(xiàn)過程 28
2.4 案例綜合練習 29
第3章 使用CSS技術美化網(wǎng)頁 31
3.1 案例5：黃姚古鎮(zhèn)多彩標題 31
3.1.1 案例描述 31
3.1.2 相關知識 31
3.1.3 實現(xiàn)過程 42
3.2 案例6：黃姚古文化遺跡簡介 43
3.2.1 案例描述 43
3.2.2 相關知識 44
3.2.3 實現(xiàn)過程 50
3.3 案例7：黃姚古鎮(zhèn)美食推薦 51
3.3.1 案例描述 51
3.3.2 相關知識 51
3.3.3 實現(xiàn)過程 55
3.4 案例綜合練習 57
第4章 CSS盒子模型 59
4.1 案例8：黃姚風景圖文欣賞 59
4.1.1 案例描述 59
4.1.2 相關知識 60
4.1.3 實現(xiàn)過程 66
4.2 案例9：黃姚最受歡迎的土特產(chǎn)推介 68
4.2.1 案例描述 68
4.2.2 相關知識 69
4.2.3 實現(xiàn)過程 73
4.3 案例10：黃姚風景明信片 75
4.3.1 案例描述 75
4.3.2 相關知識 75
4.3.3 實現(xiàn)過程 80
4.4 案例綜合練習 82
第5章 CSS的定位布局 85
5.1 案例11：友情鏈接 85
5.1.1 案例描述 85
5.1.2 相關知識 85
5.1.3 實現(xiàn)過程 91
5.2 案例12：黃姚門票網(wǎng)絡票面 92
5.2.1 案例描述 92
5.2.2 相關知識 93
5.2.3 實現(xiàn)過程 99
5.3 案例13：首頁的廣告宣傳區(qū) 101
5.3.1 案例描述 101
5.3.2 相關知識 101
5.3.3 實現(xiàn)過程 107
5.4 案例14：首頁的布局定位 109
5.4.1 案例描述 109
5.4.2 相關知識 110
5.4.3 實現(xiàn)過程 114
5.5 案例15：黃姚古鎮(zhèn)熱銷美食 117
5.5.1 案例描述 117
5.5.2 相關知識 118
5.5.3 實現(xiàn)過程 123
5.6 案例綜合練習 125
第6章 列表與超鏈接 126
6.1 案例16：新聞頁面列表 126
6.1.1 案例描述 126
6.1.2 相關知識 126
6.1.3 實現(xiàn)過程 132
6.2 案例17：旅游產(chǎn)品推薦 136
6.2.1 案例描述 136
6.2.2 相關知識 136
6.2.3 實現(xiàn)過程 142
6.3 案例18：首頁旅游攻略導航 144
6.3.1 案例描述 144
6.3.2 相關知識 145
6.3.3 實現(xiàn)過程 150
6.4 案例綜合練習 151
第7章 表格與表單 152
7.1 案例19：黃姚土特產(chǎn)銷售表 152
7.1.1 案例描述 152
7.1.2 相關知識 152
7.1.3 實現(xiàn)過程 161
7.2 案例20：注冊界面 164
7.2.1 案例描述 164
7.2.2 相關知識 165
7.2.3 實現(xiàn)過程 174
7.3 案例綜合練習 177
第8章 CSS3基礎應用 178
8.1 案例21：黃姚風景照片墻 178
8.1.1 案例描述 178
8.1.2 相關知識 178
8.1.3 實現(xiàn)過程 189
8.2 案例22：動態(tài)導航效果 193
8.2.1 案例描述 193
8.2.2 相關知識 193
8.2.3 實現(xiàn)過程 202
第9章 JavaScript基礎 208
9.1 案例23：與網(wǎng)頁對話 208
9.1.1 案例描述 208
9.1.2 相關知識 209
9.1.3 實現(xiàn)過程 212
9.2 案例24：控制字體大小 213
9.2.1 案例描述 213
9.2.2 相關知識 214
9.2.3 實現(xiàn)過程 221
9.3 案例25：商品詳情提示 222
9.3.1 案例描述 222
9.3.2 相關知識 223
9.3.3 實現(xiàn)過程 228
9.4 案例26：照片集 230
9.4.1 案例描述 230
9.4.2 相關知識 230
9.4.3 實現(xiàn)過程 236
9.5 案例27：選項卡 240
9.5.1 案例描述 240
9.5.2 相關知識 240
9.5.3 實現(xiàn)過程 244
9.6 案例綜合練習 248
第10章 JavaScript核心對象 249
10.1 案例28：秒殺商品 249
10.1.1 案例描述 249
10.1.2 相關知識 250
10.1.3 實現(xiàn)過程 257
10.2 案例29：抽取幸運觀眾 260
10.2.1 案例描述 260
10.2.2 相關知識 261
10.2.3 實現(xiàn)過程 264
10.3 案例30：文章的展開與收縮 266
10.3.1 案例描述 266
10.3.2 相關知識 267
10.3.3 實現(xiàn)過程 270
10.4 案例綜合練習 272
第11章 事件處理 274
11.1 案例31：旅游商品展示 274
11.1.1 案例描述 274
11.1.2 相關知識 275
11.1.3 實現(xiàn)過程 279
11.2 案例32：追隨鼠標的公告框 281
11.2.1 案例描述 281
11.2.2 相關知識 281
11.2.3 實現(xiàn)過程 285
11.3 案例綜合練習 286
第12章 綜合案例 287
12.1 網(wǎng)站開發(fā)流程 287
12.2 “黃姚古鎮(zhèn)旅游網(wǎng)”網(wǎng)站開發(fā) 288
12.2.1 準備工作 289
12.2.2 網(wǎng)站公共部分模板開發(fā) 294
12.2.3 網(wǎng)站主要頁面開發(fā) 297
12.3 網(wǎng)站發(fā)布 305
參考文獻 308

1. 信息技術基礎（麒麟操作系統(tǒng)+WPS Office） [主編　芮雪　蔣莉　王亮亮]
2. Office高級應用項目式教程（第2版） [主編 李觀金 張倩文 黎夏克 ]
3. 巧用翻譯學英語：英漢互譯500例 [王學文 著]
4. 高等教育多維評價體系構建與高質量發(fā)展研究 [張妍 著]
5. 系統(tǒng)規(guī)劃與管理師章節(jié)習題與考點特訓（第二版） [主編 薛大龍]
6. 計算機操作系統(tǒng)實踐指導（openEuler版） [主編 秦光 曾陳萍 岳付強]
7. 信息系統(tǒng)管理工程師真題及模考卷精析（適用機考） [主 編 薛大龍 程 剛 上官緒]
8. 航海類院校體育教育教學研究 [張利超 李寧 著]
9. 新時代背景下我國職業(yè)教育產(chǎn)教融合長效機制建設研究 [王玉賢 著]
10. 電路分析 [主編 李飛 毛先柏]
11. 信息系統(tǒng)管理工程師（適用第2版大綱）一站通關 [指尖瘋　編著]
12. 傳統(tǒng)山水畫論解讀與實踐 [陳鈉 著]
13. 網(wǎng)絡工程師備考一本通（適配第6版考綱） [夏杰 編著]
14. 陳孝云的職教理想與情懷 [祝吉太 江傳瑞 張義廷 著]
15. 地方本科院校電子信息學科課程思政案例集 [王甫]
16. Excel數(shù)據(jù)處理與分析（第二版） [主編 張志明 鄒 蕾]
17. 網(wǎng)絡工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
18. 倉儲管理實務（第二版） [周寧武 編著]
19. 基于AE與C#的地理信息系統(tǒng)二次開發(fā) [李小根 賈艷昌 喬翠平 姜彤 ]
20. 2023年長沙市文化和旅游業(yè)發(fā)展報告 [主編 陳莉]
21. 舞臺化妝造型設計 [主編 劉思彤 張 濤 張憶雨]
22. 產(chǎn)教融合視角高校體育專業(yè)實踐教學體系構建研究 [楊柳青 葉華兵 著]
23. 知識圖譜及應用案例 [張善文 黃文準 于長青 陳明淑]
24. Python程序設計案例教程（微課版） [主編　石利平　田輝平　余以勝]
25. 皓月繁星：青少年兒童心理成長手冊 [主　編　林贊歌 副主編　杜志南]
26. 材料力學 [章寶華 趙新勝 徐斌]
27. 系統(tǒng)集成項目管理工程師考試32小時通關（第3版） [主編　薛大龍 副主編　上官緒陽]
28. 軟考論文高分特訓與范文10篇——系統(tǒng)分析師（第二版） [薛大龍 鄒月平 施游]
29. 黃河海勃灣水利樞紐防凌安全運行 [王戰(zhàn)領 王叢發(fā) 范瑜彬 著]
30. 大學生心理健康教育 [方雄 著]