DIV CSS3.0網(wǎng)頁布局實戰(zhàn)從入門到

時間：2023-02-21 11:24:02 | 來源：營銷百科

時間：2023-02-21 11:24:02 來源：營銷百科

DIV CSS3.0網(wǎng)頁布局實戰(zhàn)從入門到：基礎(chǔ)篇
第1章 Dreamweaver與CSS基礎(chǔ) 8
實例1 建站第一步——創(chuàng)建本地靜態(tài)站點 8
實例2 設(shè)置遠程服務(wù)器——創(chuàng)建企業(yè)網(wǎng)站站點 9
實例3 遠程交互站點——創(chuàng)建BusinessCatalyst站點 12
實例4 內(nèi)聯(lián)CSS樣式——控制文本顯示效果 14
實例5 內(nèi)部CSS樣式——控制頁面整體效果 16
實例6 外部CSS樣式——鏈接外部CSS樣式表文件 18
實例7 @import方式——導(dǎo)入外部CSS樣式 20
第2章 Div CSS布局基礎(chǔ) 23
實例8 margin——控制網(wǎng)頁元素的位置 23
實例9 border——為網(wǎng)頁元素添加邊框 25
實例10 padding——控制Div中內(nèi)容的位置 27
實例11 相對定位——設(shè)置網(wǎng)頁元素的相對位置 28
實例12 絕對定位——設(shè)置網(wǎng)頁元素的絕對位置 30
實例13 固定定位——固定的網(wǎng)頁導(dǎo)航 32
實例14 浮動定位——制作作品列表 34
實例15 空白邊疊加——控制元素的上下邊距 38
實例16 流體網(wǎng)格布局——制作個人作品展示頁面 39
第3章 使用CSS控制網(wǎng)頁背景 46
實例17 定義頁面背景顏色——制作個人作品網(wǎng)站頁面 46
實例18 定義背景圖像——為網(wǎng)頁添加背景圖像 48
實例19 背景圖像的位置——控制網(wǎng)頁中背景圖像的位置 49
實例20 固定背景圖像——控制網(wǎng)頁的背景圖像固定不動 51
實例21 background—size屬性（CSS3.0）——控制背景圖像大小 53
實例22 background—origin屬性（CSS3.0）——控制背景圖像顯示區(qū)域 55
實例23 background—clip屬性（CSS3.0）——控制背景圖像的裁剪區(qū)域 56
第4章 使用CSS控制文本 59
實例24 定義字體——制作廣告頁面 59
實例25 定義英文字體大小寫——制作英文網(wǎng)站頁面 61
實例26 定義字體下劃線、頂劃線和刪除線——網(wǎng)頁文字修飾 63
實例27 定義字間距和行間距——制作網(wǎng)站公告 65
實例28 定義段落首字下沉——制作企業(yè)介紹頁面 67
實例29 定義段落首行縮進——制作設(shè)計公司網(wǎng)站頁面 69
實例30 定義段落水平對齊——制作網(wǎng)站彈出頁面 71
實例31 定義文本垂直對齊——制作產(chǎn)品介紹頁面 73
實例32 使用Web字體——在網(wǎng)頁中使用特殊字體 75
實例33 CSS類選區(qū)——應(yīng)用多個類CSS樣式 78
實例34 text—shadow屬性（CSS3.0）——為網(wǎng)頁文字添加陰影 80
實例35 word—wrap屬性（CSS3.0）——控制網(wǎng)頁文本換行 81
實例36 text—overflow屬性（CSS3.0）——控制文本溢出 83
第5章 使用CSS控制圖片效果 85
實例37 圖片邊框——修飾網(wǎng)頁圖像 85
實例38 圖片縮放——自適應(yīng)窗口大小的圖片 87
實例39 圖片的水平對齊——制作產(chǎn)品展示頁面 90
實例40 圖片的垂直對齊——制作飲品展示頁面 91
實例41 實現(xiàn)圖文混排效果——制作產(chǎn)品介紹頁面 93
實例42 border—colors屬性（CSS3.0）——為圖像添加多種色彩邊框 95
實例43 border—radius屬性（CSS3.0）——實現(xiàn)圓角邊框 97
實例44 border—image屬性（CSS3.0）——實現(xiàn)圖像邊框 99
進階篇
第6章 使用CSS控制列表樣式 101
實例45 ul無序列表——制作新聞欄目 101
實例46 ol有序列表——制作網(wǎng)站公告 103
實例47 更改列表項目樣式——制作方塊列表效果 106
實例48 使用圖片作為列表樣式——制作圖像列表 108
實例49 定義列表——制作音樂列表 109
實例50 列表的應(yīng)用——制作橫向?qū)Ш讲藛?111
實例51 制作縱向?qū)Ш讲藛?114
實例52 content屬性（CSS3.0）——賦予Div內(nèi)容 116
實例53 opacity屬性（CSS3.0）——實現(xiàn)元素的半透明效果 118
第7章 使用CSS美化表格和表單元素 120
實例54 創(chuàng)建數(shù)據(jù)表格——制作企業(yè)網(wǎng)站新聞頁面 120
實例55 設(shè)置表格邊框和背景——制作精美表格 124
實例56 為單元行應(yīng)用類CSS樣式——實現(xiàn)隔行變色的單元格 128
實例57 應(yīng)用CSS樣式的hover偽類——實現(xiàn)交互的變色表格 130
實例58 設(shè)置表單元素的背景顏色——制作商品搜索 131
實例59 設(shè)置表單元素的邊框——美化登錄框 134
實例60 使用CSS定義圓角文本字段 135
實例61 使用CSS定義下拉列表——制作多彩下拉列表 137
實例62 column—width屬性（CSS3.0）——實現(xiàn)網(wǎng)頁文本分欄 138
實例63 column—count屬性（CSS3.0）——控制網(wǎng)頁文本分欄數(shù) 140
實例64 column—gap屬性（CSS3.0）——控制網(wǎng)頁文本分欄間距 142
實例65 column—rule屬性（CSS3.0）——為分欄添加分欄線 144
第8章 使用CSS樣式美化超鏈接和鼠標指針 146
實例66 定義超鏈接樣式——制作活動公告 146
實例67 超鏈接偽類應(yīng)用——制作按鈕式超鏈接 149
實例68 超鏈接偽類應(yīng)用——制作圖像式超鏈接 152
實例69 使用CSS定義鼠標指針樣式——改變默認的鼠標指針 156
實例70 使用CSS定義鼠標變換效果——實現(xiàn)網(wǎng)頁中的鼠標變換效果 157
實例71 box—shadow屬性（CSS3.0）——為網(wǎng)頁元素添加陰影 159
實例72 overflow屬性（CSS3.0）——網(wǎng)頁元素內(nèi)容溢出處理 161
實例73 resize屬性（CSS3.0）——在網(wǎng)頁中實現(xiàn)區(qū)域縮放調(diào)節(jié) 163
實例74 outline屬性（CSS3.0）——為網(wǎng)頁元素添加輪廓邊框 164
提高篇
第9章 使用CSS濾鏡 167
實例75 Alpha濾鏡——實現(xiàn)網(wǎng)頁中半透明效果 167
實例76 BlendTrans濾鏡——制作圖像切換效果 170
實例77 Blur濾鏡——實現(xiàn)網(wǎng)頁中的模糊效果 173
實例78 FlipH和FlipV濾鏡——實現(xiàn)網(wǎng)頁內(nèi)容水平和垂直翻轉(zhuǎn) 175
實例79 DropShadow濾鏡——為網(wǎng)頁元素添加陰影 177
第10章 CSS與其他語言綜合運用 180
實例80 XML與CSS——制作學(xué)生信息管理頁面 180
實例81 使用CSS實現(xiàn)XML中特殊效果——隔行變色的信息列表 184
實例82 在HTML頁面中調(diào)用XML數(shù)據(jù)——制作攝影圖片網(wǎng)頁 188
實例83 使用JavaScript實現(xiàn)可選擇字體大小——制作新聞頁面 194
實例84 使用JavaScript實現(xiàn)圖像滑動切換——制作圖像頁面 197
實例85 使用JavaScript實現(xiàn)特效——制作動態(tài)網(wǎng)站相冊 201
商業(yè)案例篇
第11章 制作網(wǎng)站常見效果 208
實例86 插入Spry菜單欄——制作導(dǎo)航下拉菜單 208
實例87 插入Spry選項卡式面板——制作選項卡式新聞列表 213
實例88 插入Spry折疊式面板——制作個人網(wǎng)站頁面 219
實例89 插入Spry可折疊面板——制作可折疊欄目 224
實例90 插入Spry工具提示——制作圖片展示頁面 228
第12章 布局制作商業(yè)網(wǎng)站頁面 233
實例91 制作寵物貓咪網(wǎng)站頁面 233
實例92 制作設(shè)計工作室網(wǎng)站頁面 238
實例93 制作醫(yī)療健康類網(wǎng)站頁面 245
實例94 制作教育類網(wǎng)站頁面 252
實例95 制作社區(qū)類網(wǎng)站頁面 260
實例96 制作水上樂園網(wǎng)站頁面 271
實例97 制作休閑游戲網(wǎng)站頁面 280
實例98 制作野生動物園網(wǎng)站頁面 292
實例99 制作餐飲類網(wǎng)站頁面 299
實例100 制作游戲類網(wǎng)站頁面 308