DIV+CSS 3網(wǎng)頁樣式與布局全程揭秘（第2版）

第1章　網(wǎng)頁和網(wǎng)站開發(fā)知識          1 1.1　了解網(wǎng)頁        1 1.1.1　網(wǎng)頁與網(wǎng)站的關(guān)系    1 1.1.2　網(wǎng)頁的基本構(gòu)成元素         2 1.2　如何設(shè)計網(wǎng)頁        3 1.2.1　什么是網(wǎng)頁設(shè)計         3 1.2.2　網(wǎng)頁設(shè)計的特點　    3 1.2.3　網(wǎng)頁設(shè)計相關(guān)術(shù)語    4 1.2.4　常見網(wǎng)站類型    7 1.3　關(guān)于表格布局        8 1.3.1　表格布局的特點         9 1.3.2　冗余的嵌套表格和混亂的結(jié)構(gòu)         9 1.4　關(guān)于DIV+CSS布局         10 1.4.1　DIV+CSS布局的特點  10 1.4.2　DIV+CSS布局的優(yōu)勢  10 1.5　Web標(biāo)準(zhǔn)        11 1.5.1　什么是Web標(biāo)準(zhǔn)        11 1.5.2　Web標(biāo)準(zhǔn)的內(nèi)容         11 1.5.3　結(jié)構(gòu)、表現(xiàn)、行為和內(nèi)容         12 1.5.4　遵循Web標(biāo)準(zhǔn)的好處        13 1.6　網(wǎng)站開發(fā)流程        13 1.6.1　網(wǎng)站策劃    13 1.6.2　規(guī)劃網(wǎng)站結(jié)構(gòu)    14 1.6.3　素材收集整理    14 1.6.4　網(wǎng)頁版式與布局分析         14 1.6.5　確定網(wǎng)站主色調(diào)         15 1.6.6　設(shè)計網(wǎng)站頁面    15 1.6.7　切割和優(yōu)化網(wǎng)頁         16 1.6.8　制作HTML頁面          16 1.6.9　使用CSS樣式控制網(wǎng)頁外觀     16 1.6.10　為網(wǎng)頁應(yīng)用JavaScript特效     17 1.6.11　網(wǎng)站后臺程序開發(fā)  17 1.6.12　申請域名和服務(wù)器空間  17 1.6.13　測試并上傳網(wǎng)站       17 1.7　本章小結(jié)        17 　第2章　HTML、XHTML和                   HTML5          18 2.1　HTML與XHTML   18 2.1.1　HTML與XHTML的區(qū)別    18 2.1.2　使用XHTML的優(yōu)點   18 2.2　HTML基礎(chǔ)     19 2.2.1　了解HTML 19 2.2.2　HTML的作用      20 2.2.3　HTML的基礎(chǔ)結(jié)構(gòu)      20 2.2.4　HTML的基本語法      21 2.3　HTML常用標(biāo)簽     21 2.3.1　區(qū)塊標(biāo)簽    22 2.3.2　文本標(biāo)簽    22 2.3.3　格式標(biāo)簽    23 2.3.4　圖像標(biāo)簽    23 2.3.5　表格標(biāo)簽    24 2.3.6　超鏈接標(biāo)簽         24 2.4　XHTML基礎(chǔ)   25 2.4.1　了解XHTML        25 2.4.2　XHTML文檔的基本結(jié)構(gòu)    25 2.4.3　3種不同的XHTML文檔類型    26 2.4.4　嚴(yán)謹(jǐn)?shù)拇a         27 2.4.5　制作HTML頁面          29 實例01+視頻：制作簡單的HTML頁面       29 2.5　HTML 5基礎(chǔ)  30 2.5.1　了解HTML 5       30 2.5.2　HTML 5的簡化操作   31 2.5.3　HTML 5新增標(biāo)簽       31 2.5.4　HTML 5廢棄標(biāo)簽       33 2.5.5　HTML 5新增選擇器   33 2.5.6　HTML 5的優(yōu)勢   34 2.6　HTML 5的應(yīng)用      35 2.6.1　標(biāo)簽      35 實例02+視頻：在網(wǎng)頁中實現(xiàn)繪圖效果      35 2.6.2　標(biāo)簽        37 實例03+視頻：在網(wǎng)頁中嵌入音頻      37 2.6.3　標(biāo)簽        38 實例04+視頻：在網(wǎng)頁中嵌入視頻      39 2.7　本章小結(jié)        40 　第3章   CSS樣式入門     41 3.1　初識CSS樣式         41 3.1.1　為什么要使用CSS樣式     41 3.1.2　在網(wǎng)頁中使用CSS樣式的優(yōu)勢 42 3.1.3　CSS樣式的作用  43 3.1.4　CSS樣式的局限性      44 3.1.5　CSS樣式基礎(chǔ)語法      44 3.1.6　認(rèn)識CSS規(guī)則的構(gòu)成 45 3.2　CSS選擇符     46 3.2.1　通配選擇符         46 實例05+視頻：航天科技網(wǎng)頁      46 3.2.2　標(biāo)簽選擇符         48 實例06+視頻：酒店網(wǎng)站頁面      48 3.2.3　ID選擇符    50 實例07+視頻：制作科技網(wǎng)站頁面      50 3.2.4　類選擇符    51 實例08+視頻：設(shè)置活動網(wǎng)站頁面文字      52 3.2.5　偽類和偽對象選擇符         53 實例09+視頻：設(shè)置酒店網(wǎng)站文字鏈接                             效果         54 3.2.6　群選擇符    55 實例10+視頻：設(shè)置女裝網(wǎng)站圖片效果      55 3.2.7　派生選擇符         57 實例11+視頻：運動鞋網(wǎng)站頁面 57 3.3　CSS 3中新增的選擇符  58 3.3.1　屬性選擇符         58 3.3.2　結(jié)構(gòu)偽類選擇符         59 3.3.3　UI元素狀態(tài)偽類選擇符    60 3.4　在網(wǎng)頁中應(yīng)用CSS樣式的4種方法     60 3.4.1　內(nèi)聯(lián)CSS樣式     60 實例12+視頻：使用style屬性添加                             內(nèi)聯(lián)CSS樣式 61 3.4.2　內(nèi)部CSS樣式     62 實例13+視頻：使用標(biāo)簽添加                             內(nèi)部CSS樣式 62 3.4.3　鏈接外部CSS樣式文件     63 實例14+視頻：使用標(biāo)簽鏈接                             外部CSS樣式文件 64 3.4.4　導(dǎo)入外部CSS樣式文件     66 實例15+視頻：使用@import命令導(dǎo)入                             外部CSS樣式文件 66 3.5　CSS樣式的特性     67 3.5.1　繼承性         67 3.5.2　特殊性         68 3.5.3　層疊性         68 3.5.4　重要性         69 3.6　CSS樣式中的顏色設(shè)置和單位     69 3.6.1　CSS中的多種顏色設(shè)置方法      69 3.6.2　CSS中的絕對單位      71 3.6.3　CSS中的相對單位      71 3.7　本章小結(jié)        71 　第4章　使用CSS設(shè)置文本和                        段落樣式  72 4.1　設(shè)置文本CSS樣式         72 4.1.1　設(shè)置字體font-family  72 實例16+視頻：設(shè)置歡迎頁面中的字體      72 4.1.2　設(shè)置字體大小font-size      74 實例17+視頻：設(shè)置網(wǎng)站歡迎頁面中的                          字體大小       74 4.1.3　設(shè)置字體顏色color   75 實例18+視頻：設(shè)置網(wǎng)站歡迎頁面中的                          文字顏色       75 4.1.4　設(shè)置字體粗細(xì)font-weight         77 實例19+視頻：設(shè)置網(wǎng)頁中的重要                             文字加粗         77 4.1.5　設(shè)置字體樣式font-style    79 實例20+視頻：設(shè)置網(wǎng)頁中文字傾斜 79 4.1.6　設(shè)置英文字體大小寫             text-transform          80 實例21+視頻：設(shè)置網(wǎng)頁中的英文大小寫 81 4.1.7　設(shè)置文字修飾text-decoration  82 實例22+視頻：為網(wǎng)頁中文字添加下劃線、                             頂劃線和刪除線     82 4.2　設(shè)置段落樣式        84 4.2.1　字間距l(xiāng)etter-spacing 84 實例23+視頻：控制網(wǎng)頁中文字間距 84 4.2.2　行間距l(xiāng)ine-height       85 實例24+視頻：控制網(wǎng)頁中文本行間距      85 4.2.3　段落首字下沉    86 實例25+視頻：實現(xiàn)網(wǎng)頁中段落文字                             下沉效果         87 4.2.4　段落首行縮進(jìn)text-indent 88 實例26+視頻：實現(xiàn)網(wǎng)頁中段落文字的                          首行縮進(jìn)       88 4.2.5　段落水平對齊text-align    89 實例27+視頻：實現(xiàn)網(wǎng)頁中文字水平居中                             對齊         89 4.2.6　文本垂直對齊vertical-align       91 實例28+視頻：實現(xiàn)網(wǎng)頁中文本垂直居中                             對齊         91 4.3　CSS類選區(qū)     92 實例29+視頻：個人卡通網(wǎng)站歡迎頁 92 4.4　在網(wǎng)頁中應(yīng)用特殊字體        94 實例30+視頻：在卡通網(wǎng)頁中使用特殊                             字體         94 4.5　本章小結(jié)        97 　第5章　使用CSS設(shè)置背景和                        圖片樣式  98 5.1　設(shè)置背景顏色CSS樣式         98 5.1.1　背景顏色background-color        98 實例31+視頻：為網(wǎng)頁設(shè)置整體背景                             顏色         98 5.1.2　為頁面元素設(shè)置不同的背景顏色    100 實例32+視頻：設(shè)置不同背景顏色區(qū)分                             網(wǎng)頁元素         100 5.2　設(shè)置背景圖像CSS樣式         101 5.2.1　背景圖像background-image      101 實例33+視頻：設(shè)置圖片網(wǎng)站背景圖像      101 5.2.2　背景圖像重復(fù)方式              background-repeat        102 實例34+視頻：實現(xiàn)重復(fù)顯示的背景                             圖像         102 5.2.3　背景圖像固定              background-attachment        104 實例35+視頻：文本介紹網(wǎng)頁固定的                             背景         104 5.2.4　背景圖像位置             background-position         105 實例36+視頻：通過背景定位實現(xiàn)圖文                             混排效果         106 5.3　設(shè)置圖片CSS樣式         107 5.3.1　圖片邊框border         107 實例37+視頻：設(shè)置卡通網(wǎng)站中的圖片                               邊框     108 5.3.2　圖片縮放    109 實例38+視頻：實現(xiàn)跟隨瀏覽器窗口                             縮放的圖片     109 5.3.3　圖片水平對齊    111 實例39+視頻：設(shè)置網(wǎng)頁中圖像的水平                             對齊效果         111 5.3.4　圖片的垂直對齊         112 實例40+視頻：設(shè)置網(wǎng)頁中圖像的垂直                             對齊效果         112 5.4　在網(wǎng)頁中實現(xiàn)圖文混排        114 5.4.1　使用CSS樣式實現(xiàn)文本繞圖效果     114 實例41+視頻：實現(xiàn)圖文介紹頁面文本                             繞圖         114 5.4.2　設(shè)置文本繞圖間距    115 實例42+視頻：美化圖文介紹頁面      115 5.5　網(wǎng)頁中特殊的圖像效果應(yīng)用        116 5.5.1　全屏大圖切換    117 實例43+視頻：設(shè)計作品展示頁面      117 5.5.2　鼠標(biāo)經(jīng)過圖像動態(tài)效果    119 實例44+視頻：制作圖片展示網(wǎng)頁      119 5.6　本章小結(jié)        122 　第6章　使用CSS設(shè)置                   列表樣式     123 6.1　了解網(wǎng)頁中的列表        123 6.2　設(shè)置列表的CSS樣式    124 6.2.1　ul無序項目列表         124 實例45+視頻：制作網(wǎng)站新聞列表      124 6.2.2　有序編號列表    125 實例46+視頻：制作音樂排行榜 126 6.2.3　定義列表    127 實例47+視頻：制作游戲新聞欄目      127 6.2.4　更改列表項目樣式    128 實例48+視頻：更改某一個項目列表                             符號         128 6.2.5　自定義列表符號         130 實例49+視頻：圖像列表符號的應(yīng)用 130 6.3　使用列表制作導(dǎo)航菜單        131 6.3.1　使用CSS樣式創(chuàng)建橫向?qū)Ш讲藛?nbsp;    131 實例50+視頻：制作游戲網(wǎng)站導(dǎo)航      131 6.3.2　使用CSS樣式創(chuàng)建豎向?qū)Ш讲藛?nbsp;    132 實例51+視頻：制作汽車網(wǎng)站豎向?qū)Ш?nbsp;     133 6.4　列表在網(wǎng)頁中的特殊應(yīng)用   134 6.4.1　滾動圖像    134 實例52+視頻：在網(wǎng)頁中實現(xiàn)四圖橫向                             滾動效果         134 6.4.2　動態(tài)堆疊卡         138 實例53+視頻：制作個性網(wǎng)站歡迎頁面      138 6.5　本章小結(jié)        142 　第7章　使用CSS設(shè)置超                   鏈接樣式     143 7.1　了解網(wǎng)頁超鏈接   143 7.1.1　什么是超鏈接    143 7.1.2　關(guān)于鏈接路徑    144 7.1.3　超鏈接對象         144 7.1.4　創(chuàng)建超鏈接原則         145 7.2　CSS樣式偽類 145 7.2.1　:link偽類     145 7.2.2　:hover偽類 146 7.2.3　:active偽類         146 7.2.4　:visited偽類         147 7.3　超鏈接CSS樣式應(yīng)用    147 7.3.1　超鏈接文字樣式         147 實例54+視頻：設(shè)置游戲網(wǎng)站文字                             超鏈接效果     147 7.3.2　按鈕式超鏈接    150 實例55+視頻：制作設(shè)計網(wǎng)站導(dǎo)航菜單      150 7.3.3　為超鏈接添加背景    152 實例56+視頻：背景翻轉(zhuǎn)導(dǎo)航菜單      152 7.4　設(shè)置網(wǎng)頁中的光標(biāo)效果        154 實例57+視頻：自定義網(wǎng)頁中的光標(biāo)                             效果         155 7.5　超鏈接在網(wǎng)頁中的特殊應(yīng)用        156 7.5.1　傾斜導(dǎo)航菜單    156 實例58+視頻：玩具網(wǎng)站傾斜導(dǎo)航      157 7.5.2　動感超鏈接         159 實例59+視頻：卡通網(wǎng)站動感導(dǎo)航菜單      159 7.6　本章小結(jié)        163 　第8章　使用CSS設(shè)置表格                   樣式     164 8.1　了解表格        164 8.1.1　認(rèn)識表格標(biāo)簽與結(jié)構(gòu)         164 8.1.2　表格標(biāo)題標(biāo)簽    166 8.1.3　表格列和標(biāo)簽 167 8.1.4　水平對齊和垂直對齊         168 8.2　使用CSS樣式控制表格外觀         170 8.2.1　設(shè)置表格邊框    170 實例60+視頻：制作網(wǎng)站新聞欄目      170 8.2.2　設(shè)置表格背景顏色    172 實例61+視頻：使用背景顏色美化表格      172 8.2.3　設(shè)置表格背景圖像    173 實例62+視頻：使用背景圖像美化表格      173 8.3　使用CSS樣式實現(xiàn)表格特效         175 8.3.1　設(shè)置單元行背景顏色         175 實例63+視頻：實現(xiàn)隔行變色的表格 175 8.3.2　:hover偽類在表格中的應(yīng)用     177 實例64+視頻：使用CSS實現(xiàn)表格的                             交互效果         177 8.4　本章小結(jié)        178 　第9章　使用CSS設(shè)置                      表單元素樣式       179 9.1　關(guān)于表單        179 9.1.1　表單標(biāo)簽         179 9.1.2　輸入標(biāo)簽         180 9.1.3　文本域標(biāo)簽       180 9.1.4　選擇域標(biāo)簽和         181 9.1.5　其他表單元素    182 9.1.6　關(guān)于、和標(biāo)簽  183 實例65+視頻：創(chuàng)建簡單的網(wǎng)頁表單 183 9.2　使用CSS樣式控制表單元素         185 9.2.1　使用CSS樣式設(shè)置表單元素的背景色和邊框 186 實例66+視頻：制作網(wǎng)站登錄頁面      186 9.2.2　使用CSS樣式實現(xiàn)圓角文本字段     189 實例67+視頻：制作圓角登錄框 189 9.2.3　使用CSS樣式設(shè)置下拉列表效果     191 實例68+視頻：制作網(wǎng)站搜索欄 191 9.3　表單在網(wǎng)頁中的特殊應(yīng)用   194 9.3.1　聚焦型提示語消失    194 實例69+視頻：文本字段提示語效果1       194 9.3.2　輸入型提示語消失    196 實例70+視頻：文本字段提示語效果2       197 9.4　本章小結(jié)        198 　第10章　CSS濾鏡的應(yīng)用         199 10.1　關(guān)于CSS濾鏡       199 10.1.1　什么是CSS濾鏡        199 10.1.2　CSS濾鏡語法    199 10.2　在網(wǎng)頁中應(yīng)用CSS濾鏡       200 10.2.1　 Alpha濾鏡       200 實例71+視頻：實現(xiàn)網(wǎng)頁中圖像的半透明效果 201 10.2.2　BlendTrans濾鏡        203 實例72+視頻：實現(xiàn)網(wǎng)頁中圖像的漸隱漸現(xiàn)效果      203 10.2.3　Blur濾鏡   205 實例73+視頻：實現(xiàn)網(wǎng)頁中圖像的模糊效果      205 10.2.4　Chroma濾鏡     206 實例74+視頻：將網(wǎng)頁中指定顏色設(shè)置為透明 206 10.2.5　DropShadow與Shadow濾鏡  207 實例75+視頻：為網(wǎng)頁中的元素添加陰影效果 208 10.2.6　FlipH與FlipV濾鏡    210 實例76+視頻：實現(xiàn)網(wǎng)頁中元素的水平和垂直翻轉(zhuǎn) 210 10.2.7　Glow濾鏡 211 實例77+視頻：為網(wǎng)頁中的文字添加光暈效果 211 10.2.8　Gray濾鏡與Invert濾鏡  213 實例78+視頻：實現(xiàn)黑白網(wǎng)頁效果      213 10.2.9　Light濾鏡 214 實例79+視頻：在網(wǎng)頁中實現(xiàn)聚光燈效果 214 10.2.10　Mask濾鏡       216 實例80+視頻：實現(xiàn)文字遮罩效果      216 10.2.11　RevealTrans濾鏡    217 實例81+視頻：實現(xiàn)圖像的動態(tài)轉(zhuǎn)換 217 10.2.12　Wave濾鏡       219 實例82+視頻：實現(xiàn)網(wǎng)頁中圖像的波紋效果      219 10.2.13　Xray濾鏡         220 實例83+視頻：將網(wǎng)頁中的圖像處理為X光片效果  220 10.3　本章小結(jié)      222 　第11章　CSS高級應(yīng)用與CSS 3屬性       223 11.1　與標(biāo)簽的區(qū)別 223 11.2　如何簡寫CSS樣式       224 11.2.1　顏色值簡寫       224 11.2.2　簡寫font屬性  224 11.2.3　簡寫background屬性      225 11.2.4　簡寫border屬性      226 11.2.5　簡寫margin和padding屬性  227 11.2.6　簡寫list屬性    228 11.3　優(yōu)化CSS樣式       228 11.3.1　CSS選擇符的命名規(guī)范    229 11.3.2　重用CSS樣式   229 11.3.3　覆蓋的方法簡化CSS樣式        229 11.4　CSS 3中新增的顏色定義方法    230 11.4.1　HSL和HSLA方法      230 實例84+視頻：使用HSL方式定義網(wǎng)頁元素背景顏色      231 11.4.2　RGBA方法         232 實例85+視頻：使用RGBA方式定義網(wǎng)頁元素背景顏色  232 11.5　CSS 3新增內(nèi)容和透明度屬性    233 11.5.1　內(nèi)容content     234 實例86+視頻：為網(wǎng)頁中的元素賦予內(nèi)容 234 11.5.2　透明度opacity 235 實例87+視頻：設(shè)置圖片半透明效果 235 11.6　CSS 3中新增文字效果設(shè)置         236 11.6.1　文字陰影text-shadow      236 實例88+視頻：為網(wǎng)頁中的文字添加陰影效果 237 11.6.2　文本溢出處理text-overflow    238 實例89+視頻：設(shè)置溢出文本顯示為省略號      238 11.7　CSS 3中新增背景效果設(shè)置         240 11.7.1　背景圖像大小background-size        240 實例90+視頻：控制網(wǎng)頁元素背景圖像大小      240 11.7.2　背景圖像顯示區(qū)域background-origin    242 實例91+視頻：控制背景圖像顯示位置      242 11.7.3　背景圖像裁剪區(qū)域background-clip         243 實例92+視頻：控制背景圖像裁剪      243 11.8　CSS 3中新增邊框效果設(shè)置         245 11.8.1　多重邊框顏色border-colors    245 實例93+視頻：為網(wǎng)頁中的圖像添加多彩邊框 245 11.8.2　圓角邊框border-radius    246 實例94+視頻：為網(wǎng)頁元素添加圓角邊框效果 246 11.8.3　圖像邊框border-image   248 實例95+視頻：設(shè)置網(wǎng)頁元素的圖像邊框效果 248 11.9　CSS 3新增界面相關(guān)屬性    249 11.9.1　元素陰影box-shadow       249 實例96+視頻：為網(wǎng)頁元素添加陰影效果 250 11.9.2　內(nèi)容溢出處理overflow   251 實例97+視頻：為網(wǎng)頁中的溢出文本添加滾動條      251 11.9.3　區(qū)域縮放調(diào)節(jié)resize         252 實例98+視頻：實現(xiàn)網(wǎng)頁中可以自由縮放的文本區(qū)域      253 11.9.4　輪廓外邊框outline  254 實例99+視頻：為網(wǎng)頁中的圖像添加輪廓外邊框效果      254 11.9.5　多列布局column      255 實例100+視頻：實現(xiàn)網(wǎng)頁文章的分欄顯示        255 11.9.6　導(dǎo)航序列號nav-index      256 11.10　CSS 3其他新增屬性  257 11.10.1　判斷對象@media  257 實例101+視頻：根據(jù)瀏覽器窗口不同顯示不同的背景顏色    257 11.10.2　加載服務(wù)器端字體@font-face      258 11.11　使用CSS 3制作網(wǎng)頁特效 259 實例102+視頻：網(wǎng)頁動態(tài)交互導(dǎo)航菜單    259 11.12　本章小結(jié)   263 　第12章　使用DIV+CSS布局網(wǎng)頁    264 12.1　關(guān)于Div        264 12.1.1　什么是Div         264 12.1.2　如何在網(wǎng)頁中插入Div    264 12.2　id與class      266 12.2.1　什么是id  266 12.2.2　什么時候使用id       266 12.2.3　什么是class      267 12.2.4　什么時候使用class  267 12.3　CSS盒模型   268 12.3.1　什么是CSS盒模型   268 12.3.2　CSS盒模型的要點    269 12.3.3　margin屬性      269 實例103+視頻：制作房產(chǎn)網(wǎng)站歡迎頁        269 12.3.4　border屬性       271 實例104+視頻：制作圖片網(wǎng)頁    271 12.3.5　padding屬性     272 實例105+視頻：控制圖像與邊界距離        272 12.3.6　content部分     274 12.4　CSS 3新增彈性盒模型         274 12.4.1　box-orient屬性控制盒子取向          274 12.4.2　box-direction屬性控制盒子順序    276 12.4.3　box-ordinal-group屬性控制盒子位置     278 12.4.4　box-flex屬性控制盒子彈性空間     280 12.4.5　盒子空間管理box-pack和box-align屬性      282 12.4.6　盒子空間溢出管理box-lines屬性  284 12.5　網(wǎng)頁元素定位      284 12.5.1　關(guān)于position屬性    284 12.5.2　relative定位方式     285 實例106+視頻：實現(xiàn)圖像疊加效果    285 12.5.3　absolute定位方式    286 實例107+視頻：制作科技公司網(wǎng)站頁面    287 12.5.4　fixed定位方式         288 實例108+視頻：固定不動的網(wǎng)站導(dǎo)航菜單        289 12.5.5　float定位方式  290 實例109+視頻：制作圖片列表頁面    290 12.5.6　空白邊疊加       293 實例110+視頻：空白邊疊加在網(wǎng)頁中的應(yīng)用    293 12.6　常用DIV+CSS布局解析       294 12.6.1　內(nèi)容居中的網(wǎng)頁布局       295 12.6.2　浮動的網(wǎng)頁布局       295 12.6.3　自適應(yīng)高度的解決方法  298 12.7　流體網(wǎng)格布局      299 實例111+視頻：制作適用手機(jī)瀏覽的網(wǎng)頁        299 12.8　本章小結(jié)      304    第13章    CSS與JavaScript實現(xiàn)網(wǎng)頁特效          305 13.1　JavaScript基礎(chǔ)     305 13.1.1　JavaScript的發(fā)展      305 13.1.2　JavaScript的特點      306 13.1.3　JavaScript語法中的基本要求 306 13.1.4　CSS樣式與JavaScript        308 13.2　使用JavaScript的方法        308 13.2.1　使用標(biāo)簽嵌入JavaScript代碼   309 13.2.2　調(diào)用外部js腳本文件       309 13.2.3　直接位于事件處理部分的代碼中  309 13.3　JavaScript中的數(shù)據(jù)類型和變量         310 13.3.1　數(shù)據(jù)類型  310 13.3.2　變量  310 13.4　JavaScript運算符         311 13.4.1　算術(shù)運算符       311 13.4.2　邏輯運算符       311 13.4.3　比較運算符       311 13.5　JavaScript程序語句     311 13.5.1　if條件語句        311 13.5.2　switch條件語句        312 13.5.3　for循環(huán)語句     312 13.5.4　while循環(huán)語句          313 13.6　使用Spry實現(xiàn)網(wǎng)頁特效     313 13.6.1　Spry菜單欄       313 實例112+視頻：制作下拉導(dǎo)航菜單    313 13.6.2　Spry選項卡式面板  317 實例113+視頻：制作網(wǎng)頁新聞選項卡        317 13.6.3　Spry折疊式       320 實例114+視頻：制作產(chǎn)品介紹頁面    320 13.6.4　Spry可折疊面板       323 實例115+視頻：制作家居網(wǎng)站    323 13.6.5　Spry工具提示  325 實例116+視頻：制作作品展示網(wǎng)頁    325 13.7　常見網(wǎng)頁特效      326 13.7.1　廣告切換效果  327 實例117+視頻：制作簡潔的左右輪換廣告效果        327 13.7.2　頁面切換  331 實例118+視頻：全屏頁面切換效果    331 13.8　本章小結(jié)      337 　第14章　商業(yè)案例實戰(zhàn)   338 14.1　企業(yè)網(wǎng)站      338 14.1.1　設(shè)計分析  338 14.1.2　布局分析  338 14.1.3　案例制作  339 14.2　兒童用品網(wǎng)站      344 14.2.1　設(shè)計分析  345 14.2.2　布局分析  345 14.2.3　案例制作  345 14.3　游戲網(wǎng)站      351 14.3.1　設(shè)計分析  351 14.3.2　布局分析  351 14.3.3　案例制作  351 14.4　本章小結(jié)      361