DIV+CSS网站布局案例精粹PDF电子书下载

第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搭建“馆内资讯”等四部分的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活动页面的效果分析 14

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自驾游页面的效果分析 153

13.1.3网站文件综述 153

13.2规划首页的布局 154

13.2.1搭建首页页头的DIV 154

13.2.2搭建“航班查询”部分的DIV 155

13.2.3搭建“热门旅游线路”部分的DIV 156

13.2.4搭建“特色项目”部分的DIV 157

13.2.5搭建“推荐游玩地”部分的DIV 157

13.2.6搭建“特别推荐”部分的DIV 158

13.2.7搭建页脚部分的DIV 159

13.2.8首页CSS效果分析 159

13.3自驾游页面 160

13.3.1自驾游页面左边部分的DIV 160

13.3.2自驾游页面右边部分的D 161

第14章 电脑商城网站 163

14.1网站页面效果分析 163

14.1.1首页效果分析 163

14.1.2台式机页面的效果分析 165

14.1.3网站文件综述 166

14.2规划首页的布局 167

14.2.1搭建首页页头的DIV 167

14.2.2搭建首页主体部分的DIV 167

14.2.3搭建页脚部分的DIV 170

14.2.4 首页CSS效果分析 171

14.3在首页中实现动态效果 172

14.3.1图片展开的实现方式 173

14.3.2导航小模块出现背景色 174

14.4台式机页面 175

14.4.1台式机页面左边部分的DIV 175

14.4.2台式机页面右边部分的DIV 176

第15章 汽车网站 178

15.1网站页面效果分析 178

15.1.1首页效果分析 178

15.1.2新车介绍页面的效果分析 179

15.1.3网站文件综述 180

15.2规划首页的布局 180

15.2.1搭建首页页头的DIV 180

15.2.2搭建“广告”部分的DIV 182

15.2.3搭建“最新新闻”部分的DIV 182

15.2.4搭建“新车上市”部分的DIV 183

15.2.5搭建“最新动态”部分的DIV 184

15.2.6搭建页脚部分的DIV 185

15.2.7首页CSS效果分析 186

15.3在首页中实现菜单的动态效果 187

15.4新车介绍页面 188

15.4.1新车介绍页面左边列表的DIV 188

15.4.2新车介绍页面右边部分的DIV 190

第16章 美观的巧克力网站设计 193

16.1网站页面效果分析 193

16.1.1首页效果分析 193

16.1.2巧克力产品列表页面的效果分析 194

16.1.3巧克力网站的文件综述 195

16.2规划首页的布局 195

16.2.1首页切图 195

16.2.2搭建首页网站导航部分的DIV 196

16.2.3搭建首页Logo部分的DIV 196

16.2.4搭建“巧克力文化”和“巧克力产品”部分的DIV 197

16.2.5搭建页脚部分的DIV 199

16.2.6首页CSS效果分析 200

16.3利用CSS样式完善首页效果 201

16.3.1首页页头的CSS效果 201

16.3.2定义首页页脚的CSS效果 202

16.4产品列表页面 202

16.4.1产品列表页面分类部分的DIV 203

16.4.2产品列表页面产品部分的DIV 203

16.5产品详细页面 204

第17章 火爆的三国杀桌面游戏网站 206

17.1网站页面效果分析 206

17.1.1首页效果分析 206

17.1.2三国杀卡牌介绍页面的效果分析 208

17.1.3网站文件综述 208

17.2规划首页的布局 209

17.2.1搭建首页页头的DIV 209

17.2.2搭建标题性图片区域部分的DIV 210

17.2.3搭建“玩家视频”部分的DIV 210

17.2.4搭建“游戏攻略”部分的DIV 211

17.2.5搭建“玩家讨论区”部分的DIV 212

17.2.6搭建“壁纸下载”等部分的DIV 214

17.2.7搭建页脚部分的DIV 215

17.2.8首页CSS效果分析 215

17.3首页讨论区部分的链接效果 217

17.4卡牌介绍页面 218

17.4.1卡牌介绍页面标签卡部分的DIV 218

17.4.2卡牌介绍页面左边部分的DIV 219

17.4.3卡牌介绍页面右边部分的DIV 219

第18章 布局经典的设计公司网站 220

18.1网站页面效果分析 220

18.1.1首页效果分析 220

18.1.2设计理念页面的效果分析 222

18.1.3网站文件综述 222

18.2规划首页的布局 223

18.2.1搭建首页页头的DIV 223

18.2.2搭建“企业简介”部分的DIV 224

18.2.3搭建“优秀网站案例”部分的DIV 225

18.2.4搭建“我们的观点”部分的DIV 226

18.2.5搭建“我们的设计理念”部分的DIV 226

18.2.6搭建页脚部分的DIV 228

18.2.7首页CSS效果分析 228

18.3设计理念页面 229

18.3.1“我们的服务”部分的DIV 229

18.3.2行业案例展示部分的DIV 231

18.3.3“标志设计”部分DIV 232

第19章 深蓝色调的社区网站 233

19.1网站页面效果分析 233

19.1.1首页效果分析 233

19.1.2博客列表页面的效果分析 234

19.1.3网站文件综述 235

19.2规划首页的布局 235

19.2.1搭建首页页头的DIV 236

19.2.2搭建“网站导航”部分的DIV 237

19.2.3搭建“分类导航”部分的DIV 238

19.2.4搭建页脚部分的DIV 240

19.2.5首页CSS效果分析 240

19.3博客列表页面 241

19.3.1博客列表页面左边导航部分的DIV 241

19.3.2博客列表页面博客显示部分的DIV 243

第20章 食品专类的购物网站 245

20.1网站页面效果分析 245

20.1.1首页效果分析 245

20.1.2食品分类介绍页面的效果分析 247

20.1.3网站文件综述 247

20.2规划首页的布局 248

20.2.1搭建首页页头的DIV 248

20.2.2搭建“功能模块”部分的DIV 249

20.2.3搭建“商品展示”部分的DIV 250

20.2.4搭建“快速导航”部分的DIV 251

20.2.5搭建页脚部分的DIV 252

20.2.6首页CSS效果分析 252

20.3首页的动态效果 253

20.4进口食品页面 253

20.4.1进口食品页面分类列表的DIV 254

20.4.2进口食品页面产品列表的DIV 255

第21章 精美绝伦的视频网站 258

21.1网站页面效果分析 258

21.1.1首页效果分析 258

21.1.2个人视频专辑页面的效果分析 260

21.1.3网站文件综述 261

21.2规划首页的布局 261

21.2.1搭建首页页头的DIV 261

21.2.2搭建视频导航菜单部分的DIV 262

21.2.3搭建“热门视频”部分的DIV 263

21.2.4搭建“焦点讨论”部分的DIV 264

21.2.5搭建“推荐视频”部分的DIV 264

21.2.6搭建“近期新视频”部分的DIV 265

21.2.7搭建页脚部分的DIV 266

21.2.8首页CSS效果分析 267

21.3在首页中实现动态效果 268

21.3.1实现父子菜单联动的效果 268

21.3.2实现图片切换的效果 269

21.4个人视频专辑页面 270

21.4.1个人视频专辑页面上边部分的DIV 270

21.4.2个人视频专辑页面下边部分的DIV 271

第22章 色彩缤纷的图片网站 273

22.1网站页面效果分析 273

22.1.1首页效果分析 273

22.1.2最新图片页面的效果分析 274

22.1.3网站文件综述 275

22.2规划首页的布局 276

22.2.1搭建首页第一行的DIV 276

22.2.2搭建页脚部分的DIV 278

22.2.3首页CSS效果分析 279

22.3首页CSS效果分析 280

22.3.1更改字体的实现方式 280

22.3.2导航栏动态效果 282

22.4最新图片页面 283

22.4.1最新图片页面左边下半部分的DIV 283

22.4.2最新图片页面右边部分的DIV 284

第23章 精美的糖果公司网站 286

23.1网站页面效果分析 286

23.1.1首页效果分析 286

23.1.2视频展示页面的效果分析 288

23.1.3网站文件综述 288

23.2规划首页的布局 289

23.2.1搭建首页页头的DIV 289

23.2.2搭建“公司介绍”部分的DIV 290

23.2.3搭建“视频展示”部分的DIV 291

23.2.4搭建推广模块的DIV 291

23.2.5搭建招商部分的DIV 291

23.2.6搭建“免费试吃”广告部分的DIV 292

23.2.7搭建页脚部分的DIV 293

23.2.8首页CSS效果分析 294

23.3视频展小页面效果分析 295

23.3.1导航部分的DIV 295

23.3.2导航部分下方广告位的DIV 296

23.3.3视频展示部分的DIV 297

第24章 休闲娱乐的小说阅读网站 298

24.1网站页面效果分析 298

24.1.1首页效果分析 298

24.1.2小说介绍页面的效果分析 300

24.1.3网站文件综述 301

24.2规划首页的布局 302

24.2.1搭建“注册和登录”导航条的DIV 302

24.2.2搭建Logo图标和广告图片部分的DIV 303

24.2.3搭建导航菜单的DIV 303

24.2.4搭建“最新推荐榜”部分的DIV 304

24.2.5搭建“本站强力推荐小说”部分的DIV 305

24.2.6搭建“小说导航”部分的DIV 306

24.2.7搭建“最新公告”部分的DIV 307

24.2.8搭建页脚部分的DIV 307

24.2.9首页CSS效果分析 308

24.3在首页中实现动态效果 309

24.4小说介绍页面 310

24.4.1作家介绍部分的DIV 310

24.4.2小说目录部分的DIV 310

24.4.3小说推荐部分的DIV 311

第25章 包罗万象的新闻门户网站 313

25.1网站页面效果分析 313

25.1.1首页效果分析 313

25.1.2新闻专题导读页面的效果分析 315

25.1.3网站文件综述 316

25.2规划首页的布局 316

25.2.1搭建首页页头的DIV 316

25.2.2搭建“新闻专栏”部分的DIV 317

25.2.3搭建“热点新闻”部分的DIV 318

25.2.4搭建“主题频道”部分的DIV 319

25.2.5搭建“社会新闻”部分的DIV 320

25.2.6搭建“关于我们”部分的DIV 322

25.2.7搭建页脚部分的DIV 322

25.2.8首页CSS效果分析 323

25.3新闻专题导读页面 324

25.3.1搜索部分的DIV 324

25.3.2新闻专题部分的DIV 324

第26章 医院网站 326

26.1网站页面效果分析 326

26.1.1首页效果分析 326

26.1.2专家介绍页面的效果分析 327

26.1.3网站文件综述 328

26.2规划首页的布局 328

26.2.1搭建首页页头部分 329

26.2.2搭建“医学导读”部分的DIV 330

26.2.3搭建“健康你我”部分的DIV 331

26.2.4搭建“最新新闻”部分的DIV 331

26.2.5搭建“便民导航”部分的DIV 332

26.2.6搭建“资讯”部分的DIV 333

26.2.7搭建页脚部分的DIV 333

26.2.8首页CSS效果分析 334

26.3专家介绍页面 335

26.3.1专家介绍页面左边科室列表的DIV 335

26.3.2专家介绍页面中间部分的DIV 336

第27章 星光灿烂的娱乐资讯网站 339

27.1网站页面效果分析 339

27.1.1首页效果分析 339

27.1.2明星介绍页面的效果分析 341

27.1.3网站文件综述 342

27.2规划首页的布局 342

27.2.1搭建首页页头的DIV 342

27.2.2搭建“网站导航菜单”部分的DIV 343

27.2.3搭建“娱乐要闻”部分的DIV 344

27.2.4搭建“更多要闻”部分的DIV 345

27.2.5搭建“更多图片新闻”部分的DIV 345

27.2.6搭建页脚部分的DIV 347

27.2.7首页CSS效果分析 348

27.3明星图片页面 348

27.3.1明星图片页面左边日历部分的DIV 348

27.3.2明星图片页面中间部分的DIV 351

第28章 杂志网站 354

28.1网站页面效果分析 354

28.1.1首页效果分析 354

28.1.2杂志介绍页面的效果分析 356

28.1.3网站文件综述 356

28.2规划首页的布局 357

28.2.1搭建首页页头的DIV 357

28.2.2搭建“杂志推荐”部分的DIV 359

28.2.3搭建“杂志列表”部分的DIV 360

28.2.4搭建“填写表单”部分的DIV 361

28.2.5搭建“快速导航”部分的DIV 362

28.2.6首页CSS效果分析 363

28.3杂志介绍页面 364

28.3.1杂志介绍页面左边导航部分的DIV 364

28.3.2杂志介绍页面博客显示部分的DIV 366

第29章 简洁的购物网站 368

29.1网站页面效果分析 368

29.1.1首页效果分析 368

29.1.2商品展示页面的效果分析 370

29.1.3购物网站文件综述 371

29.2规划首页的布局 371

29.2.1搭建首页页头的DIV 371

29.2.2搭建导航部分的DIV 372

29.2.3搭建“用户博客”部分的DIV 373

29.2.4搭建“产品展示”部分的DIV 374

29.2.5搭建页脚的DIV 375

29.2.6首页CSS效果分析 375

29.3利用CSS样式完善首页效果 377

29.3.1整体布局 377

29.3.2定义其他样式 377

29.4商品展示页面 378

29.4.1用DIV层构建分页效果 378

29.4.2用CSS构建商品图片的效果 379

29.5站点地图页面 380

第30章 个人图片博客网站 382

30.1网站页面效果分析 382

30.1.1首页效果分析 382

30.1.2图片展示页面的效果分析 383

30.1.3网站文件综述 384

30.2规划首页的布局 385

30.2.1搭建首页第一行的DIV 385

30.2.2搭建首页主体部分的DIV 386

30.2.3搭建页脚部分的DIV 388

30.2.4首页CSS效果分析 389

30.3首页CSS效果分析 390

30.3.1 DIV阴影效果的实现方式 390

30.3.2图标悬浮效果 391

30.4图片展示页面 392

30.5博客文章页面 394

30.5.1博客文章页面文章部分的DIV 394

30.5.2博客文章页面归档和分类部分的DIV 396