发布时间 : 2024/5/5 21:19:10 星期日 文章汽车销售网站的设计与实现网页前端与网站功能测试毕业设计论文更新完毕开始阅读3c89d9414b7302768e9951e79b89680203d86b9b

汽车销售网商品管理商城用户管理买家指南售后服务购物车收藏夹订单模块最新活动预约试驾添加商品删除商品修改商品搜索商品个人中心用户登陆禁用用户用户注册添加购物项删除购物项清空购物车添加收藏查看收藏新增活动加载活动列表用户预约预约管理条件查询全文索引提交注册信息邮箱激活生产订单提交订单在线支付查询订单查询预约删除预约账户管理购买记录我的收藏修改收货地址修改登陆信息删除记录评价商品查看收藏删除收藏 图 3.2.1 系统功能模块图

4 网站前台设计与实现

4.1 首页设计

网站的首页是必须具备的，也是一个网站形象的象征。所以首页的设计我们把握了简洁大方、信息齐全的要点，在进行前端切图时，把它分成头、中、尾三个部分进行布局。

第5页 （共22页）

图4.1.1 首页设计图

1) 网页head部分，在任何页面点击logo网页都会跳转到首页，导航栏的

文字点击都能够进入相应的页面：

图4.1.2 首页头部图

分为两个大的Div，一个div的class=top；

另一个div的class=banner；

2) 网页center部分，点击购物车、收藏夹图标，页面会跳转到购物车、收藏夹相应页

面，客服咨询这块能把你的疑问直接和客服进行交流：

第6页 （共22页）

图4.1.3 首页中间部分图

在布局时分为左右两个大的Div，左边部分主要是新车展示的基本信息，鼠标移到图片上，图片会放大，实现代码为：

img.xz{-webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

img.xz:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);z-index:3;position:relative;}

img.xz2:hover{-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);width:310px;height:200px;}

右边部分包含的模块有收藏夹、购物车入口，最新活动，最近浏览的车型，客服入口。

3) 网页foot部分，展示了我们公司的联系方式，方便用户有需要是和我们

进行交流：

图4.1.4 首页底部图

4.2 车型展示设计

车型展示页面就是对本公司所经营的所有车型，按照品牌、座驾数目、功能等特点进行集中展示，供用户在这个平台上能方便快捷地了解到自己心仪的商品。

本页面在进行代码布局时，分为了五个版块：

第7页 （共22页）

1) 网页head部分：这里和首页的代码一样，但是少了class=banner的div

2) 网页heashow部分，点击车型分类能够进入相应的所有品牌的这款车型

页面，点击字母查询，是跳转到品牌首字母的对应版块：

图4.2.1 车型展示分类图

这个版块整体会随着页面的滚动而始终固定在顶部，这个效果用JS代码实现：