第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