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

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