單元一　HTML5構建網(wǎng)站結構 1
教學導航 1
【基本項目】使用HTML5構建個人博客網(wǎng)站首頁 1
【應用項目】仿Ghost開源博客平臺的內(nèi)容頁面 10
單元二　HTML5表單和驗證 15
教學導航 15
【基本項目】使用HTML5新增表單功能制作注冊表單 15
【應用項目】為注冊表單添加用戶體驗的驗證信息 24
單元三　CSS3網(wǎng)頁細節(jié)設計 27
教學導航 27
任務一　圓角 28
【基本項目1】實心圓角效果 28
【基本項目2】空心圓角效果 32
【應用項目1】網(wǎng)頁中的圓角屬性應用 34
【應用項目2】繪制形狀 36
【應用項目3】經(jīng)典對話框 38
【應用項目4】圓角導航條應用 39
任務二 邊框陰影 40
【基本項目】邊框陰影效果 40
【應用項目】仿青年幫案例展示效果 47
任務三　漸變 49
【基本項目1】線性漸變—彩虹背景文字效果 49
【基本項目2】徑向漸變—背景圖案效果 50
任務四　背景圖片的大小 53
【基本項目】響應式圖片效果 53
任務五　背景圖片的定位 55
【基本項目1】background-origin 55
【基本項目2】background-clip 57
任務六　多重背景 59
【基本項目】多重背景 59
【應用項目】撲克牌效果 61
任務七　文字陰影 62
【基本項目】文字陰影效果 62
單元四　自定義字體和圖標文字 66
教學導航 66
【應用項目】網(wǎng)頁中的圖標文字 66
單元五　CSS3過渡效果 69
教學導航 69
【基本項目】變色并擴展小方塊效果 69
【應用項目1】仿青年幫導航條設計—圓角過渡效果 70
【應用項目2】仿青年幫導航條設計—下拉框效果 72
【應用項目3】仿17素材網(wǎng)作品展示效果 74
單元六　CSS3 2D效果 76
教學導航 76
【基本項目】CSS3 2D效果案例 76
【應用項目1】CSS3 2D綜合效果—制作個性照片墻 90
【應用項目2】仿碼工助手案例展示效果 92
【應用項目3】仿青年幫導航條設計—常用推薦效果 94
單元七　CSS3 3D效果 97
教學導航 97
【基本項目】立體縮放效果 97
【應用項目1】旋轉立方體效果 102
【應用項目2】立體導航條效果 104
單元八　CSS3動畫效果 107
教學導航 107
【基本項目】小球運動效果 107
【應用項目1】旋轉轉盤效果 110
【應用項目2】跳動的心效果 112
【應用項目3】鐘擺效果 114
【應用項目4】旋轉導航條效果 116
【應用項目5】仿青年幫網(wǎng)站—光暈效果 118
【應用項目6】仿青年幫設計導航—靈感創(chuàng)意推薦 121
【應用項目7】仿青年幫網(wǎng)站—波浪效果 123
單元九　響應式網(wǎng)站 126
教學導航 126
【基本項目】使用媒體查詢制作一個簡單的響應式網(wǎng)站 126
【應用項目1】響應式導航條設計 128
【應用項目2】響應式網(wǎng)站框架設計 131
【應用項目3】sugarcoat動漫響應式網(wǎng)站設計 134