書單推薦 新書推薦 |
Html5+JavaScript+Css3開發(fā)手冊(cè):基礎(chǔ)·案例·應(yīng)用 讀者對(duì)象:本書不僅適合初學(xué)者、編程愛好者、零基礎(chǔ)的編程自學(xué)者,也可供計(jì)算機(jī)相關(guān)專業(yè)師生、程序開發(fā)人員以及程序測(cè)試和維護(hù)人員等閱讀參考。 ![]()
《Html5+JavaScript+Css3開發(fā)手冊(cè):基礎(chǔ)·案例·應(yīng)用》是“計(jì)算機(jī)科學(xué)與技術(shù)手冊(cè)系列”圖書之一,該系列圖書內(nèi)容全面,以理論聯(lián)系實(shí)際、能學(xué)到并做到為宗旨,以技術(shù)為核心,以案例為輔助,引領(lǐng)讀者全面學(xué)習(xí)基礎(chǔ)技術(shù)、代碼編寫方法和具體應(yīng)用項(xiàng)目,旨在為想要進(jìn)入相應(yīng)領(lǐng)域的技術(shù)人員提供新而全的技術(shù)性內(nèi)容及案例。
本書是一本側(cè)重編程基礎(chǔ)+實(shí)踐的Web前端開發(fā)圖書,從基礎(chǔ)、案例、應(yīng)用三個(gè)層次循序漸進(jìn)地介紹了Web前端開發(fā)從入門到實(shí)戰(zhàn)所需知識(shí),使讀者在打好基礎(chǔ)的同時(shí)快速提升實(shí)踐能力。本書內(nèi)容充實(shí),給讀者提供了較為豐富全面的技術(shù)支持和案例強(qiáng)化,通過各種示例將學(xué)習(xí)與應(yīng)用相結(jié)合,打造輕松學(xué)習(xí)、零壓力學(xué)習(xí)的環(huán)境,通過案例對(duì)所學(xué)知識(shí)進(jìn)行綜合應(yīng)用,通過開發(fā)實(shí)際項(xiàng)目將各個(gè)知識(shí)點(diǎn)應(yīng)用到實(shí)際工作中,幫助讀者實(shí)現(xiàn)學(xué)以致用,快速掌握前端開發(fā)的各項(xiàng)技能。 本書提供豐富的資源,包含131個(gè)實(shí)例、10個(gè)案例、2個(gè)項(xiàng)目,力求為讀者打造一本基礎(chǔ)+案例+應(yīng)用一體化的、精彩的前端開發(fā)圖書。 本書不僅適合初學(xué)者、編程愛好者、零基礎(chǔ)的編程自學(xué)者,也可供計(jì)算機(jī)相關(guān)專業(yè)師生、程序開發(fā)人員以及程序測(cè)試和維護(hù)人員等閱讀參考。
基礎(chǔ)篇 第1章 HTML基礎(chǔ) 1.1 HTML基礎(chǔ) 2 1.1.1 什么是HTML 2 1.1.2 HTML的發(fā)展歷程 3 1.2 HTML5相關(guān)概念與基本結(jié)構(gòu) 3 1.2.1 HTML5的相關(guān)概念 3 1.2.2 HTML5的基本結(jié)構(gòu) 4 【實(shí)例1.1】運(yùn)用屬性,渲染頁面效果 6 1.3 編寫第一個(gè)HTML5文件 9 1.3.1 HTML5文件的編寫方法 9 1.3.2 手工編寫頁面 9 1.3.3 使用可視化軟件制作頁面 10 第2章 標(biāo)題和段落 2.1 添加標(biāo)題 15 2.1.1 添加各級(jí)標(biāo)題 16 【實(shí)例2.1】巧用標(biāo)題標(biāo)簽,編寫程序員笑話 16 2.1.2 設(shè)置標(biāo)題的對(duì)齊方式 17 【實(shí)例2.2】活用文字居中,推薦商品信息 18 2.2 添加段落 18 2.2.1 段落標(biāo)簽的使用 18 【實(shí)例2.3】巧用段落標(biāo)簽,介紹創(chuàng)意文字 19 2.2.2 段落中的換行標(biāo)簽 19 【實(shí)例2.4】巧用換行,書寫故事 19 2.3 添加文字裝飾效果 20 2.3.1 設(shè)置上標(biāo)與下標(biāo) 20 【實(shí)例2.5】使用上下標(biāo),展示數(shù)學(xué)方程式 21 2.3.2 文字的斜體、下劃線與刪除線 21 【實(shí)例2.6】活用文字裝飾,推薦商品信息 21 2.4 添加水平線 22 【實(shí)例2.7】巧用水平線繪制行表格 22 2.5 綜合案例——二十四節(jié)氣歌 23 2.5.1 分析數(shù)據(jù) 23 2.5.2 實(shí)現(xiàn)過程 24 2.6 實(shí)戰(zhàn)練習(xí) 24 第3章 圖像和超鏈接 3.1 添加圖像 25 3.1.1 圖像的基本格式 25 3.1.2 添加圖像 26 【實(shí)例3.1】使用 3.2 設(shè)置圖像屬性 27 3.2.1 圖像大小與邊框 27 【實(shí)例3.2】改變手機(jī)商品詳情中的圖片大小和邊框 27 3.2.2 替換文本與提示文字 28 【實(shí)例3.3】設(shè)置圖片的提示文字與替換文本 28 3.2.3 圖像間距與對(duì)齊方式 29 【實(shí)例3.4】使用align屬性改變頭像的位置 30 3.3 添加超鏈接 30 3.3.1 添加文本鏈接 30 【實(shí)例3.5】巧用文本鏈接實(shí)現(xiàn)商城導(dǎo)航 31 3.3.2 添加書簽鏈接 31 【實(shí)例3.6】巧用書簽鏈接實(shí)現(xiàn)商城網(wǎng)頁內(nèi)部跳轉(zhuǎn) 32 3.4 圖像的超鏈接與熱區(qū)鏈接 33 3.4.1 圖像的超鏈接 33 【實(shí)例3.7】添加圖片鏈接實(shí)現(xiàn)手機(jī)風(fēng)暴模塊 33 3.4.2 圖像熱區(qū)鏈接 35 【實(shí)例3.8】使用熱區(qū)鏈接添加多個(gè)鏈接地址 35 3.5 綜合案例——實(shí)現(xiàn)明日學(xué)院明星講師頁面的跳轉(zhuǎn) 36 3.5.1 案例分析 37 3.5.2 實(shí)現(xiàn)過程 37 3.6 實(shí)戰(zhàn)練習(xí) 38 第4章 表格與 標(biāo)簽、標(biāo)簽 4.1 簡(jiǎn)單表格 39 4.1.1 簡(jiǎn)單表格的制作 39 【實(shí)例4.1】使用表格標(biāo)簽編寫考試成績(jī)單 40 4.1.2 表頭的設(shè)置 41 【實(shí)例4.2】使用表頭標(biāo)簽制作簡(jiǎn)單課程表 41 4.2 表格的高級(jí)應(yīng)用 42 4.2.1 表格的樣式 42 【實(shí)例4.3】制作商品推薦表格 43 4.2.2 表格的合并 44 【實(shí)例4.4】使用表格制作復(fù)雜課程表 44 4.2.3 表格的分組 45 【實(shí)例4.5】使用表格分組制作學(xué)生聯(lián)系表 45 4.3 標(biāo)簽 46 4.3.1 標(biāo)簽的介紹 46 【實(shí)例4.6】使用 標(biāo)簽制作古詩一首 47
4.3.2 標(biāo)簽的應(yīng)用 47
【實(shí)例4.7】使用 標(biāo)簽制作個(gè)人簡(jiǎn)歷 48
4.4 標(biāo)簽 48 4.4.1 標(biāo)簽的介紹 48 【實(shí)例4.8】使用不同的語言表述“我愛你” 49 4.4.2 標(biāo)簽的應(yīng)用 49 【實(shí)例4.9】使用標(biāo)簽制作公司介紹短文 49 4.5 綜合案例——制作網(wǎng)頁中的女裝模塊 50 4.5.1 案例分析 50 4.5.2 實(shí)現(xiàn)過程 51 4.6 實(shí)戰(zhàn)練習(xí) 52 第5章 列表 5.1 列表的標(biāo)簽 53 5.2 無序列表 54 5.2.1 無序列表標(biāo)簽 54 【實(shí)例5.1】運(yùn)用無序列表顯示NBA東部聯(lián)盟球隊(duì)前四強(qiáng) 54 5.2.2 無序列表屬性 54 【實(shí)例5.2】運(yùn)用無序列表顯示全球品牌價(jià)值100強(qiáng)的前三名 55 5.3 有序列表 57 5.3.1 有序列表標(biāo)簽 57 【實(shí)例5.3】運(yùn)用有序列表顯示2018年俄羅斯世界杯排名前四強(qiáng) 57 5.3.2 有序列表屬性 58 【實(shí)例5.4】運(yùn)用有序列表制作商城頁面 58 5.4 定義列表 59 【實(shí)例5.5】運(yùn)用定義列表顯示古詩二首 60 5.5 無序列表和有序列表的嵌套 60 【實(shí)例5.6】運(yùn)用無序列表和有序列表制作導(dǎo)航欄 60 5.6 綜合案例——使用列表制作二級(jí)導(dǎo)航菜單 62 5.6.1 案例分析 62 5.6.2 案例實(shí)現(xiàn) 62 5.7 實(shí)戰(zhàn)練習(xí) 64 第6章 表單 6.1 表單概述 65 6.1.1 什么是表單 65 6.1.2 表單標(biāo)簽 6.2 輸入標(biāo)簽 67 6.2.1 文本框和密碼框 67 【實(shí)例6.1】制作商城中賬號(hào)登錄頁面 68 6.2.2 單選按鈕和復(fù)選框 69 【實(shí)例6.2】實(shí)現(xiàn)購物車頁面選擇商品功能 69 6.2.3 按鈕 70 【實(shí)例6.3】制作收貨地址信息填寫頁面 71 6.2.4 圖像域和文件域 72 【實(shí)例6.4】實(shí)現(xiàn)注冊(cè)頁面中的上傳圖像功能 73 6.3 文本域和列表 74 6.3.1 文本域 74 【實(shí)例6.5】制作商品評(píng)價(jià)頁面中的評(píng)價(jià)輸入框 74 6.3.2 列表/菜單 74 【實(shí)例6.6】實(shí)現(xiàn)個(gè)人檔案填寫 75 6.4 綜合案例——制作在線租房信息填寫頁面 77 6.4.1 案例分析 77 6.4.2 案例實(shí)現(xiàn) 78 6.5 實(shí)戰(zhàn)練習(xí) 81 第7章 CSS3選擇器 7.1 CSS3選擇器概述 82 7.1.1 CSS3的發(fā)展史 82 7.1.2 一個(gè)簡(jiǎn)單的CSS3示例 83 7.1.3 選擇器概述 85 7.2 基礎(chǔ)選擇器 86 7.2.1 元素選擇器 86 【實(shí)例7.1】使用元素選擇器實(shí)現(xiàn)生日賀卡的樣式 86 7.2.2 類選擇器 87 7.2.3 ID選擇器 88 【實(shí)例7.2】制作網(wǎng)購商城中的爆款特賣頁面 89 7.2.4 屬性選擇器 91 【實(shí)例7.3】制作51購商城首頁的手機(jī)風(fēng)暴版塊 91 7.3 其他選擇器 93 7.3.1 后代選擇器 93 7.3.2 子代選擇器 94 7.3.3 相鄰兄弟元素選擇器 95 7.3.4 通用兄弟元素選擇器 96 7.4 偽類和偽元素選擇器 97 7.4.1 偽類選擇器 97 7.4.2 偽元素選擇器 98 【實(shí)例7.4】制作vivo X9s手機(jī)的宣傳頁面 98 7.5 綜合案例——仿制個(gè)人空間主頁 100 7.5.1 案例分析 100 7.5.2 案例實(shí)現(xiàn) 101 7.6 實(shí)戰(zhàn)練習(xí) 103 第8章 CSS3常用屬性 8.1 文本相關(guān)屬性 104 8.1.1 文字相關(guān)屬性 104 【實(shí)例8.1】制作網(wǎng)購商城的商品搶購頁面 106 8.1.2 文本相關(guān)屬性 107 【實(shí)例8.2】演示word-break屬性的功能 108 8.2 背景相關(guān)屬性 109 8.2.1 背景常規(guī)屬性 109 【實(shí)例8.3】實(shí)現(xiàn)為登錄頁面插入背景圖像 111 8.2.2 CSS3新增背景屬性 112 8.3 列表相關(guān)屬性 116 【實(shí)例8.4】更改鼠標(biāo)懸停在二級(jí)導(dǎo)航菜單上時(shí)的列表項(xiàng)符號(hào) 116 8.4 框模型 118 8.4.1 框模型概述 118 8.4.2 設(shè)置元素的大小 118 8.4.3 設(shè)置外邊距 118 【實(shí)例8.5】實(shí)現(xiàn)對(duì)vivo系列手機(jī)兒童模式的介紹 120 8.4.4 設(shè)置內(nèi)邊距 121 【實(shí)例8.6】制作手機(jī)商城中的新品專區(qū)頁面 121 8.4.5 設(shè)置邊框 122 【實(shí)例8.7】制作購物商城中的商品列表頁面 124 8.5 定位相關(guān)屬性 125 8.5.1 設(shè)置元素的位置 125 【實(shí)例8.8】實(shí)現(xiàn)鼠標(biāo)滑過垂直菜單時(shí),展開對(duì)應(yīng)的內(nèi)容 126 8.5.2 設(shè)置元素的浮動(dòng) 127 【實(shí)例8.9】在商品詳情頁面, 8.6 綜合案例——制作換季換新機(jī)促銷頁面 129 8.6.1 案例分析 129 8.6.2 案例實(shí)現(xiàn) 129 8.7 實(shí)戰(zhàn)練習(xí) 131 第9章 響應(yīng)式網(wǎng)頁設(shè)計(jì) 9.1 響應(yīng)式網(wǎng)頁設(shè)計(jì)概述 132 9.1.1 響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念 132 9.1.2 響應(yīng)式網(wǎng)頁設(shè)計(jì)的優(yōu)缺點(diǎn) 132 9.1.3 響應(yīng)式網(wǎng)頁設(shè)計(jì)的技術(shù)原理 133 9.2 像素和屏幕分辨率 134 9.2.1 像素和屏幕分辨率 134 9.2.2 設(shè)備像素和CSS像素 134 9.3 視口 135 9.3.1 視口簡(jiǎn)介 135 9.3.2 視口常用屬性 136 9.3.3 媒體查詢 136 9.4 響應(yīng)式網(wǎng)頁的布局設(shè)計(jì) 137 9.4.1 常用布局類型 137 9.4.2 布局的實(shí)現(xiàn)方式 138 9.4.3 響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn) 139 【實(shí)例9.1】實(shí)現(xiàn)51購商城登錄頁面的響應(yīng)式布局 140 9.5 綜合案例——制作響應(yīng)式表格 142 9.5.1 案例分析 142 9.5.2 案例實(shí)現(xiàn) 142 9.6 實(shí)戰(zhàn)練習(xí) 144 第10章 Bootstrap基礎(chǔ) 10.1 Bootstrap概述 145 10.1.1 Bootstrap是什么 145 10.1.2 Bootstrap的優(yōu)點(diǎn) 145 10.1.3 Bootstrap包含的內(nèi)容 146 10.2 Bootstrap的下載與安裝 146 10.2.1 Bootstrap的下載 146 10.2.2 Bootstrap的文件結(jié)構(gòu) 147 10.3 Bootstrap通用樣式 148 10.3.1 文字相關(guān)樣式 148 【實(shí)例10.1】實(shí)現(xiàn)《東北吃貨進(jìn)行曲》的歌詞 149 【實(shí)例10.2】實(shí)現(xiàn)華為P30 Pro手機(jī)簡(jiǎn)介 150 10.3.2 顏色相關(guān)樣式 150 【實(shí)例10.3】制作拼多多中多多果然獲取水滴頁面 152 10.3.3 設(shè)置內(nèi)外邊距 153 【實(shí)例10.4】制作人見人愛獎(jiǎng)狀頁面 154 10.3.4 設(shè)置邊框與浮動(dòng) 154 【實(shí)例10.5】仿制簡(jiǎn)易密碼輸入器頁面 155 【實(shí)例10.6】仿制電商網(wǎng)站首頁中“用券爆款”頁面 156 10.4 Bootstrap中的網(wǎng)格布局 157 10.4.1 網(wǎng)格系統(tǒng)的基本使用 157 【實(shí)例10.7】使用網(wǎng)格系統(tǒng)來布局一則360每日趣玩消息 159 10.4.2 自動(dòng)布局列 159 【實(shí)例10.8】設(shè)計(jì)游戲列表頁面的響應(yīng)式布局 161 10.4.3 項(xiàng)目的對(duì)齊處理 161 【實(shí)例10.9】設(shè)計(jì)游戲列表的響應(yīng)式水平對(duì)齊方式 162 【實(shí)例10.10】設(shè)計(jì)游戲列表的響應(yīng)式垂直對(duì)齊方式 164 10.4.4 列的偏移、嵌套和重排序 164 【實(shí)例10.11】使用列偏移等間距對(duì)齊游戲列表 165 【實(shí)例10.12】實(shí)現(xiàn)為商品列表按價(jià)格進(jìn)行排序 166 10.5 綜合案例——制作音樂網(wǎng)站的熱門推薦列表 167 10.5.1 案例分析 168 10.5.2 案例實(shí)現(xiàn) 168 10.6 實(shí)戰(zhàn)練習(xí) 169 第11章 JavaScript基礎(chǔ) 11.1 JavaScript概述 170 11.1.1 JavaScript的發(fā)展 170 11.1.2 JavaScript的主要特點(diǎn) 171 11.1.3 JavaScript的應(yīng)用 171 11.1.4 JavaScript在HTML中的使用 172 【實(shí)例11.1】編寫第一個(gè)JavaScript程序 173 【實(shí)例11.2】調(diào)用外部JavaScript文件 173 11.1.5 基本語法 174 11.2 數(shù)據(jù)類型 176 11.2.1 數(shù)值型 176 11.2.2 字符串型 178 11.2.3 布爾型 179 11.2.4 特殊數(shù)據(jù)類型 179 11.3 變量 180 11.3.1 變量的命名 180 11.3.2 變量的聲明 180 11.3.3 變量的賦值 181 11.3.4 變量的類型 182 【實(shí)例11.3】輸出球員信息 182 11.4 運(yùn)算符和表達(dá)式 182 11.4.1 算術(shù)運(yùn)算符 182 【實(shí)例11.4】將華氏度轉(zhuǎn)換為攝氏度 183 11.4.2 字符串運(yùn)算符 183 【實(shí)例11.5】字符串運(yùn)算符的使用 184 11.4.3 比較運(yùn)算符 184 【實(shí)例11.6】比較運(yùn)算符的使用 185 11.4.4 賦值運(yùn)算符 185 【實(shí)例11.7】賦值運(yùn)算符的使用 185 11.4.5 邏輯運(yùn)算符 186 【實(shí)例11.8】邏輯運(yùn)算符的使用 186 11.4.6 條件運(yùn)算符 186 【實(shí)例11.9】條件運(yùn)算符的使用 187 11.4.7 其他運(yùn)算符 187 11.4.8 運(yùn)算符優(yōu)先級(jí) 188 【實(shí)例11.10】運(yùn)算符優(yōu)先級(jí)的使用 189 11.4.9 表達(dá)式 190 11.5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 190 11.6 綜合案例——判斷員工收入 191 11.6.1 案例分析 191 11.6.2 實(shí)現(xiàn)過程 191 11.7 實(shí)戰(zhàn)練習(xí) 192 第12章 流程控制 12.1 條件判斷語句 193 12.1.1 if語句 193 【實(shí)例12.1】獲取3個(gè)數(shù)中的最大值 194 【實(shí)例12.2】判斷3是奇數(shù)還是偶數(shù) 196 【實(shí)例12.3】輸出考試成績(jī)對(duì)應(yīng)的等級(jí) 197 【實(shí)例12.4】判斷女職工是否已經(jīng)退休 198 12.1.2 switch語句 198 【實(shí)例12.5】輸出獎(jiǎng)項(xiàng)級(jí)別及獎(jiǎng)品 200 12.2 循環(huán)語句 200 12.2.1 while語句 201 【實(shí)例12.6】計(jì)算3000米障礙比賽的完整圈數(shù) 202 12.2.2 do...while語句 202 【實(shí)例12.7】計(jì)算1+2+…+100的和 203 12.2.3 for語句 203 【實(shí)例12.8】計(jì)算50以內(nèi)所有奇數(shù)的和 204 12.2.4 循環(huán)語句的嵌套 205 【實(shí)例12.9】輸出乘法口訣表 205 12.3 跳轉(zhuǎn)語句 205 12.3.1 continue語句 206 【實(shí)例12.10】輸出影廳座位圖 206 12.3.2 break語句 207 12.4 綜合案例——輸出表格 208 12.4.1 案例分析 208 12.4.2 實(shí)現(xiàn)過程 208 12.5 實(shí)戰(zhàn)練習(xí) 209 第13章 函數(shù) 13.1 函數(shù)的定義和調(diào)用 210 13.1.1 函數(shù)的定義 210 13.1.2 函數(shù)的調(diào)用 211 13.2 函數(shù)的參數(shù)和返回值 213 13.2.1 函數(shù)的參數(shù) 213 【實(shí)例13.1】輸出圖書名稱和圖書作者 213 13.2.2 函數(shù)的返回值 214 【實(shí)例13.2】計(jì)算購物車中商品的總價(jià) 214 13.3 嵌套函數(shù) 215 13.3.1 函數(shù)的嵌套定義 215 13.3.2 函數(shù)的嵌套調(diào)用 215 【實(shí)例13.3】獲得選手的平均分 216 13.4 變量的作用域 216 13.4.1 全局變量和局部變量 216 13.4.2 變量的優(yōu)先級(jí) 217 13.5 內(nèi)置函數(shù) 217 13.5.1 數(shù)值處理函數(shù) 217 13.5.2 字符串處理函數(shù) 219 13.6 在表達(dá)式中定義函數(shù) 220 【實(shí)例13.4】輸出星號(hào)金字塔形圖案 221 13.7 綜合案例——輸出自定義的表格 221 13.7.1 案例分析 222 13.7.2 實(shí)現(xiàn)過程 222 13.8 實(shí)戰(zhàn)練習(xí) 223 第14章 對(duì)象 14.1 對(duì)象簡(jiǎn)介 224 14.1.1 什么是對(duì)象 224 14.1.2 對(duì)象的屬性和方法 224 14.1.3 JavaScript對(duì)象的種類 225 14.2 自定義對(duì)象的創(chuàng)建 225 14.2.1 直接創(chuàng)建自定義對(duì)象 226 14.2.2 通過自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象 226 【實(shí)例14.1】輸出演員個(gè)人簡(jiǎn)介 227 14.2.3 通過Object對(duì)象創(chuàng)建自定義對(duì)象 228 14.3 Array對(duì)象 229 14.3.1 數(shù)組介紹 230 14.3.2 定義數(shù)組 230 14.3.3 操作數(shù)組元素 231 【實(shí)例14.2】輸出3個(gè)學(xué)霸姓名 232 14.3.4 獲取數(shù)組的長(zhǎng)度 234 【實(shí)例14.3】輸出省份、省會(huì)以及旅游景點(diǎn) 234 14.3.5 數(shù)組的方法 235 14.4 String對(duì)象 240 14.4.1 String對(duì)象的創(chuàng)建 240 14.4.2 獲取字符串的長(zhǎng)度 241 14.4.3 String對(duì)象的方法 241 【實(shí)例14.4】獲取字符“兵”在繞口令中出現(xiàn)的次數(shù) 242 【實(shí)例14.5】截取網(wǎng)站公告標(biāo)題 244 14.5 Math對(duì)象 247 14.5.1 Math對(duì)象的屬性 247 14.5.2 Math對(duì)象的方法 248 【實(shí)例14.6】生成指定位數(shù)的隨機(jī)數(shù) 248 14.6 Date對(duì)象 249 14.6.1 創(chuàng)建Date對(duì)象 249 14.6.2 Date對(duì)象的方法 250 【實(shí)例14.7】輸出當(dāng)前的日期和時(shí)間 252 【實(shí)例14.8】獲取當(dāng)前日期距離明年元旦的天數(shù) 252 14.7 綜合案例——2020年內(nèi)地電影票房排行 253 14.7.1 案例分析 253 14.7.2 實(shí)現(xiàn)過程 254 14.8 實(shí)戰(zhàn)練習(xí) 255 第15章 事件處理 15.1 事件與事件處理概述 256 15.1.1 什么是事件 256 15.1.2 事件的調(diào)用 257 15.1.3 Event對(duì)象 258 15.2 表單相關(guān)事件 258 15.2.1 獲得焦點(diǎn)與失去焦點(diǎn)事件 258 【實(shí)例15.1】改變文本框的背景顏色 258 15.2.2 失去焦點(diǎn)內(nèi)容改變事件 259 【實(shí)例15.2】改變文本框的字體顏色 259 15.2.3 表單提交與重置事件 260 【實(shí)例15.3】驗(yàn)證提交表單中是否有空值 260 15.3 鼠標(biāo)鍵盤事件 261 15.3.1 鼠標(biāo)單擊事件 261 【實(shí)例15.4】動(dòng)態(tài)改變頁面的背景顏色 261 15.3.2 鼠標(biāo)按下和松開事件 262 【實(shí)例15.5】用事件模擬超鏈接標(biāo)簽的功能 262 15.3.3 鼠標(biāo)移入移出事件 263 【實(shí)例15.6】動(dòng)態(tài)改變圖片的透明度 263 15.3.4 鼠標(biāo)移動(dòng)事件 263 15.3.5 鍵盤事件 264 15.4 頁面事件 265 15.4.1 頁面加載事件 265 【實(shí)例15.7】動(dòng)態(tài)改變圖片大小 265 15.4.2 頁面大小事件 266 15.5 綜合案例——二級(jí)聯(lián)動(dòng)菜單 266 15.5.1 案例分析 266 15.5.2 實(shí)現(xiàn)過程 267 15.6 實(shí)戰(zhàn)練習(xí) 268 第16章 DOM編程 16.1 DOM概述 269 16.2 獲取HTML元素 270 16.2.1 通過元素的id屬性獲取元素 271 【實(shí)例16.1】在頁面的指定位置顯示當(dāng)前日期 271 16.2.2 通過元素的標(biāo)簽名獲取元素 271 16.2.3 通過元素的類名獲取元素 272 16.3 DOM對(duì)象節(jié)點(diǎn)屬性 272 16.4 節(jié)點(diǎn)的操作 273 16.4.1 創(chuàng)建節(jié)點(diǎn) 273 【實(shí)例16.2】補(bǔ)全古詩 273 16.4.2 插入節(jié)點(diǎn) 274 【實(shí)例16.3】向頁面中插入文本 274 16.4.3 復(fù)制節(jié)點(diǎn) 275 【實(shí)例16.4】復(fù)制下拉菜單 275 16.4.4 刪除節(jié)點(diǎn) 275 【實(shí)例16.5】動(dòng)態(tài)刪除選中的文本 276 16.4.5 替換節(jié)點(diǎn) 276 【實(shí)例16.6】選擇頭像 276 16.5 獲取或設(shè)置元素內(nèi)容 277 【實(shí)例16.7】顯示時(shí)間和問候語 277 16.6 綜合案例——歌曲置頂和刪除 278 16.6.1 案例分析 278 16.6.2 實(shí)現(xiàn)過程 278 16.7 實(shí)戰(zhàn)練習(xí) 280 第17章 jQuery技術(shù) 17.1 jQuery下載與配置 281 17.1.1 下載jQuery 281 17.1.2 配置jQuery 282 17.2 jQuery選擇器 282 17.2.1 jQuery的工廠函數(shù) 282 17.2.2 基本選擇器 283 【實(shí)例17.1】篩選元素并添加新的樣式 283 17.2.3 層級(jí)選擇器 284 【實(shí)例17.2】為指定元素添加樣式 285 17.2.4 過濾選擇器 285 【實(shí)例17.3】實(shí)現(xiàn)帶表頭的雙色表格 286 17.2.5 屬性選擇器 288 17.2.6 表單選擇器 288 17.3 jQuery控制頁面 289 17.3.1 對(duì)元素內(nèi)容和值進(jìn)行操作 289 【實(shí)例17.4】為多行列表框設(shè)置并獲取值 291 17.3.2 對(duì)DOM節(jié)點(diǎn)進(jìn)行操作 291 【實(shí)例17.5】開心小農(nóng)場(chǎng) 293 17.3.3 對(duì)元素屬性進(jìn)行操作 294 【實(shí)例17.6】改變圖片大小 295 17.3.4 對(duì)元素的CSS樣式進(jìn)行操作 295 【實(shí)例17.7】為圖片添加和去除邊框 296 17.4 jQuery的事件處理 297 17.4.1 頁面加載響應(yīng)事件 297 17.4.2 jQuery中的事件 298 17.4.3 事件綁定 299 17.4.4 模擬用戶操作 300 【實(shí)例17.8】切換表情圖片 300 17.5 jQuery的動(dòng)畫效果 301 17.5.1 基本的動(dòng)畫效果 301 【實(shí)例17.9】實(shí)現(xiàn)自動(dòng)隱藏式菜單 302 17.5.2 滑動(dòng)效果 303 17.5.3 自定義的動(dòng)畫效果 304 【實(shí)例17.10】實(shí)現(xiàn)幕簾的效果 304 17.6 綜合案例——驗(yàn)證用戶注冊(cè)信息 306 17.6.1 案例分析 306 17.6.2 實(shí)現(xiàn)過程 306 17.7 實(shí)戰(zhàn)練習(xí) 308 第18章 Vue.js框架 18.1 什么是Vue.js 309 18.2 Vue.js的安裝 310 18.3 Vue實(shí)例及選項(xiàng) 311 18.3.1 掛載元素 311 18.3.2 數(shù)據(jù) 311 18.3.3 方法 312 18.4 數(shù)據(jù)綁定 313 18.4.1 插值 313 【實(shí)例18.1】插入文本 313 【實(shí)例18.2】插入HTML內(nèi)容 313 18.4.2 過濾器 314 【實(shí)例18.3】截取新聞標(biāo)題 314 18.5 指令 315 18.5.1 v-bind指令 315 【實(shí)例18.4】設(shè)置文字樣式 315 18.5.2 v-on指令 316 【實(shí)例18.5】動(dòng)態(tài)改變圖片透明度 316 18.5.3 v-if指令 317 18.5.4 v-else指令 318 18.5.5 v-for指令 318 18.5.6 v-model指令 319 18.6 綜合案例——選擇職位 319 18.6.1 案例分析 319 18.6.2 實(shí)現(xiàn)過程 320 18.7 實(shí)戰(zhàn)練習(xí) 321 案例篇 第19章 游戲公園(HTML+CSS+JavaScript+Bootstrap) 19.1 系統(tǒng)預(yù)覽 323 19.2 案例準(zhǔn)備 323 19.3 功能結(jié)構(gòu) 323 19.4 實(shí)現(xiàn)過程 324 19.4.1 “主頁”的設(shè)計(jì)與實(shí)現(xiàn) 324 19.4.2 “博客列表”的設(shè)計(jì)與實(shí)現(xiàn) 327 19.4.3 “博客詳情”的設(shè)計(jì)與實(shí)現(xiàn) 328 19.4.4 “關(guān)于我們”的設(shè)計(jì)與實(shí)現(xiàn) 329 第20章 咸魚簡(jiǎn)歷(HTML+CSS+jQuery+Bootstrap) 20.1 系統(tǒng)預(yù)覽 333 20.2 案例準(zhǔn)備 335 20.3 功能結(jié)構(gòu) 335 20.4 實(shí)現(xiàn)流程 336 20.4.1 導(dǎo)航菜單 336 20.4.2 自我介紹 337 20.4.3 工作經(jīng)驗(yàn) 339 20.4.4 參與項(xiàng)目 340 20.4.5 聯(lián)系方式 340 第21章 抖音秀(HTML+CSS+JavaScript+H5FullScreenPage插件) 21.1 系統(tǒng)預(yù)覽 342 21.2 案例準(zhǔn)備 342 21.3 功能結(jié)構(gòu) 343 21.4 實(shí)現(xiàn)過程 343 21.4.1 頁頭頁尾區(qū) 343 21.4.2 視頻功能區(qū) 345 21.4.3 掛件功能區(qū) 347 第22章 旅游信息網(wǎng)(HTML+CSS+jQuery+jquery.faded插件) 22.1 案例效果預(yù)覽 349 22.2 案例準(zhǔn)備 351 22.3 功能結(jié)構(gòu) 351 22.4 實(shí)現(xiàn)過程 351 22.4.1 實(shí)現(xiàn)網(wǎng)站公共header和footer 351 22.4.2 網(wǎng)站主頁設(shè)計(jì) 354 22.4.3 “留下足跡”頁面設(shè)計(jì) 356 第23章 用戶注冊(cè)與登錄驗(yàn)證(HTML+CSS+JavaScript+jQuery) 23.1 案例效果預(yù)覽 358 23.2 案例準(zhǔn)備 358 23.3 業(yè)務(wù)流程 359 23.4 實(shí)現(xiàn)過程 359 23.4.1 注冊(cè)頁面設(shè)計(jì) 359 23.4.2 用戶注冊(cè)驗(yàn)證 360 23.4.3 登錄頁面設(shè)計(jì) 361 23.4.4 驗(yàn)證滑塊設(shè)計(jì) 362 23.4.5 用戶登錄驗(yàn)證 363 第24章 計(jì)算器(HTML+CSS+JavaScript) 24.1 案例效果預(yù)覽 365 24.2 案例準(zhǔn)備 365 24.3 業(yè)務(wù)流程 366 24.4 實(shí)現(xiàn)過程 366 24.4.1 計(jì)算器頁面設(shè)計(jì) 366 24.4.2 基本計(jì)算功能的實(shí)現(xiàn) 368 24.4.3 特殊功能的實(shí)現(xiàn) 370 第25章 幸運(yùn)大抽獎(jiǎng)(HTML+CSS+JavaScript) 25.1 案例效果預(yù)覽 371 25.2 案例準(zhǔn)備 371 25.3 業(yè)務(wù)流程 372 25.4 實(shí)現(xiàn)過程 372 25.4.1 抽獎(jiǎng)頁面設(shè)計(jì) 372 25.4.2 抽獎(jiǎng)功能的實(shí)現(xiàn) 373 第26章 貪吃蛇小游戲(HTML+CSS+JavaScript) 26.1 案例效果預(yù)覽 377 26.2 案例準(zhǔn)備 378 26.3 業(yè)務(wù)流程 378 26.4 實(shí)現(xiàn)過程 378 26.4.1 游戲初始頁面設(shè)計(jì) 378 26.4.2 游戲操作 380 第27章 別踩白塊兒小游戲(HTML+CSS+JavaScript) 27.1 案例效果預(yù)覽 382 27.2 案例準(zhǔn)備 382 27.3 業(yè)務(wù)流程 383 27.4 實(shí)現(xiàn)過程 383 27.4.1 游戲初始頁面設(shè)計(jì) 383 27.4.2 游戲頁面設(shè)計(jì) 385 27.4.3 游戲結(jié)束與重新開始游戲 386 第28章 手機(jī)端看圖猜詞小游戲(HTML+CSS+JavaScript+jQuery) 28.1 案例效果預(yù)覽 388 28.2 案例準(zhǔn)備 388 28.3 業(yè)務(wù)流程 388 28.4 實(shí)現(xiàn)過程 389 28.4.1 構(gòu)建看圖猜詞頁面 389 28.4.2 看圖猜詞功能的實(shí)現(xiàn) 390 應(yīng)用篇 第29章 51購商城 29.1 項(xiàng)目的設(shè)計(jì)思路 395 29.1.1 項(xiàng)目概述 395 29.1.2 頁面預(yù)覽 396 29.1.3 系統(tǒng)功能結(jié)構(gòu) 397 29.1.4 系統(tǒng)業(yè)務(wù)流程 397 29.1.5 文件夾組織結(jié)構(gòu) 398 29.2 主頁的設(shè)計(jì)與實(shí)現(xiàn) 398 29.2.1 主頁的設(shè)計(jì) 398 29.2.2 頂部區(qū)和底部區(qū)功能的實(shí)現(xiàn) 399 29.2.3 商品分類導(dǎo)航功能的實(shí)現(xiàn) 401 29.2.4 輪播圖功能的實(shí)現(xiàn) 402 29.2.5 商品推薦功能的實(shí)現(xiàn) 404 29.2.6 適配移動(dòng)端的實(shí)現(xiàn) 405 29.3 商品列表頁面的設(shè)計(jì)與實(shí)現(xiàn) 406 29.3.1 商品列表頁面的設(shè)計(jì) 406 29.3.2 分類選項(xiàng)功能的實(shí)現(xiàn) 406 29.3.3 商品列表區(qū)的實(shí)現(xiàn) 408 29.4 商品詳情頁面的設(shè)計(jì)與實(shí)現(xiàn) 409 29.4.1 商品詳情頁面的設(shè)計(jì) 410 29.4.2 圖片放大鏡效果的實(shí)現(xiàn) 411 29.4.3 商品概要功能的實(shí)現(xiàn) 412 29.4.4 商品評(píng)價(jià)功能的實(shí)現(xiàn) 414 29.4.5 猜你喜歡功能的實(shí)現(xiàn) 415 29.5 購物車頁面的設(shè)計(jì)與實(shí)現(xiàn) 416 29.5.1 購物車頁面的設(shè)計(jì) 417 29.5.2 購物車頁面的實(shí)現(xiàn) 417 29.6 付款頁面的設(shè)計(jì)與實(shí)現(xiàn) 418 29.6.1 付款頁面的設(shè)計(jì) 418 29.6.2 付款頁面的實(shí)現(xiàn) 418 29.7 登錄注冊(cè)頁面的設(shè)計(jì)與實(shí)現(xiàn) 421 29.7.1 登錄注冊(cè)頁面的設(shè)計(jì) 421 29.7.2 登錄頁面的實(shí)現(xiàn) 421 29.7.3 注冊(cè)頁面的實(shí)現(xiàn) 422 第30章 365影視網(wǎng)站設(shè)計(jì) 30.1 系統(tǒng)分析 425 30.2 系統(tǒng)設(shè)計(jì) 425 30.2.1 系統(tǒng)目標(biāo) 425 30.2.2 系統(tǒng)功能結(jié)構(gòu) 426 30.2.3 系統(tǒng)業(yè)務(wù)流程 426 30.2.4 網(wǎng)頁預(yù)覽 426 30.3 系統(tǒng)開發(fā)必備 427 30.3.1 開發(fā)環(huán)境 427 30.3.2 文件夾組織結(jié)構(gòu) 429 30.4 關(guān)鍵技術(shù) 430 30.4.1 JavaScript腳本技術(shù) 430 30.4.2 jQuery技術(shù) 431 30.4.3 jQuery中的Ajax請(qǐng)求 432 30.5 首頁技術(shù)實(shí)現(xiàn) 432 30.5.1 JavaScript實(shí)現(xiàn)導(dǎo)航菜單 432 30.5.2 JavaScript實(shí)現(xiàn)圖片的輪換效果 434 30.5.3 Ajax實(shí)現(xiàn)熱門專題頁面 435 30.5.4 JavaScript實(shí)現(xiàn)電影圖片不間斷滾動(dòng) 436 30.5.5 JavaScript實(shí)現(xiàn)浮動(dòng)窗口 438 30.5.6 jQuery實(shí)現(xiàn)滑動(dòng)門效果 438 30.5.7 jQuery實(shí)現(xiàn)向上間斷滾動(dòng)效果 441 30.6 查看影片詳情頁面 442
你還可能感興趣
我要評(píng)論
|
|||||||





