3) 网页center部分,是以品牌首字母的顺序进行排序展示:
图4.2.2 车型展示中间部分图
这个模块主要是用div+dl、dt、dd进行嵌套实现效果。 4) 网页fd2部分:
图4.2.3 车型展示快捷入口图
这部分主要是展示自己的收藏夹和购物车的快捷入口,无论页面滚动与否,它都会一直显示在网页的右侧中间位置,方便用户随时进入相应页面。
实现其固定的主要代码为:
.fd2{position:fixed;width:100px;height:200px;top:210px;right:0px;z-index:99;} 5) 网页foot部分与首页实现方法一样。
4.3 车型展示内页设计
车型展示内页是展示某个品牌下的所有车型,每一辆汽车图片下显示了本车的部分基本信息和用户需求指引按钮。
第9页 (共21页)
本页面在进行代码布局时,分为以下几个版块:
1) 网页heashow部分,这个版块整体会随着页面的滚动而始终固定在顶部,
这个效果用JS代码实现(同车型展示效果相同):
图4.3.1 车型展示内页设计分类图
2) 网页center部分,在这里又把页面分为左右两个部分:
左边是展示某个品牌下的所有车型,在对应汽车下方的基本信息处,然后点击“加入购物车”就可以把图书添加到购物车中,并且会到达购物车列表页面;然后点击“收藏”就可以把图书添加到收藏夹中;然后点击“预约试驾”,页面就会跳转到预约试驾登记信息:
图4.3.2 车型展示内页展示图
右边主要包含了三个板块:客服咨询、最新活动、最近浏览的车型,实现的方法和首页一样。
4.4 最新活动设计
最新活动页面主要就是展示本公司正在举行的汽车活动,包含的汽车的部分基本信息,点击汽车图片进入相应汽车的详细信息网页。
本页面在进行代码布局时,分为以下几个版块:
第10页 (共21页)
1) 网页center部分,在这里又把页面分为左右两个部分:
左边是展示某个品牌正在进行活动的车型,点击汽车图片进入相应汽车的详细信息网页:
图4.4.1 最新活动展示图
右边主要包含了两个板块:客服咨询、最近浏览的车型,实现的方法和首页一样。
4.5 最新活动内页设计
最新活动内页页面主要就是用户在最新活动页面点击了某一款车型后,所跳转的关于该车型的活动详情,主要展示了这款汽车进行活动的详细信息,旁边有用于登记参加活动的用户信息登记表,用户填写好自己的基本信息后,公司会把后续内容告知用户,并进行跟进。
本页面在进行布局时,分为以下几个版块:
1) 网页center2部分,在这里又把页面分为左右两个部分:
左边是展示该车型的活动详情:
第11页 (共21页)
图4.5.1 最新活动详询图
右边是用户进行报名登记的一个表格:
图4.5.2 最新活动报名图
实现代码如下: