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

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