# 基于Bootstrap实现的十七速递网站
# 一、目标及要求
随着二十一世纪新兴科技的飞速发展,如今的电子信息产业,正在经受着一个巨大的挑战,同时也面临着一个重大的机遇。就目前的科技发展水平而言,电子信息产业的发已经不能够满足社会化大生产的要求,因此,各个国家集中人力、财力加大对信息技术产业的投入,以适应目前需要。可喜的是在这几十年的发展中我们有了互联网、互联网加大了我们了解世界的眼界,缩紧了人与人之间的距离,这就更容易的使我们走上信息化的道路。
以往,人们物要素自去店速物购,后来答越来越发达,邮政,快递也迅速发展起来了,不出门就能买到己心仪的商品成了人们的需求。
正是因为人们的这些需求,越来越多的购物网站出现在网络上,人们可以随时了解日己话要的物品方面的新间,我正要做到足不出户,便可买到天下物。把购物与网络连接起来,必将是社会发展的必经之路。所以,做了此次的期末设计作品。
# 二、网站规划
## 2.1 需求分析
此网页能够满足用户对快递进行寄件、查询、服务,并可以了解此公司的简介、历史、企业的发展等,也可以咨询加盟及招聘等服务随时随地的打开网页就可以进行这些优质服务。无论是省内还是省外的快递都可以进行服务,网页的设计还进行了功能的分类。分首页、服务大厅、自助查询、产品与服务、加入十七、新闻公告、走进十七七大网页设计,包含的功能有十七常识、新手入门、投诉建议、下载中心、运单查询、网点查询、货物追踪、订单查询、快运产品、定制产品、增值服务、整车转运、仓储物流、加盟指南、在线加盟、人才服务、人才招聘、在线招聘、十七新闻、十七公告、行业动态、企业视频、企业微薄、十七简介、十七历程、十七文化、十七品牌、联系我们、企业邮箱登录、十七速递系统登录功能。网页的设计根据自己个人爱好来设计,比较简易,颜色不是浓艳,这样正是符合了让用户比较舒适的视觉感。
## 2.2 网站结构分析
站点目录:分为 CSS、fonts、images、js、文件夹和 about.html、contact.html、、index.html、job.html、join.html 、netinfo.html、netlist.html、network.html、news.html、product.html、search.html、search2.html、search3.html、search4.html、service.html、tousu.html
![](http://www.writebug.com/myres/static/uploads/2021/10/19/2ebf4af235be27ecc66951d41daec8b4.writebug)
## 2.3 网站风格分析
网站主要以简约风格为主,简洁的表现形式来满足对此网页的了解。
- **总体印象**:以展示本网页优点等,主题突出,内容精干,形式简洁
- **版式布局**:栏目集中,分栏目检索明确,导航标志清晰
- **色彩运用**:总体呈白色简洁风格
- **图片运用**:配合文字,以极简的图片效果吸引用户
- **语言**:中文
- **结构**:浏览路线方便快捷、清晰明确
## 2.4 功能模块图
![](http://www.writebug.com/myres/static/uploads/2021/10/19/0374da2fbbfccfad68032ebd79746de3.writebug)
# 三、页面详细设计
## 3.1 首页设计
整个主页布局主要是用了响应式设计,导航栏运用了下拉菜单技术,导航栏下面的图片使用了轮播图技术展现,导航栏下拉菜单中设计了通过加入超链接点击进入对应的页面。在页面最底部还加入了网页的相关信息。
![](http://www.writebug.com/myres/static/uploads/2021/10/19/1be85fda0d0812cdd6d7cae7313441f6.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/fec8a5af23bec9d0e0f3055ec97c0f30.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/24dd08515de7a9643972e14daf231a74.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/0b8044c028562fef9a4904dca7724db8.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/3f9cdf2c9e47ed8dc77de3736bb94431.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/f79722c963c4db9b5fe13dd9e0de7612.writebug)
## 3.2 服务大厅设计
本页面布局和主页面设计相似,页面的头部和底部和主页面一样,中间部分设计了四个主要功能,物流常识、新手入门、投诉建议、下载中心。个别功能下面设置了超链接,点击后便会调转到其它页面内容。整个页面看起来非常简洁。
![](http://www.writebug.com/myres/static/uploads/2021/10/19/93b92388c1c7203ecd5dc6a43f490f8b.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/1c61b0998ace8e4c10002eac97f18c65.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/557c497feca2b04239b9a26a087697fd.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/47d7e497df75b7d9fa884505474660ac.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/7adc2a70f208f40545813480ed415742.writebug)
## 3.3 自助查询页面设计
![](http://www.writebug.com/myres/static/uploads/2021/10/19/2b753a58a3c4be1105d7e4be1e443f73.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/74def50fab97abfca6478c977f36a1dc.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/3de0e40f3440a31f1666f794b86c0bb9.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/a8ba5c10c72bc8bd7ef14cc51b0ce6f0.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/74de935a4fb9b2632692393a0c2efd4c.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/0dc2416d0583cd145538ca9ea25906dd.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/ae11cc7bd2d0a37d350b230abc694dbf.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/646cbd9979c9db983652716a831c94b7.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/8f0457f3bd26a8923b2634d166676ab6.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/82b612894649b037198e4e86b725613a.writebug)
## 3.4 产品与服务页面设计
![](http://www.writebug.com/myres/static/uploads/2021/10/19/4ca69202e15371c1b958813eeaf56072.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/268f4da1277c7043b157f254d18eca3f.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/dffcb00e17001b7ca38a68d91aaed51d.writebug)
## 3.5 加入十七页面设计
![](http://www.writebug.com/myres/static/uploads/2021/10/19/29436f6fe5a25d9162dca0b6f7a27e8c.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/15c7d2317cc872a1e479d0f89ff18424.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/a447e588c439a0774485af77fa305a7e.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/80cc4d0bbc18199c9de154cffe77545a.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/c34099c550e2fafd798b9c01dbb90a53.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/47b5d8bb5db5030a0864399d386be0a7.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/cd7c548e1d06d132324753d5302877b9.writebug)
## 3.6 新闻公告页面设计
![](http://www.writebug.com/myres/static/uploads/2021/10/19/c3450f027d1b7e12da5a904a78504fb3.writebug)
**效果图**:
![](http://www.writebug.com/myres/static/uploads/2021/10/19/5ff76eee5076406c29551f7ee6bd8f83.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/8bb6d43e3bf410c0471ff3209548219e.writebug)
![](http://www.writebug.com/myres/static/uploads/2021/10/19/4e08aaa221d4bd3ac11d3f2f08296a8b.writebug)
## 3.7 走进十七页面设计
![](http://www.writebug.com/myres/static/uploads/2021/10/19/2773e2