admin 管理员组

文章数量: 887629


2023年12月19日发(作者：个人信息的title是什么)

汽车销售网站设计与实现

──前端页面制作

摘 要：当前，网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。

本论文所提出的方案采用的是当前比较流行的语言，如html、css和javascript、jQuery，结合photoshop，fireworks工具等完成该系统的基本功能模块，如汽车详情、个人中心、购物车、登陆、注册等。

关键词：前端； 电子商务；功能模块

Abstract：At present，network technology develops quickly，network is so convenient,that

people are more and more rely on can get information everywhere by website,so that all

kinds of website sprang up,the appeared of car_sales website bring more convenient for that people

who want to get more car information and want to buy，solved the people want to be a car because

of the diversity of difficult to filter.

In this paper，the proposed scheme USES the current relatively popular in the language,such as

javascript、jQuery，combine this tools to finished basic modules of the system,this tools include

Photoshop、Firefox and on,function module is like showCon2、personal center、shopCar、log

in、register.

Key words：leading end; e-business; function module; html

1 绪论

在网上销售汽车是时代发展的结果，随着网络技术迅猛发展，网络的方便快捷导致人们对网络的依赖逐渐增大，各类信息都可以通过网站浏览，致使各类网第1页 （共29页）

站如雨后春笋般的出现，汽车销售网的出现给想要购车的人群了解汽车信息和购买带来了方便，解决了人们想要购车但因为种类繁杂难以筛选的问题。汽车销售实体店比较分散，如果一个汽车店没有找到自己喜欢的车型，转到下一个实体店，花费时间，对人体的消费也比较大，网上销售给人们带来了极大的方便，它将汽车集中在一起，不用出门就可以看到各种车型，所以网上营销是时代进步的产物。

在此篇论文中，我将介绍如何在建立网站，以何种方式在网上进行销售的，通过网页的介绍，使人们对销售模式更加熟悉，我将介绍当前主流浏览器，以及浏览器对各种语言的支持，如：jQuery、javascript、css等，我通过网站的结构，组成，技术支持，功能模块的实现，网页测试等方面来描述汽车销售网站，通过这些我们将对汽车销售网站的架构有一定的了解，功能实现也有一定的认识，各功能模块的实现和测试也有相当的认知，我将详细介绍这些。

2 实现环境介绍

2.1 当前主流浏览器介绍

2.1.1 IE

Internet Explorer，原名为Microsoft Internet Explorer，又称Windows Internet

Explorer，简称IE，推出公司是微软公司，推出公司在美国，是一款网页浏览器，当前主流浏览器之一，IE浏览器是全球使用率最高的浏览器。

2.1.2 Firefox

Firefox又称“火狐”或“火狐浏览器”，简称Fx或FF，火狐是一款开源的网页浏览器，火狐浏览器在全球占率较高，用户在全球各浏览器中排名第三，用户数在国外使用率更高。

2.1.3 chrome

第2页 （共29页）

Chrome，又名Google浏览器，是Google公司开发的设计简单、高效的浏览工具，chrome是基于其他开源软件编著的，chrome浏览器开发的目的是提高浏览器的稳定性、安全性和速度。

2.2 站点

站点，是一个储存区，将一个网站中的网页文件和素材文件，有条理地存放在站点文件夹里，存放在站点中的文件与文件夹一起构成网站的实质内容。站点中的文件除了网页文件外还有素材文件，素材文件就是网页中会用到的图片、视频、声音等，这些素材是以文件的形式存放在站点中。

2.3 超链接

超链接属于网页的一部分，它让其他网页同站点之间进行的其他元素进行连接，也就是当浏览页面时，鼠标点击某段文字或者图片时，会打开其他网页，也可以跳转到其他网站。超链接将同一网站的同一页面、同一网站的不同页面、不同网站串联起来，方便客户的浏览和查找，超链接使web服务生命力广泛、持久。

2.4 网页

网页是网站的基本元素，网页是一个文件，是各种网站应用的平台，网页是通过网页浏览器阅读，网页是用文字、图片、视频、声音来展示效果，网页上主流代码布局之前通常以表格定位，但是现在一般采用div+css布局。Div是选择区，css是将图片、文字、视频、声音在网页上摆放的样式固定并表现出来。

3 网站前台实现需求分析

3.1 页面实现需求

根据页面设计的需求和客户的要求，在页面实现是采用html+css布局，通过javascript、jQuery实现动态效果，在我所实现的页面中，页面布局相对简单，第3页 （共29页）

主要实现由javascript、jQuery编写的动态效果，我主要实现的页面是：登陆（login），注册（register），汽车详情（showCon2），购物车（shopCar），个人中心。用户进入汽车销售网后可以浏览车型，看到感兴趣的车型想要加入购物车时必须登陆，如果在此网站没有账号的点击注册，注册在本网站的账号或使用其他方式登陆，如QQ，微信360，支付宝等，登陆或注册成功后跳转会浏览车型页面，要了解车详细，点击车图片或文字介绍，进入汽车详情（showCon2）页，对喜欢的车型加入购物车（shopCar）,确定后跳转回汽车详情，点击用户名进入账户管理，若账户信息有改变，点击编辑进入更改账户信息或点击管理地址进入更改地址簿。进入账户信息后需要更改密码的点击更改密码复选框出现更改密码更改账户信息或更改地址簿成功后跳转回账户管理页面，要查看之前的购买记录或收藏点击我的购买记录或我的收藏，这些就是我这部分的功能模块实现需求图3-1，图3-2。

3.2 功能模块

(1)

图3-1 功能结构一图

第4页 （共29页）

(2)

图3-2 功能结构二图

4 技术支持

4.1 HTML

HTML英文全名HyperText Markup Language，HTML主要用来编写Web文档的语言。页面元素是通过特定的标签来实现的，根据这些标签指示浏览器怎样显示这个页面的内容，如文本、图片、视频、声音的样式。超文本，是一种含有指向其他文本或页面链接的文本，我们称之为链接。超文本把放在不同地方，不同计算机，不同地域的文档链接在一起。用户不用关心打开文档的链接所指的内容到底指向那个文件，只需要点击文本，页面马上就会跳转到所指向的文档的内容中去。

4.2 CSS

HTML可以将在网页中表现的形式、结构、内容表现在同一文档中，虽然放在同一文档中简单，但是在实行中实际上增加了难道，是页面复杂，不便于维护，更改时费力费时。所以就出现了CSS。CSS的英文全称为Cascading Style

Sheet，中文意思为层叠样式表，主要是控制HTML中网页文本的页面布局的外观样式，使页面更加美观，是网页文档内容的形式和结构完全分离。

4.3 JavaScript

JavaScript一种脚本语言，javascript具有一定的安全性，它是基于事件驱动和对象的脚本语言。同时javascript也是一种在客户端Web开发广泛应用的脚本语言，通常用来实现HTML网页上的动态效果，比如网页上经常有的图片的定时切换效果，无缝滚动滚动，数字增加效果等其他的动态效果。

第5页 （共29页）

Javascript语言的语法与Java语言的语法比较相似，但当你对javascript语言更加熟悉之后，就会发现他们之间其实是两种不同的语言。

4.4 jQuery

jQuery是兼容多种浏览器的javascript框架，jQuery的核心理念是write less（写得更少）,do more(做得更多)，jQuery的出现，是网页上的效果的实现越来越简单，将javascript封装在一个文件中，通过jQuery来调用，jQuery是美国人John Resig发布的，当前jQuery是是最流行的javascript框架。

jQuery是使用MIT许可协议，同时也是免费的，jQuery也是开源的。jQuery的出现是软件开发者使用更加便捷，如jQuery在处理查找DOM元素、操作过程等，使开发者轻松地开发出功能强大且方便的静态或动态网页。

5 功能模块实现

5.1 登陆（login）

登陆界面包括2个主要的部分，位置分别为上、下，上部包含两大部分内容网站logo和注册，点击logo跳转到首页，点击注册跳转到注册页面，注册账号后才能实现收藏、将加入购物车，立即购买，查看订单等用户操作。

下部的实现分为两面，左面放的是汽车的照片代表我们做的是汽车类型的网站，右部选用table布局实现填写账号和密码，忘记密码，免费注册，记住密码，下次自动登录，注册，更多等功能实现，实现代码通过table布局，table中tr控制行，td控制列，具体格式如

... ...
，合并行采用rows如rows=num，num代表数字，合并两行rows=2，合并列cols，如cols=num，网站效果如图3所示，图5-1：

第6页 （共29页）

(3)

图5-1 登陆界面图

5.1.1 登陆（login）布局实现

border="0">

第7页 （共29页）

5.1.1 登陆（login）css样式实现

第9页 （共29页）

.log-reg .login-bble 1{heighr:20px;}

.log-reg .login-bble 1 em{font-size:12px;padding-rigth:20px;

background:url(../images/) right center no-repeat;

display:inline-block;width:100px;height:20px;line-height:20px;}

.log-reg .login-bble 2 td{font-size:12px;}

.log-reg .login-bble 2 td a{color:#A30505;}

.log-reg .login-bble 2 td span{margin-right:10px;float:left;}

.log-reg .login-bble 2 td span input{float:left;margin-top:2px;margin-right:5px;}

.log-reg .login-bble 3 a{color:#A30505;margin-left:10px;}

.log-reg .login-bble td,.log-reg .srl-tle td{color: #666;font-size: 14px;}

5.2 注册（register）

在本网站没有账号的客户需要注册账号，点击注册跳转到此页面或在首页直接点击注册，若已经注册的用户一不小心进入到此页面，可以直接点击登陆返回登陆界面，也可以点击logo返回首页，本页面实现邮箱、用户名、创建密码、确认密码所在城市、验证码、同意以下协议并注册功能。验证码看不清楚是点击换一个，注册成功输入条件①此页面有邮箱验证，若输入的数据不是邮箱组成，否则注册将不会成功；②邮箱，用户名，创建密码，确认密码，验证码都不能为空，否则注册不会成功；③创建密码与确认密码输入的数据必须一致，否则注册不会成功；④输入的验证码要与页面显示出的验证码一致，否则注册不会成功；⑤必须点击同意以下协议并注册，否则注册不会成功。这是这个页面注册的六个条件，少了其中一条，注册都不成立。功能实现的布局代码，与登陆界面的布局类似，上部分采用的是div布局，下部分采用table布局，布局代码如下：

第10页 （共29页）

...

....

邮箱

效果如图4所示，图5-2：

（4）

图5-2 注册界面图

5.3 汽车详情（showCon2）

点击一款汽车会显示汽车的详情,汽车详情页有上、中、下三部分组成，头部由logo、搜索框、导航栏组成，点击logo直接放回首页，logo在网页上用图片存放，标签为img，格式为，在搜索框里输入要搜索的文本，点击搜索下面会出现搜索相应的内容的改变，搜索框左边放的文本框

type=”text” />，导航栏有车型展示、最新车型、热销车型、最新活动、卖家指南、售后服务，链接到相应的页面，用ul、li实现效果，当鼠标移到导航栏上的第11页 （共29页）

相应版块时，相应li的背景发生改变，文字颜色变成红色，此效果在css中实现，有hover实现。

中部主要介绍汽车详情、产品详情、顾客评论、厂家推荐，汽车详情主要实现变速器、车型、报价、定金、库存、月销量、收藏、预约试驾、订购的数量、加入购物车或立即购买等功能，产品详情主要介绍提高驾驶安全性的配备、坡道辅助系统、降噪科技；顾客评论主要是顾客能够与厂商有更直接的方通，也方便增加大家对产品的了解，显示顾客发表的对这款车型的看法；厂家推荐是推荐出大众喜欢的车型，点击车图片显示那款车的详情，客户可以在那款车详情操作。

尾部主要介绍汽车销售商家的详细信息，客户可以联系商家，如商家姓名，电话号码，地址，备案编号,效果如图5所示，图5-3：

第12页 （共29页）

（5）

图5-3 汽车详情界面图

5.3.1 汽车详情（showCon2）主要布局实现

5.3.1.1 搜索框的实现，如图6所示，图5-4：

第13页 （共29页）

（6）

图5-4 网站logo界面图

5.3.1.2 搜索框的实现，图5-5

（7）

图5-5 搜索界面图

搜索

5.3.1.3 导航栏的实现图5-6

（8）

图5-6 导航栏界面图

5.3.1.4 车型的实现图5-7

（9）

图5-7 车型实现界面图

5.3.1.5 数量的实现，图5-8

（10）

图5-8 数量实现界面图

数量

第15页 （共29页）

5.3.1.6 车型选择的实现，图5-9

（11）

图5-9 车型选择界面图

5.3.1.7 车型的实现，图5-10

（12）

图5-10 车型评论界面图

布局介绍，布局采用dl、dt、dd实现效果，图下面的边线通过css中的border实现，代码如下，

布局代码：

金瑶瑶

第18页 （共29页）

为了家家的网友能与品牌厂商进行更有效更直接的沟通，家家在近期上线了一个新产品"品牌公共主页"，相信有一些小伙伴们已经提前体验到了。还不清楚情况的小伙伴们，来先恶补一下吧！

2014年12月20日 09:12

满意

Css代码如下：

.slideTxtBox .bd 2{background:#fff;}

.slideTxtBox .bd ul img{margin:0 auto;display:block;margin-bottom:30px;}

.slideTxtBox .bd ul dl{height:auto;border-bottom:1px solid #ccc;padding:10px

20px;color:#000;}

5.3.2 汽车详情（showCon2）主要效果实现

5.3.2.1 汽车放大效果的实现,如图13，图5-11

第19页 （共29页）

（13）

图5-11 放大效果实现图

5.3.2.2 点击小车大车切换效果的实现,如图14

效果介绍：当点击下面图片的小图时，上面就会出现相应小图的大图，图5-12

$(".jqzoom").imagezoom();

（14）

图5-12 效果切换图

5.3.2.3 点击上下按钮数量增减效果的实现，图5-13

（15）

图5-13 增加数量图

5.3.2.4 选择车型板块

效果介绍：点击多选中的1.5L舒适型时，框中的文字由1.5L尊贵型变成1.5L舒适型，改变之后下面的报价改为此车型的价格，图5-14

var f = 1;

var c = ;

if(kind == "up"){

c++;

}else if(kind == "down"){

if(c > 1) c--;

}

= c;

第21页 （共29页）

（16）

图5-14 车型选择图

$(document).ready(function(){

$("#style").change(function(){

});

5.3.2.5 tab切换

效果介绍：鼠标移上顾客评论时，下面内容变成顾客评论的内容，鼠标移回产品详情时，内容变成产品详情介绍的内容，图5-15。

（17）

$("#price").text($(this).val()+"万");

});

图5-15 切换界面效果图

，引用js插件实现，调用插件来实现效果

当页面到达产品详情且页面仍向下滚动且滚轮高度到达800时，上图所实现的效果会固定到页面顶部，实现效果代码如下：

5.4 个人中心

此部分是用户的个人中心，个人中心是记录用户一系列操作和为用户提供 jQuery('.hd').removeClass('scroll');

jQuery('.bd').css("marginTop","0px");

的一系列操作，主要操作有账户管理，更改账户信息、更改地址簿、我的购买记录和收藏。

账户管理主要记录账户的信息，主要有联系信息和地址簿，联系信息主要记载用户名、手机号码、邮箱、邮编，地址簿主要记载默认送货地址，点击此页面的编辑链接到更改账户管理，点击左侧的导航时页面会跳转相应界面，图5-16。

第23页 （共29页）

（18）

图5-16 个人中心图

更改账户信息主要更改姓名、手机号码、电子邮箱地址，若需要更改密码点击复选框更改密码出现更改密码，再次点击更改密码更改密码会隐藏，点击确定后页面跳转回账户管理页面，图5-17。

（19）

图5-17 更改密码界面图

点击保存跳转回账户管理，点击管理地址出现更改地址簿，图5-18。

（20）

第24页 （共29页）

图5-18 更改地址簿界面图

用户购买记录是记录用户之前购买产品的详细情况，图5-19

（21）

图5-19 订单显示界面图

收藏是用户对感兴趣的产品可以收藏显示在此界面，点击删除后收藏的汽车会减少，点击加入购物车后购物车中的数量会增加，图5-20。

（22）

图5-20 收藏界面图

5.4.1 更改密码布局实现，图5-21

第25页 （共29页）

（23）

图5-21 密码更改界面图

账户信息

姓名*

电子邮箱地址

*

5.4.1 更改密码效果实现，图5-22

第26页 （共29页）

（24）

图5-22 密码更改界面二图

6 网站的测试

第27页 （共29页）

网站在编写时要测试网站的兼容性，IE、Firefox、Chrome不同的版本对javascript、jQuery、css的支持不同，测试是为了尽可能的减少页面的错误如错位等，对css的支持虽然兼容性问题会相对较少，几乎没有，但还是会有兼容性问题，如对css中opacity（透明度）的支持，IE跟Firefox就不同，I有两种用法分别是filter：alpha（opacity:100）,opacity：1。这些主流的浏览器对javascript、jQuery的支持差别更多，javascript包括ECMAScript、DOM、BOM，这些浏览器对DOM（ document object model）部分兼容，对BOM（browser object model）几乎不兼容，所以在做网页是对这些兼容性的处理要细致，耐心，减少网站故障，消除错误，将网页的质量提升到最高，将高质量的网站提交给用户，减少后期问题。

网页完成后，要将完成的网页在各大主浏览器上测试一次，保证兼容性问题已经解决，保证页面效果的实现和页面布局的美观，不错位，测试处理完后，网页文件交给后台程序员，程序员将开始后台的编写。

7 结束语

时光飞逝，转眼到了毕业季，在大学的这段时光里，老师的教导和同学的帮助促使我成长，成长的代表了知识的增长，心理素质的增长，并不仅仅意味着长大、长高。在老师和同学的帮助下我的毕业论文就要完成了，再次我由衷感谢我们的指导老师涂峰对我们的耐心指导和帮助，并给我们提出了许许多多宝贵的意见和建议，我的论文才能如此顺利完成。为了我们的毕业设计和论文的完成，老师抽出很多的时间和精力对我们进行指导，对于他对我们的帮助表示感谢。

毕业设计的这段时间里，有熬夜、有心焦、有烦躁，但是最终我们还是完成了我们的毕业设计，并且使我获益非浅，我在这里体会到指示的渊博，同时也感受到自己知识的欠缺，虽然我们即将毕业，但是毕业终止不了我学习的步伐，坚持活到老、学到老的口号，将学习的习惯保持下去。

第28页 （共29页）

在论文完成之际，我的心中充满感激，从大一到大四，从毕业设计课题开始到现在毕业论文的即将完成，有很多可敬的师长、朋友、同学给了很多的帮助，在这里请接受我充满诚挚的谢意！

参考文献

[1] 唐守国主编，创意+：Photoshop cs4网页设计、配色与特效案例精粹，清华大学出版社，2010年7月第一版

[2] 王征主编，JavaScript网页特效实例大全，清华大学出版社，2006年9月第一版

[3] 杨纪梅，Dreamweaver网页设计与制作完全手册,清华大学出版社, 2007年2月第一版

[4] 史晓燕、苏萍编著，网页设计基础（HTML，CSS和JavaScript），清华大学出版社，北京交通大学出版社，2006年10月第一版

[5] 张杰,王诚，网页与网站设计，中国石化出版社, 2006年9月第一版

[6] 张景峰等.HTML程序设计.高等教育出版社.2005年9月

[7] 彭雪冬，柯建林，吕洋波，网站建设实用开发精粹，北京人民邮电出版社，2008年9月第一版

[8] 项宇峰等.HTML网络编程从入门到精通.清华大学出版社.2006年

第29页 （共29页）


本文标签： 网页 点击 实现

版权声明：本文标题：汽车销售网站设计与实现前端页面制作毕业设计论文 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1702931138h436408.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。