DIV CSS网站布局案例精粹（第2版）目录

时间：2023-02-24 02:30:01 | 来源：营销百科

时间：2023-02-24 02:30:01 来源：营销百科

DIV CSS网站布局案例精粹（第2版）目录：目??录

第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