主要內容
本書通過30個網站案例,介紹了用標準DIV+CSS構思和實現網站的一些方法。從分析需求和DIV設計入手,通過介紹CSS樣式,步步深入地給出了一個個比較美觀新穎的包含多個頁面的案例。
書中每個案例都是獨立的,其中囊括了線上購物、公司網站、個人網站、視頻網站、電影網、小說閱讀網站、科教類網站等的各種主題,大家不僅可以通過學習,了解到DIV布局、CSS搭配樣式、JavaScript實現動態等一系列的知識點,還可以充分利用其中的一些素材,搭建和裝飾自己的網站。
本書適合從事網頁開發設計的人員(尤其是美工)閱讀。此外,從事Web開發的程式設計師也能從本書里得到啟示。本書也能夠作為高等院校相關專業的參考用書,特別地,本書的諸多案例更能幫助閱讀者輕易地完成課程設計等工作。
目錄
目??錄
第1章?社區交友網站 1
1.1?網站頁面效果分析 1
1.1.1? 首頁效果分析 1
1.1.2? 部落格頁面的效果分析 2
1.1.3? 網站檔案綜述 3
1.2?規劃首頁的布局 4
1.2.1? 搭建首頁頁頭的DIV 4
1.2.2? 搭建導航選單部分的DIV 5
1.2.3? 搭建首頁主體部分最左列的DIV 6
1.2.4? 搭建“你的圈子”部分的DIV 7
1.2.5? 搭建“最近部落格文章”部分的DIV 8
1.2.6? 搭建頁腳部分的DIV 9
1.2.7? 首頁CSS效果分析 9
1.3?電子賀卡頁面 10
1.3.1? 導航列表部分的DIV 10
1.3.2? 賀卡目錄部分的DIV 11
第2章?眾星璀璨的影視網站 13
2.1?網站頁面效果分析 13
2.1.1? 首頁效果分析 13
2.1.2? 電影分類頁面的效果分析 15
2.1.3? 網站檔案綜述 16
2.2?規劃首頁的布局 16
2.2.1? 搭建首頁頁頭的DIV 16
2.2.2? 搭建“最新電影”部分的DIV 17
2.2.3? 搭建“最新電影新聞”部分的DIV 18
2.2.4? 搭建“搜尋”部分的DIV 20
2.2.5? 搭建頁腳部分的DIV 21
2.2.6? 首頁CSS效果分析 22
2.3?分類頁面 23
2.3.1? 分類頁面左邊部分的DIV 23
2.3.2? 分類頁面中間部分的DIV 24
第3章?美食資訊網站 27
3.1?網站頁面效果分析 27
3.1.1? 首頁效果分析 27
3.1.2? 美食店鋪頁面的效果分析 29
3.1.3? 網站檔案綜述 30
3.2?規劃首頁的布局 30
3.2.1? 搭建首頁頁頭的DIV 30
3.2.2? 搭建“高級搜尋”部分的DIV 31
3.2.3? 搭建“免費試吃餐廳”部分的DIV 32
3.2.4? 搭建“飆升排行榜”部分的DIV 33
3.2.5? 搭建頁腳部分的DIV 34
3.2.6? 首頁CSS效果分析 35
3.3?在首頁中實現動態效果 35
3.4?店鋪介紹頁面 37
3.4.1? 店鋪介紹頁面選單標籤的DIV 37
3.4.2? 店鋪介紹頁面右邊相關介紹的DIV 38
第4章?寵物題材的主題網站 40
4.1?網站頁面效果分析 40
4.1.1? 首頁效果分析 40
4.1.2? 寵物社區頁面的效果分析 41
4.1.3? 網站檔案綜述 42
4.2?規劃首頁的布局 43
4.2.1? 搭建首頁頁頭的DIV 43
4.2.2? 搭建“寵物新聞”部分的DIV 44
4.2.3? 搭建“分類導航”部分的DIV 44
4.2.4? 搭建“圖片欣賞”部分的DIV 45
4.2.5? 搭建“聯繫方式”部分的DIV 46
4.2.6? 搭建“寵物故事”部分的DIV 47
4.2.7? 搭建“寵物信息”部分的DIV 47
4.2.8? 搭建頁腳部分的DIV 47
4.2.9? 首頁CSS效果分析 48
4.3?首頁特色 48
4.4?寵物社區頁面 50
第5章?溫馨怡人的電影網站 51
5.1?網站頁面效果分析 51
5.1.1? 首頁效果分析 51
5.1.2? 新片介紹頁面的效果分析 52
5.1.3? 網站檔案綜述 53
5.2?規劃首頁的布局 54
5.2.1? 搭建首頁頁頭的DIV 54
5.2.2? 搭建首頁主體部分的DIV 54
5.2.3? 搭建頁腳部分的DIV 57
5.2.4? 首頁CSS效果分析 58
5.3?在首頁中實現動態效果 59
5.3.1? 變換Logo顏色的方法 60
5.3.2? 實現導航凸出的效果 60
5.4?新片介紹頁面 61
5.4.1? 電影列表的DIV 61
5.4.2? 最新影評的DIV 62
5.4.3? 電影導航的DIV 63
第6章?導遊推廣為一體的海洋公園網站 65
6.1?網站頁面效果分析 65
6.1.1? 首頁效果分析 65
6.1.2? 導遊頁面的效果分析 66
6.1.3? 網站檔案綜述 67
6.2?規劃首頁的布局 68
6.2.1? 搭建首頁頁頭的DIV 68
6.2.2? 搭建“標題圖片”部分的DIV 69
6.2.3? 搭建“最新特別公告”部分的DIV 70
6.2.4? 搭建“海洋公園歡迎您”部分的
DIV 71
6.2.5? 搭建頁腳部分的DIV 72
6.2.6? 首頁CSS效果分析 73
6.3?導遊頁面 74
6.3.1? 導遊頁面右邊部分的DIV 74
6.3.2? 導遊頁面娛樂項部分的DIV 75
第7章?主題明顯的環保網站 77
7.1?網站頁面效果分析 77
7.1.1? 首頁效果分析 77
7.1.2? 環保圖片展示頁面的效果分析 78
7.1.3? 網站檔案綜述 79
7.2?規劃首頁的布局 79
7.2.1? 搭建首頁頁頭的DIV 79
7.2.2? 搭建導航和快速連結部分的DIV 80
7.2.3? 搭建“圖片新聞”部分的DIV 81
7.2.4? 搭建“圖片見證”部分的DIV 82
7.2.5? 搭建頁腳部分的DIV 83
7.2.6? 首頁CSS效果分析 83
7.3?在首頁中實現動態效果 84
7.4?環保圖片頁面 85
7.4.1? 環保導航部分的DIV 85
7.4.2? 導航選單部分的DIV 86
7.4.3? 圖片部分的DIV 87
第8章?寓教於樂的博物館網站 89
8.1?網站頁面效果分析 89
8.1.1? 首頁效果分析 89
8.1.2? 最近活動頁面的效果分析 91
8.1.3? 網站檔案綜述 91
8.2?規劃首頁的布局 92
8.2.1? 搭建首頁頁頭的DIV 92
8.2.2? 搭建“導航選單”部分的DIV 93
8.2.3? 搭建“館內資訊”等4部分的DIV 94
8.2.4? 搭建“館內要聞和科教動態”部分
的DIV 95
8.2.5? 搭建頁腳部分的DIV 95
8.2.6? 首頁CSS效果分析 97
8.3?在首頁中實現動態效果 97
8.4?最近活動頁面 98
8.4.1? “最近活動信息”部分的DIV 98
8.4.2? 右邊部分導航選單的DIV 99
第9章?體現個性的個人網站 101
9.1?網站頁面效果分析 101
9.1.1? 首頁效果分析 101
9.1.2? 作品導航頁的效果分析 102
9.1.3? 網站檔案綜述 104
9.2?規劃首頁的布局 104
9.2.1? 搭建首頁頁頭的DIV 104
9.2.2? 搭建“搜尋”部分的DIV 105
9.2.3? 搭建“作品展示”部分的DIV 106
9.2.4? 搭建頁腳部分的DIV 108
9.2.5? 首頁CSS效果分析 109
9.3?作品導航頁面 110
9.3.1? 左邊導航部分的DIV 110
9.3.2? 作品部分的DIV 111
第10章?內容豐富的交友網站 113
10.1?網站頁面效果分析 113
10.1.1? 首頁效果分析 113
10.1.2? 活動頁面的效果分析 114
10.1.3? 網站檔案綜述 115
10.2?規劃首頁的布局 116
10.2.1? 搭建首頁頁頭的DIV 116
10.2.2? 搭建首頁主體部分的DIV 117
10.2.3? 搭建頁腳部分的DIV 119
10.2.4? 首頁CSS效果分析 120
10.3?在首頁中實現動態效果 122
10.3.1? 更改字型的實現方式 122
10.3.2? 實現更換會員信息的效果 123
10.4?活動頁面 124
10.4.1? 活動頁面左邊部分的DIV 124
10.4.2? 活動頁面右邊部分的DIV 125
第11章?酒店介紹網站 127
11.1?網站頁面效果分析 127
11.1.1? 首頁效果分析 127
11.1.2? 酒店搜尋頁面的效果分析 128
11.1.3? 網站檔案綜述 129
11.2?規劃首頁的布局 130
11.2.1? 搭建首頁頁頭的DIV 130
11.2.2? 搭建“酒店廣告”部分的DIV 131
11.2.3? 搭建“酒店推廣”部分的DIV 132
11.2.4? 搭建“酒店新聞”部分的DIV 132
11.2.5? 搭建“視頻新聞”部分的DIV 133
11.2.6? 搭建“友情連結”部分的DIV 134
11.2.7? 搭建頁腳部分的DIV 135
11.2.8? 首頁CSS效果分析 135
11.3?在首頁中實現動態效果 136
11.4?酒店搜尋頁面 137
11.4.1? 酒店搜尋頁面左邊部分的DIV 138
11.4.2? 酒店搜尋頁面右邊部分的DIV 138
第12章?教育網站 141
12.1?網站頁面效果分析 141
12.1.1? 首頁效果分析 141
12.1.2? 教育中心頁面的效果分析 142
12.1.3? 網站檔案綜述 143
12.2?規劃首頁的布局 144
12.2.1? 搭建首頁頁頭的DIV 144
12.2.2? 搭建“行業前景”部分的DIV 145
12.2.3? 搭建“重要新聞”部分的DIV 146
12.2.4? 搭建“訂購電子新聞”等部分的
DIV 146
12.2.5? 搭建頁腳部分的DIV 147
12.2.6? 首頁CSS效果分析 147
12.3?教育中心頁面 148
12.3.1? “教學一覽”部分的DIV 148
12.3.2? “教學管理”部分的DIV 149
12.3.3? “課程安排”等部分的DIV 150
第13章?清新淡雅的休閒旅遊網站 151
13.1?網站效果圖分析 151
13.1.1? 首頁效果分析 151
13.1.2? “關於個人旅遊”頁面的效果分析 152
13.1.3? 網站檔案綜述 152
13.2?規劃首頁的布局 153
13.2.1? 搭建首頁頁頭部分 153
13.2.2? 搭建“正文部分:BANNER廣告”
部分的DIV 155
13.2.3? 搭建“美景的誘惑”部分的DIV 157
13.2.4? 搭建“權威信息發布”部分的DIV 158
13.2.5? 搭建“查看相關反饋”部分的DIV 160
13.2.6? 搭建首頁頁腳部分的DIV 160
13.2.7? 首頁CSS效果分析 162
13.3?“關於個人旅遊”介紹頁面 163
13.3.1? “適用線路推薦”部分的DIV 164
13.3.2? “個人旅遊聯繫諮詢”部分的DIV 164
13.3.3? “國內跟團旅遊”等部分的DIV 165
第14章?電腦商城網站 167
14.1?網站頁面效果分析 167
14.1.1? 首頁效果分析 167
14.1.2? 台式機頁面的效果分析 169
14.1.3? 網站檔案綜述 170
14.2?規劃首頁的布局 171
14.2.1? 搭建首頁頁頭的DIV 171
14.2.2? 搭建首頁主體部分的DIV 171
14.2.3? 搭建頁腳部分的DIV 174
14.2.4? 首頁CSS效果分析 175
14.3?在首頁中實現動態效果 176
14.3.1? 圖片展開的實現方式 177
14.3.2? 導航小模組出現背景色 178
14.4?台式機頁面 179
14.4.1? 台式機頁面左邊部分的DIV 179
14.4.2? 台式機頁面右邊部分的DIV 180
第15章?汽車網站 182
15.1?網站頁面效果分析 182
15.1.1? 首頁效果分析 182
15.1.2? 新車介紹頁面的效果分析 183
15.1.3? 網站檔案綜述 184
15.2?規劃首頁的布局 184
15.2.1? 搭建首頁頁頭的DIV 184
15.2.2? 搭建“廣告”部分的DIV 186
15.2.3? 搭建“最新新聞”部分的DIV 186
15.2.4? 搭建“新車上市”部分的DIV 187
15.2.5? 搭建“最新動態”部分的DIV 188
15.2.6? 搭建頁腳部分的DIV 189
15.2.7? 首頁CSS效果分析 190
15.3?在首頁中實現選單的動態效果 191
15.4?新車介紹頁面 192
15.4.1? 新車介紹頁面左邊列表的DIV 192
15.4.2? 新車介紹頁面右邊部分的DIV 194
第16章?美觀的朱古力網站設計 197
16.1?網站頁面效果分析 197
16.1.1? 首頁效果分析 197
16.1.2? 朱古力產品列表頁面的效果分析 198
16.1.3? 朱古力網站的檔案綜述 199
16.2?規劃首頁的布局 199
16.2.1? 首頁切圖 199
16.2.2? 搭建首頁網站導航部分的DIV 200
16.2.3? 搭建首頁Logo部分的DIV 200
16.2.4? 搭建“朱古力文化”和“朱古力
產品”部分的DIV 201
16.2.5? 搭建頁腳部分的DIV 203
16.2.6? 首頁CSS效果分析 204
16.3?利用CSS樣式完善首頁效果 205
16.3.1? 首頁頁頭的CSS效果 205
16.3.2? 定義首頁頁腳的CSS效果 206
16.4?產品列表頁面 206
16.4.1? 產品列表頁面分類部分的DIV 207
16.4.2? 產品列表頁面產品部分的DIV 207
16.5?產品詳細頁面 208
第17章?火爆的三國殺桌面遊戲網站 210
17.1?網站頁面效果分析 210
17.1.1? 首頁效果分析 210
17.1.2? 三國殺卡牌介紹頁面的效果分析 212
17.1.3? 網站檔案綜述 212
17.2?規劃首頁的布局 213
17.2.1? 搭建首頁頁頭的DIV 213
17.2.2? 搭建標題性圖片區域部分的DIV 214
17.2.3? 搭建“玩家視頻”部分的DIV 214
17.2.4? 搭建“遊戲攻略”部分的DIV 215
17.2.5? 搭建“玩家討論區”部分的DIV 216
17.2.6? 搭建“壁紙下載”等部分的DIV 218
17.2.7? 搭建頁腳部分的DIV 219
17.2.8? 首頁CSS效果分析 219
17.3?首頁討論區部分的連結效果 221
17.4?卡牌介紹頁面 222
17.4.1? 卡牌介紹頁面標籤卡部分的DIV 222
17.4.2? 卡牌介紹頁面左邊部分的DIV 223
17.4.3? 卡牌介紹頁面右邊部分的DIV 223
第18章?布局經典的設計公司網站 224
18.1?網站頁面效果分析 224
18.1.1? 首頁效果分析 224
18.1.2? 設計理念頁面的效果分析 226
18.1.3? 網站檔案綜述 226
18.2?規劃首頁的布局 227
18.2.1? 搭建首頁頁頭的DIV 227
18.2.2? 搭建“企業簡介”部分的DIV 228
18.2.3? 搭建“優秀網站案例”部分的
DIV 229
18.2.4? 搭建“我們的觀點”部分的DIV 230
18.2.5? 搭建“我們的設計理念”部分的
DIV 230
18.2.6? 搭建頁腳部分的DIV 232
18.2.7? 首頁CSS效果分析 232
18.3?設計理念頁面 233
18.3.1? “我們的服務”部分的DIV 233
18.3.2? 行業案例展示部分的DIV 235
18.3.3? “標誌設計”部分的DIV 236
第19章?深藍色調的社區網站 237
19.1?網站頁面效果分析 237
19.1.1? 首頁效果分析 237
19.1.2? 部落格列表頁面的效果分析 238
19.1.3? 網站檔案綜述 239
19.2?規劃首頁的布局 239
19.2.1? 搭建首頁頁頭的DIV 240
19.2.2? 搭建“網站導航”部分的DIV 241
19.2.3? 搭建“分類導航”部分的DIV 242
19.2.4? 搭建頁腳部分的DIV 244
19.2.5? 首頁CSS效果分析 244
19.3?部落格列表頁面 245
19.3.1? 部落格列表頁面左邊導航部分的
DIV 245
19.3.2? 部落格列表頁面部落格顯示部分的
DIV 247
第20章?食品專類的購物網站 249
20.1?網站頁面效果分析 249
20.1.1? 首頁效果分析 249
20.1.2? 食品分類介紹頁面的效果分析 251
20.1.3? 網站檔案綜述 251
20.2?規劃首頁的布局 252
20.2.1? 搭建首頁頁頭的DIV 252
20.2.2? 搭建“功能模組”部分的DIV 253
20.2.3? 搭建“商品展示”部分的DIV 254
20.2.4? 搭建“快速導航”部分的DIV 255
20.2.5? 搭建頁腳部分的DIV 256
20.2.6? 首頁CSS效果分析 256
20.3?首頁的動態效果 257
20.4?進口食品頁面 257
20.4.1? 進口食品頁面分類列表的DIV 258
20.4.2? 進口食品頁面產品列表的DIV 259
第21章?精美絕倫的視頻網站 262
21.1?網站頁面效果分析 262
21.1.1? 首頁效果分析 262
21.1.2? 個人視頻專輯頁面的效果分析 264
21.1.3? 網站檔案綜述 265
21.2?規劃首頁的布局 265
21.2.1? 搭建首頁頁頭的DIV 265
21.2.2? 搭建視頻導航選單部分的DIV 266
21.2.3? 搭建“熱門視頻”部分的DIV 267
21.2.4? 搭建“焦點討論”部分的DIV 268
21.2.5? 搭建“推薦視頻”部分的DIV 268
21.2.6? 搭建“近期新視頻”部分的DIV 269
21.2.7? 搭建頁腳部分的DIV 270
21.2.8? 首頁CSS效果分析 271
21.3?在首頁中實現動態效果 272
21.3.1? 實現父子選單聯動的效果 272
21.3.2? 實現圖片切換的效果 273
21.4?個人視頻專輯頁面 274
21.4.1? 個人視頻專輯頁面上邊部分的
DIV 274
21.4.2? 個人視頻專輯頁面下邊部分的
DIV 275
第22章?色彩繽紛的圖片網站 277
22.1?網站頁面效果分析 277
22.1.1? 首頁效果分析 277
22.1.2? 最新圖片頁面的效果分析 278
22.1.3? 網站檔案綜述 279
22.2?規劃首頁的布局 280
22.2.1? 搭建首頁第一行的DIV 280
22.2.2? 搭建頁腳部分的DIV 282
22.2.3? 首頁CSS效果分析 283
22.3?首頁CSS效果分析 284
22.3.1? 更改字型的實現方式 284
22.3.2? 導航欄動態效果 286
22.4?最新圖片頁面 287
22.4.1? 最新圖片頁面左邊下半部分的
DIV 287
22.4.2? 最新圖片頁面右邊部分的DIV 288
第23章?精美的糖果公司網站 290
23.1?網站頁面效果分析 290
23.1.1? 首頁效果分析 290
23.1.2? 視頻展示頁面的效果分析 292
23.1.3? 網站檔案綜述 292
23.2?規劃首頁的布局 293
23.2.1? 搭建首頁頁頭的DIV 293
23.2.2? 搭建“公司介紹”部分的DIV 294
23.2.3? 搭建“視頻展示”部分的DIV 295
23.2.4? 搭建推廣模組的DIV 295
23.2.5? 搭建招商部分的DIV 295
23.2.6? 搭建“免費試吃”廣告部分的
DIV 296
23.2.7? 搭建頁腳部分的DIV 297
23.2.8? 首頁CSS效果分析 298
23.3?視頻展示頁面效果分析 299
23.3.1? 導航部分的DIV 299
23.3.2? 導航部分下方廣告位的DIV 300
23.3.3? 視頻展示部分的DIV 301
第24章?休閒娛樂的小說閱讀網站 302
24.1?網站頁面效果分析 302
24.1.1? 首頁效果分析 302
24.1.2? 小說介紹頁面的效果分析 304
24.1.3? 網站檔案綜述 305
24.2?規劃首頁的布局 306
24.2.1? 搭建“註冊和登錄”導航條的
DIV 306
24.2.2? 搭建Logo圖示和廣告圖片部分的
DIV 307
24.2.3? 搭建導航選單的DIV 307
24.2.4? 搭建“最新推薦榜”部分的DIV 308
24.2.5? 搭建“本站強力推薦小說”部分
的DIV 309
24.2.6? 搭建“小說導航”部分的DIV 310
24.2.7? 搭建“最新公告”部分的DIV 311
24.2.8? 搭建頁腳部分的DIV 311
24.2.9? 首頁CSS效果分析 312
24.3?在首頁中實現動態效果 313
24.4?小說介紹頁面 314
24.4.1? 作家介紹部分的DIV 314
24.4.2? 小說目錄部分的DIV 314
24.4.3? 小說推薦部分的DIV 315
第25章?包羅萬象的新聞入口網站 317
25.1?網站頁面效果分析 317
25.1.1? 首頁效果分析 317
25.1.2? 新聞專題導讀頁面的效果分析 319
25.1.3? 網站檔案綜述 320
25.2?規劃首頁的布局 320
25.2.1? 搭建首頁頁頭的DIV 320
25.2.2? 搭建“新聞專欄”部分的DIV 321
25.2.3? 搭建“熱點新聞”部分的DIV 322
25.2.4? 搭建“主題頻道”部分的DIV 323
25.2.5? 搭建“社會新聞”部分的DIV 324
25.2.6? 搭建“關於我們”部分的DIV 326
25.2.7? 搭建頁腳部分的DIV 326
25.2.8? 首頁CSS效果分析 327
25.3?新聞專題導讀頁面 328
25.3.1? 搜尋部分的DIV 328
25.3.2? 新聞專題部分的DIV 328
第26章?醫院網站 330
26.1?網站頁面效果分析 330
26.1.1? 首頁效果分析 330
26.1.2? 專家介紹頁面的效果分析 331
26.1.3? 網站檔案綜述 332
26.2?規劃首頁的布局 332
26.2.1? 搭建首頁頁頭部分 333
26.2.2? 搭建“醫學導讀”部分的DIV 334
26.2.3? 搭建“健康你我”部分的DIV 335
26.2.4? 搭建“最新新聞”部分的DIV 335
26.2.5? 搭建“便民導航”部分的DIV 336
26.2.6? 搭建“資訊”部分的DIV 337
26.2.7? 搭建頁腳部分的DIV 337
26.2.8? 首頁CSS效果分析 338
26.3?專家介紹頁面 339
26.3.1? 專家介紹頁面左邊科室列表的
DIV 339
26.3.2? 專家介紹頁面中間部分的DIV 340
第27章?星光燦爛的娛樂資訊網站 343
27.1?網站頁面效果分析 343
27.1.1? 首頁效果分析 343
27.1.2? 明星介紹頁面的效果分析 345
27.1.3? 網站檔案綜述 346
27.2?規劃首頁的布局 346
27.2.1? 搭建首頁頁頭的DIV 346
27.2.2? 搭建“網站導航選單”部分的
DIV 347
27.2.3? 搭建“娛樂要聞”部分的DIV 348
27.2.4? 搭建“更多要聞”部分的DIV 349
27.2.5? 搭建“更多圖片新聞”部分的
DIV 349
27.2.6? 搭建頁腳部分的DIV 351
27.2.7? 首頁CSS效果分析 352
27.3?明星圖片頁面 352
27.3.1? 明星圖片頁面左邊日曆部分的
DIV 352
27.3.2? 明星圖片頁面中間部分的DIV 355
第28章?雜誌網站 358
28.1?網站頁面效果分析 358
28.1.1? 首頁效果分析 358
28.1.2? 雜誌介紹頁面的效果分析 360
28.1.3? 網站檔案綜述 360
28.2?規劃首頁的布局 361
28.2.1? 搭建首頁頁頭的DIV 361
28.2.2? 搭建“雜誌推薦”部分的DIV 363
28.2.3? 搭建“雜誌列表”部分的DIV 364
28.2.4? 搭建“填寫表單”部分的DIV 365
28.2.5? 搭建“快速導航”部分的DIV 366
28.2.6? 首頁CSS效果分析 367
28.3?雜誌介紹頁面 368
28.3.1? 雜誌介紹頁面左邊導航部分的
DIV 368
28.3.2? 雜誌介紹頁面部落格顯示部分的
DIV 370
第29章?簡潔的購物網站 372
29.1?網站頁面效果分析 372
29.1.1? 首頁效果分析 372
29.1.2? 商品展示頁面的效果分析 374
29.1.3? 購物網站檔案綜述 375
29.2?規劃首頁的布局 375
29.2.1? 搭建首頁頁頭的DIV 375
29.2.2? 搭建導航部分的DIV 376
29.2.3? 搭建“用戶部落格”部分的DIV 377
29.2.4? 搭建“產品展示”部分的DIV 378
29.2.5? 搭建頁腳的DIV 379
29.2.6? 首頁CSS效果分析 379
29.3?利用CSS樣式完善首頁效果 381
29.3.1? 整體布局 381
29.3.2? 定義其他樣式 381
29.4?商品展示頁面 382
29.4.1? 用DIV層構建分頁效果 382
29.4.2? 用CSS構建商品圖片的效果 383
29.5?站點地圖頁面 384
第30章?個人圖片部落格網站 386
30.1?網站頁面效果分析 386
30.1.1? 首頁效果分析 386
30.1.2? 圖片展示頁面的效果分析 387
30.1.3? 網站檔案綜述 388
30.2?規劃首頁的布局 389
30.2.1? 搭建首頁第一行的DIV 389
30.2.2? 搭建首頁主體部分的DIV 390
30.2.3? 搭建頁腳部分的DIV 392
30.2.4? 首頁CSS效果分析 393
30.3?首頁CSS效果分析 394
30.3.1? DIV陰影效果的實現方式 394
30.3.2? 圖示懸浮效果 395
30.4?圖片展示頁面 396
30.5?部落格文章頁面 398
30.5.1? 部落格文章頁面文章部分的DIV 398
30.5.2? 部落格文章頁面歸檔和分類部分的
DIV 400