交易商城网站前端设计与实现

摘  要：网上交易商城类似于现实世界当中的商店，差别是利用电子商务的各种手段，达成从买到卖的过程的虚拟商店，从而减少中间环节，消除运输成本和代理中间的差价，造就对普通消费和加大市场流通带来巨大的发展空间。尽可能的还消费者以利益，带动公司发展和企业腾飞，引导国民经济稳定快速发展，推动国内生产总值。

网站开发采用了div+css开发技术，有网站首页、商品大类别等页面，界面设计多样，极强的表现了网络化生活。网站版块多以现阶段大型电商网站类型相似，紧贴网站主题。布局清爽大方，符合交互要求。

关键词：div+css 交易商城 

目 录

1 引言 1

1.1 交易商城的开发背景 1

1.2 交易商城的意义与设计目的 1

2 开发工具及环境介绍 3

2.1 交易商城的开发环境 3

2.2 本项目应用的主要开发工具 3

2.2.1 Microsoft SQL Server 2008 3

2.2.2 Adobe Photoshop CS4 4

2.2.3 HBuilder 5

2.2.4 Microsoft Visual Studio 2010 5

2.3 本项目应用的主要开发技术 5

2.3.1 java script 5

2.3.2 DIV+CSS 6

2.3.3 Vue.js 6

3 项目概述 7

3.1 项目概述 7

3.2 项目风险 7

4 网站实现 8

4.1 首页 8

4.1.1 首页布局 8

4.1.2 首页效果测试 8

4.2 宠物页 9

4.2.1 宠物页布局 9

4.2.2 宠物页效果测试 9

4.3 生活页 11

4.3.1 生活页布局 11

4.3.2 生活页效果测试 11

4.4 清洁页 12

4.4.1 清洁页布局 12

4.4.2 清洁页效果测试 12

4.5 童装页 14

4.5.1 童装页布局 14

4.5.2 童装页功能效果测试 14

4.6 图书页 16

4.6.1 图书页布局 16

4.6.2 图书页效果测试 16

4.7 元件页 17

4.7.1 元件页布局 17

4.7.2 元件页效果测试 17

4.8 厨具页 18

4.8.1 厨具页布局 18

4.8.2 厨具页效果测试 18

4.9 玩具页 20

4.9.1 玩具页布局 20

4.9.2 玩具页功能效果测试 20

4.10 电子书页 22

4.10.1 电子书页布局 22

4.10.2 电子书效果测试 22

4.11 音乐页 24

4.11.1 音乐页布局 24

4.11.2 音乐页效果测试 24

4.12 男鞋页 26

4.12.1 男鞋页布局 26

4.12.2 男鞋页功能效果测试 26

4.13 女鞋页 28

4.13.1 女鞋页布局 28

4.13.2 女鞋页效果测试 28

4.14 办公页 30

4.14.1 办公页布局 30

4.14.2 办公页功能效果测试 30

4.15 登录页 32

4.15.1 登录页布局 32

4.15.2 登录页功能测试 32

4.16 注册页 33

4.16.1 注册页布局 33

4.16.2 注册页功能测试 33

4.17 购物车页 34

4.17.1 购物车页布局 34

4.17.2 购物车页功能测试 34

5 测试 35

5.1 测试 35

5.2 测试例子及其结果 36

5.2.1 页面效果测试 36

6 总结与展望 37

致谢 38

参考文献 39