HTML5煉成記：Web前端開(kāi)發(fā)12堂必修課（HTML5+CSS3+JavaScript）

Chapter 01一起來(lái)學(xué)HTML 5 Warming Up    HTML 5能做什么 Section 01         更強(qiáng)大的元素       01 一起來(lái)畫(huà)圖 02 一個(gè)實(shí)用的表單 03 路癡的救星 04 讓圖片可以拖拽 Section 02         更精美的樣式       01 漂亮的文字 02 炫酷的圖片 03 設(shè)置動(dòng)畫(huà)效果 04 自適應(yīng)網(wǎng)頁(yè) Section 03         更炫酷的特效       01 banner是怎樣制作的 02 消息的提示框 Test 課后作業(yè)          Chapter 02網(wǎng)頁(yè)繪圖如此有趣 Warming Up    強(qiáng)大的canvas       Section 01         潛心修行canvas  01 圓形表盤(pán) Try it 制作圓形表盤(pán)       02 分針、時(shí)針和秒針 Try it 制作表針       03 時(shí)間刻度線 Try it 制作時(shí)間刻度線  04 看看幾點(diǎn)了 Try it 計(jì)時(shí)開(kāi)始       Section 02         圖像好看的樣式  01 讓圖片更加高級(jí) Try it 修飾圖片       02 觀看圖片的局部 Try it 圖片的局部顯示  03 給圖片添加“蒙版” Try it 微信聊天框效果  04 圖片的立體顯示 Try it 圖片的陰影效果  Try it 文字、邊框、圖片的陰影效果  Section 03         圖形的各種效果  01 螺旋形旋轉(zhuǎn) Try it 螺旋旋轉(zhuǎn)圖形       02 兩種漸變?cè)O(shè)置 Try it 圖形的漸變?cè)O(shè)置  03 當(dāng)圖形重疊時(shí) Try it 組合圖形的繪制  Test 課后作業(yè)          Chapter 03生成漂亮的表單 Warming Up    怎樣讓表單變漂亮       Section 01         一起制作表單       01 改變傳統(tǒng)登錄方式 Try it 制作一個(gè)登錄表單       02 注冊(cè)簡(jiǎn)潔大方型表單 Try it 制作簡(jiǎn)潔的注冊(cè)型表單       Section 02         多姿多彩的表單  01 年月日的出現(xiàn) Warming Up    怎樣讓表單變漂亮       Section 01         一起制作表單       01 改變傳統(tǒng)登錄方式 Try it 制作一個(gè)登錄表單       02 注冊(cè)簡(jiǎn)潔大方型表單 Try it 制作簡(jiǎn)潔的注冊(cè)型表單       Section 02         多姿多彩的表單  01 年月日的出現(xiàn)   Chapter 04播放器的打開(kāi)姿勢(shì) Warming Up    網(wǎng)頁(yè)播放器  Section 01         看視頻聽(tīng)音樂(lè)之前       01 了解瀏覽器支持情況 02 測(cè)試瀏覽器 Try it 親測(cè)瀏覽器是否支持  Try it 嵌入插件作為備選解決不支持  Section 02         享受視聽(tīng)盛宴       01 沉浸在音樂(lè)的海洋 Try it 制作音樂(lè)播放器  02 打開(kāi)視頻的正確方式 Try it 制作視頻播放器  03 了解播放器中的方法 Test 課后作業(yè)          Chapter 05定位自己的位置 Warming Up    一起學(xué)習(xí)定位知識(shí)       Section 01         有導(dǎo)航不迷路       01 學(xué)習(xí)經(jīng)緯度知識(shí) 02 IP地址定位數(shù)據(jù) 03 GPS地理定位 Section 02         開(kāi)始定位       01 獲取地理位置 Try it 獲取當(dāng)前的地理位置  02 瀏覽器的支持情況 Try it 測(cè)試瀏覽器支持情況  Section 03         找到自己       01 保護(hù)用戶(hù)的隱私 02 調(diào)用地圖接口 Try it 調(diào)用谷歌地圖       03 顯示你的位置 Try it 定位自己的位置  Test 課后作業(yè)          Chapter 06 實(shí)用的上傳方式   Warming Up    拖拽上傳的應(yīng)用  Section 01         調(diào)整圖片位置       01 實(shí)現(xiàn)拖放的步驟 02 實(shí)現(xiàn)拖拽的方法 Section 02         拖放操作       01 拖放應(yīng)用 Try it 簡(jiǎn)單的拖放操作       02 拖放列表 Try it 制作拖放列表       03 拖拽上傳文件 Try it 附件的拖拽上傳  Section 03         離線知識(shí)       01 支持離線行為 Try it 演示網(wǎng)頁(yè)是否在線       02 檢測(cè)瀏覽器支持與否 Try it 檢測(cè)瀏覽器是否支持  03 Web Workers的簡(jiǎn)單應(yīng)用 Test 課后作業(yè)          Chapter 07開(kāi)啟樣式的大門(mén) Warming Up    讓網(wǎng)頁(yè)多姿多彩  Section 01         給樣式作修飾       01 選擇元素進(jìn)行樣式設(shè)置 Try it 需要重點(diǎn)標(biāo)注的句子  02 設(shè)置一類(lèi)元素的樣式 Try it 給所有元素設(shè)置相同樣式  Try it 使用什么方法能制作出相同的效 03 屬性也可以設(shè)置樣式 Try it 設(shè)置其中一張圖片的屬性  Section 02         選擇性地修飾       01 新版本與舊版本的比較 02 讓設(shè)計(jì)更高級(jí) Try it 單擊鏈接發(fā)生顏色變化       Try it 設(shè)置多彩的輸入框       Try it 單擊時(shí)按鈕顏色發(fā)生變化  03 結(jié)構(gòu)性偽類(lèi)的用法 Try it 變化的字體顏色  04 偽類(lèi)選擇器 Try it 給句詩(shī)添加背景顏色  Try it 設(shè)置首字母的大小寫(xiě)  Try it 運(yùn)用其他方法做出圖片效果       Test 課后作業(yè)          Chapter 08網(wǎng)頁(yè)中的“動(dòng)畫(huà)片” Warming Up    怎樣讓元素動(dòng)起來(lái)       Section 01         過(guò)渡知識(shí)       01 與用戶(hù)的互動(dòng) Try it 讓元素不再呆板  02 變化出更多樣式 Try it 多種變化效果       03 模擬DOCK的縮放特效 Try it 制作一個(gè)有導(dǎo)航的電腦桌面       Section 02         實(shí)現(xiàn)動(dòng)畫(huà)       01 動(dòng)起來(lái)的關(guān)鍵 Try it 一起蕩秋千  02 制作旋轉(zhuǎn)的圈圈 Try it 制作loading圖標(biāo) Try it 制作loading進(jìn)度條     03 使用放大鏡查看 Try it 使用放大鏡查看圖片  Test 課后作業(yè)          Chapter 09讓瀏覽更輕松 Warming Up    三站合一       Section 01         自適應(yīng)效果  01 多媒體查詢(xún)能做什么 02 窗口大小控制顏色 Try it 網(wǎng)頁(yè)背景隨瀏覽器大小改變而改變  03 自適應(yīng)導(dǎo)航欄 Try it 制作流行的網(wǎng)頁(yè)導(dǎo)航欄       Section 02         與用戶(hù)的互動(dòng)       01 制作一張電子報(bào)紙 Try it 多列布局的用法  02 Photoshop中的濾鏡效果 Try it ps一張美女圖片   03 修飾圖片 Try it 修飾圖片的輪廓  04 開(kāi)關(guān)按鈕樣式 Try it 用簡(jiǎn)單的方法制作按鈕  Test 課后作業(yè)          Chapter 10重要的網(wǎng)頁(yè)元素 Warming Up    變花樣的文字和邊框  Section 01         文字讓網(wǎng)頁(yè)更突出       01 文字的陰影效果 Try it 讓文字顯得立體  Try it 用陰影增加前景色與背景色的對(duì)比 02 更多的文字效果 Try it 制作更多文字效果       03 文本溢出的設(shè)置 Try it 制作文本的溢出效果  04 英文單詞的換行 Try it 長(zhǎng)單詞的換行       Try it 拆分單詞       Section 02         顏色讓網(wǎng)頁(yè)更好看       01 多變的顏色 Try it 制作顏色漸變       Try it 制作一顆閃閃的星星  02 色彩的模式 Try it 制作一個(gè)HsL顏色模式表   03 擴(kuò)展的色彩模式 Try it 制作顏色的不透明度  Section 03 動(dòng)作讓網(wǎng)頁(yè)更高級(jí)      01 圖片的3D旋轉(zhuǎn) Try it 制作圖片的3D旋轉(zhuǎn)    02 高級(jí)圖標(biāo) Try it 制作扁平化的圖標(biāo)       Test 課后作業(yè)          Chapter11特效是用什么做的 Warming Up    Javascript怎樣嵌入      Section 01         流行的網(wǎng)頁(yè)樣式  01 JavaScript的作用 02 JavaScript的特點(diǎn) 03 JavaScript的應(yīng)用 Try it 單擊按鈕出現(xiàn)文字       Section 02         炫酷特效的前提  01 掌握一些類(lèi)型 02 了解一些語(yǔ)句 Try it 單擊按鈕出現(xiàn)問(wèn)候語(yǔ)  Try it 用時(shí)間點(diǎn)來(lái)設(shè)置問(wèn)候語(yǔ)       Try it 讓代碼循環(huán)計(jì)算5次   Try it 一直循環(huán)代碼 03 應(yīng)用哪些事件 04 事件的句柄 05 怎樣處理事件 Test 課后作業(yè)          Chapter12炫酷效果應(yīng)用方向 Warming Up    怎樣制作滾動(dòng)banner  Section 01         這個(gè)函數(shù)不一樣  01 函數(shù)定義 Try it 單擊按鈕顯示“你好”       Try it 單擊按鈕出現(xiàn)歡迎詞  Try it 制作一個(gè)計(jì)算器  02 函數(shù)參數(shù) Try it 給參數(shù)設(shè)置默認(rèn)值       Try it 設(shè)置查找值的函數(shù)       03 函數(shù)調(diào)用 Section 02         表單中的應(yīng)用 01 按鈕對(duì)象 Try it 設(shè)置表單的按鈕對(duì)象  02 復(fù)選框?qū)ο?Try it 可以全選的復(fù)選框       03 列表框?qū)ο?Try it 設(shè)置列表框?qū)ο?nbsp; 04 增加列表框 Try it 與用戶(hù)的互動(dòng)效果       05 表單中的時(shí)間 Try it 調(diào)用時(shí)間       Section 03 網(wǎng)頁(yè)中的應(yīng)用      01 輪播圖效果 Try it 制作一個(gè)網(wǎng)頁(yè)的輪播圖       02 字體閃爍效果 Try it 制作文字的閃爍效果  03 鼠標(biāo)滑過(guò)效果 Try it 制作鼠標(biāo)滑過(guò)圖片的震動(dòng)效果  Section 04         網(wǎng)頁(yè)中的特效       01 顯示網(wǎng)頁(yè)停留時(shí)間 Try it 顯示所在網(wǎng)頁(yè)停留的時(shí)間  02 制作定時(shí)關(guān)閉窗口 Try it 讓窗口在設(shè)定好的時(shí)間自動(dòng)關(guān)閉       Test 課后作業(yè)