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