web前端网页设计大作业

《HTML5网页设计》期末大作业题目：“驴友部落”旅游网页专业：班级：学号：
姓名：时间：目录一、需求分析21.功能需求22.软件需求2二、详细设计21.1页面展
示31.2代码展示52.1页面展示172.2代码展示193.1页面展示283.2代码展示304.1页面展示444.2代码展示455
.1页面展示495.2代码展示51三、课程总结和感想52需求分析功能需求旅游业建设属于自己的电子商务网站已是目前的趋势。旅游业可以
通过互联网解决传统旅游业的游客无法解决的需求。同时，由于旅游业作为一个整体的生态链，涉及到旅游服务出行、住宿、景点等，使用互联网可
以串成一个整体，从而可以大大提高业务的来源和服务水准。对于大多数中小型旅游公司而言，这可以迅速降低成本、扩展业务和开发协作，同时为
整个行业提供公平的竞争环境。我们网页整体风格就是绿色，清新，让人一进入就有想去的目的地的想法...软件需求HBuilderHBui
lder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和R
uby。HBuilder本身主体是由Java编写。详细设计1.1页面展示“驴友部落”我设置了【首页】，第一个网页一打开就是主要呈现
浅色，呈现我网站的个性化，“驴友部落”希望大家看到是向往旅游的一个制作，首页布局的是我们的国内、境外、热门的旅游景点，并且标注了参
考价格供大家参考…..第一看到的是我们可以根据自己想去的地方的输入框，右上角也有服务电话是我的。1.2代码展示html>>e=1.0">tle>驴友部落inkrel="stylesheet"href="./css/index.css">ass="nav">ript:;"class="nav-itemlogo">驴友部落lass="nav-item">首页景点介绍热门景点
登录/注册

服
务电话

17630253762iv>30928fdaa45b.png"=""alt="">text"placeholder="请输入你想要去的地方...">搜索v>ss="title-left">国内游ass="title-rg">更多>>tem">s="list-item"title="大理洱海">76f26c4b.jpg"alt="">大理洱海"gray">参照价位：2699JavaScript:;"class="list-item"title="洛阳老君山">cdc5df57f017a653c7a19e71286.jpg"alt="">洛阳老君山
参照价位：1679起<
/span>>nclass="area">西安钟楼参考价位：rice">2660起-item"title="成都都江堰">37.jpg"alt="">成都都江堰">参考价位：3452起Script:;"class="list-item"title="西双版纳丽江古城">a43de14e4716f1085e0fa778e9.jpg"alt="">西双版纳丽江
古城参考价位：3587
起宫">panclass="area">北京故宫参考价位："price">794起class="ban">>境外游
更多>>="rg-listclearfix">le="纯玩埃及8天神秘之旅">"area">纯玩埃及8天神秘之旅参考价位：ice">6499起item"title="阿联酋-迪拜7日游">lass="area">阿联酋-迪拜7日游参考价位：class
="price">3699起ist-item"title="挪威+丹麦+瑞典11日游"><
spanclass="area">挪威+丹麦+瑞典11日游参考价位：anclass="price">8300起class="list-item"title="德法瑞意比16日游">"">德法瑞意比16日游参考价位：<
spanclass="price">16999起:;"class="list-item"title="畅游东西欧12晚15天">g"alt="">畅游东西欧12晚15天ay">参考价位：9999起vaScript:;"class="list-item"title="舒享德法意瑞、新天鹅堡巴黎12天">="./img/s.jpg"alt="">舒享德法意瑞、新天鹅堡巴黎12天>参考价位：11999起>ivclass="titleclearfix">ine">热门旅游地更多>>v>ass="img">K1HF6hhy/it/u=3454506539,2952046434&fm=26&gp=0.jpg"alt="">>ivclass="txt">新疆旅游最佳时间为5-10月，南疆以人文景观为主，北疆以优美的自然风光为主，雪山、草原、湖泊、河流
、羊群、蒙古包、原始森林等，使人乐而忘返。3月到5月适合塔克拉玛干沙漠徒步、露营，一定要跟专业领队进去..v>g"alt="">
梅里雪山，很美的一个地方，推荐大家去游玩.梅里雪山，是位于西藏察
隅县东部与云南迪庆藏族自治州德钦县境云岭乡西部的一座南北走向的庞大的雪山群，全长有150公里。它在藏区称卡瓦格博雪山，“梅里”一词
为德钦藏语mainri汉译，意思是药山，因盛产各种名贵药材而得名[1-2]。同时它也是雍仲苯教圣地，和西藏的冈仁波齐、青海的阿
尼玛卿山、青海的尕朵觉沃并称为藏传佛教四大神山class="img">"intraUser">">在三亚，如果你有伴儿，三亚将满足你对一场饱含山盟海誓的恋爱的全部幻想；如果你是一个人，三亚也不会让你得空去嗟叹，你可以在亚洲
潜水圣地蜈支洲岛海湾零距离观赏珊瑚礁，可以去..."foot">

驴友部落欢迎你~

张佳音

v>.banner{width:100%;height
:470px;margin-bottom:10px;margin-top:60px;position:relativ
e;}.bannerimg{width:100%;height:420px;}.search{position:ab
solute;bottom:100px;left:50%;transform:translate(-50%);}.se
archinput{width:300px;height:43px;outline:none;border:5p
xsolidgainsboro;padding-left:12px;}.search.btn{display:inl
ine-block;width:70px;height:40px;line-height:40px;text-ali
gn:center;background:pink;color:white;}.title{margin:5px0;}
.title-left{float:left;padding-left:12px;border-left:4pxsol
id#33bc60;font-size:30px;font-weight:600;margin-top:-18px;}
.title-rg{float:right;}.list-item{width:350px;height:300px;
float:left;margin-right:13px;margin-bottom:40px;box-shadow:
006px#ddd;background:#fff;}.list-itemimg{width:100%;hei
ght:190px;}.area{display:-webkit-box;-webkit-box-orient:vert
ical;-webkit-line-clamp:2;overflow:hidden;margin-bottom:30p
x;padding:030px;font-size:18px;margin-top:10px;}.price{fo
nt-size:30px;color:#f12d2d;}.gray{color:#999;padding:012p
x;}.strategy{margin-bottom:40px;}.str-item{width:350px;heigh
t:320px;float:left;margin-right:20px;overflow:hidden;box-
shadow:01px6px#ddd;background:#fff;}.str-item:nth-child(3n)
{margin-right:0;}.str-itemimg{width:100%;height:100%;}.img
{width:350px;height:200px;}.intraUser{display:flex;align-it
ems:center;padding:12px;}.user-imgimg{width:40px;height:4
0px;border-radius:50%;margin-right:12px;}.tm{margin-left:40
px;color:#999;}.txt{padding:028px;display:-webkit-box;-we
bkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidde
n;}2.1页面展示“驴友部落”第二个页面我设置的【景点介绍】，编辑了我们专属的热门地的详细推荐，里面是汇总的专属景点的详细介绍，
下面也给大家推荐了热门的旅游地，找了专属标语“最美的旅程从这里开始”的图片作为头顶宣传图。2.2代码展示<
!DOCTYPEhtml>name="viewport"content="width=device-width,initial-scale=1.0">
="stylesheet"href="./css/hot.css">>lass="nav-itemlogo">驴友部落首页景点介绍a>热门景点vclass="nav-rg">登录/注册a>

服务电话

17630253762
8a.png"alt="">热
门推荐精选网友热门推荐，如果你想来一场说走就走的旅行，不妨来看下大家的推
荐，规划你的行程，会使你的旅行更加愉快！lass="hot-item-lf">lass="hot-item-rg">

云南——梅里雪山

梅里雪山，是位于西藏察隅县东部与云南迪庆藏族自治
州德钦县境云岭乡西部的一座南北走向的庞大的雪山群，全长有150公里。它在藏区称卡瓦格博雪山，“梅里”一词为德钦藏语mainri汉译
，意思是药山，因盛产各种名贵药材而得名[1-2]。同时它也是雍仲苯教圣地，和西藏的冈仁波齐、青海的阿尼玛卿山、青海的尕朵觉沃并
称为藏传佛教四大神山

最高峰卡瓦格博峰海拔高度为6740米，是云南省最高的山峰，位于德钦县西南方10千米处，距中甸
县城184千米。长约30公里，其中呈金字塔状的最高峰为卡瓦格博峰，海拔6740米，为突出于周围群山山顶面近千米的极高山，是云南省的
最高峰。梅里雪山断裂活动强烈地势高耸，有13座海拔6000米以上高峰在卡瓦格博峰周边环绕，是青藏高原东南缘最高山。

div>lf">

海南——三亚之旅

三亚是具有热带海滨风景特色的国际旅游城市[4]，又被称为“东方夏威夷”。
[5]2016年6月14日，中国科学院对外发布《中国宜居城市研究报告》，三亚宜居指数在全国40个城市中位居第三。[6]201
6年9月，三亚入选“中国地级市民生发展100强。[7]2017年2月，三亚入选第三批国家低碳城市试点之一。三亚也是同时入选中国
特色魅力城市200强及世界特色魅力城市200强

2020年11月底至12月初，第六届亚洲沙滩运动会将在海南省三亚市举
行。2018年12月，入选2018中国最佳旅游目的地城市第15名。[9-10]2018年12月13日，入选中国特色农产品优势
区名单。[11]三亚是“无废城市”建设试点城市。[12]2019年10月23日，被确定为“第三批城市黑臭水体治理示范城
市”。

alt="">">专属推荐为您专属推荐旅游地，快看看有没有你想要去的地方吧！>="exc-item-title">青海游

塔尔寺与西藏
的甘丹、哲蚌、色拉、扎什伦布寺和甘南的拉卜楞寺并称为我国藏传佛教格鲁派六大寺，是格鲁派创始人宗咯巴诞生的地方。整座寺依山叠砌、蜿蜒
起伏、错落有致、气势磅礴，寺内古树参天，佛塔林立，景色壮丽非凡。塔尔寺的壁画、酥油花、雕塑也是栩栩如生，远近闻名。返西宁，入住酒店
。后可自行前往【水井巷】，位于西宁市城中区。东起商业中心西门口，西止北大街。建立三十余年，是古城西宁里是最热闹的商业街。水井巷的南
北干货、风俗小吃、民族用品、琳琅满目，商品进销量极大，是号称西宁市"日进斗金"的寸金之地。

乘车经湟源峡谷、文成
公主进藏驻足摔破日月宝镜的【日月山】和文成公主眼泪幻化而成的【倒淌河】，沿着青藏公路，循着美丽神奇的传说，慢慢地靠近中国最美湖泊之
一的【青海湖】。穿过日月山口，放眼望去，竟不知何处是天际。湛蓝的天空、漂浮的白云几乎伸手可触，漫山遍野的经幡迎风招展，平坦笔直的“
天路”无限延伸，在远处与天相接……游览【青海湖景区】(含大门票)。青海湖面积有4300平方公里，是我国第一大内陆湖泊，也是我国最大
的咸水湖。

柴达木盆地是盐的世界，30多个盐湖是柴达木盆地的明珠。盐湖中虽没有亭榭荷花和绿柳青松，然而盐湖之美，
却是千恣百态，奇特多彩，别具一格。可以乘坐采盐小火车直达采盐现场，观赏各种盐类结晶，如水晶盐、珍珠盐、珊瑚盐、雪花盐、钟乳盐、蘑菇
盐等。

g"alt="">pg"alt="">ass="exclusive-item">云南游class="exc-item-dec">

乘车前往有“天下第一奇观”美誉的世界地质公园，到达国家5A级景区【石林风景名胜
区】(游览时间2小时,电瓶车25元/人/自理)，石林凝聚天地灵气，日月精华，续写地质传奇，大地造诣，被列为地球“八大自然景观”每一
块石头，仿佛是一首凝固下来的诗，跌宕起伏的石岗间传颂着阿诗玛至死不渝的爱情故事。随后前往以游客体验为中心的茶马古道文化体验馆。<
/p>

乘坐【丽江玉龙雪山索道】登临雪峰，饱览姿态万千的雪域风光，抒发一览众山小的凌云壮志。游览【蓝月谷】(电瓶车60元自
理)，玉龙雪山冰雪融化成河水从雪山东麓的一条月牙形的山谷而过，在晴天时，水的颜色是蓝色的，远看就像一轮蓝色的月亮镶嵌在玉龙雪山脚下
。之后观看气势磅礴的原生态歌舞表演【丽水金沙】。

更多="foot">

驴友部落欢迎你~

张佳音

iv>.nav{background:slategray;}.n
ava{color:black;}.nav.active{color:#fff;}.banner{margin-top
:60px;width:100%;height:530px;}img{width:100%;height:100
%;}.title{font-size:42px;text-align:center;margin:40px020
px;}.subtitle{text-align:center;color:slategray;margin-bottom
:40px;}.hot-item-lf,.hot-item-rg{width:550px;height:380px;f
loat:left;box-sizing:border-box;}.hot-itemh3,.hot-itemp{mar
gin:030px;}.hot-itemh3{padding:20px012px;}.hot-itemp{tex
t-indent:30px;line-height:26px;color:#666;}.exclusive-item{m
argin-bottom:20px;}.exc-item-title{font-size:20px;text-align:
center;margin-bottom:16px;}.exc-item-dec{text-align:center;
text-indent:28px;color:#666;}.exc-item-imgs{padding-top:20px
;}.exc-item-imgsimg{width:262px;height:180px;margin-right:1
2px;}.exc-item-imgsimg:nth-child(4){margin-right:0;}.more{wid
th:120px;height:40px;line-height:40px;background:#33bc60;
color:#fff;text-align:center;margin:60pxauto;}3.1页面展示“驴友部落”
第三个页面我设置的是【热门景点】，打开是一些专属我们的网友的一些旅游攻略，还有一些游客的游记，提供给大家想去玩却又不知道好不好玩的
一些人可以参考，旅客的游记更加能直观的让大家参观。页面最下方也附上了一些热门景点供大家选择。3.2代码展示tml>
=1.0">le>驴友部落nkrel="stylesheet"href="./css/strategy.css">class="nav">script:;"class="nav-itemlogo">驴友部落class="nav-item">首页景点介绍热门景点
登录/注册

服务电话

17630253762div>0637fb8097a30.png"alt="">itle">热门攻略item">XSh_Q1YnxGkpoWK1HF6hhy/it/u=3454506539,2952046434&fm=26&gp=0.jpg"
alt="">mgsrc="./img/qr.jpg"alt="">许俊宰iv>2019.10.917:22:00xt">新疆旅游最佳时间为5-10月，南疆以人文景观为主，北疆以优美的自然风光为主，雪山、草原、湖泊、河流、羊群、蒙古包、原始森
林等，使人乐而忘返。3月到5月适合塔克拉玛干沙漠徒步、露营，一定要跟专业领队进去..ss="str-item">
/img/qr.jpg"alt="">阿叹lass="tm">2019.10.917:22:00梅里雪山，
很美的一个地方，推荐大家去游玩.梅里雪山，是位于西藏察隅县东部与云南迪庆藏族自治州德钦县境云岭乡西部的一座南北走向的庞大的雪山群
，全长有150公里。它在藏区称卡瓦格博雪山，“梅里”一词为德钦藏语mainri汉译，意思是药山，因盛产各种名贵药材而得名[1-2
]。同时它也是雍仲苯教圣地，和西藏的冈仁波齐、青海的阿尼玛卿山、青海的尕朵觉沃并称为藏传佛教四大神山
"alt=""><
imgsrc="./img/qr.jpg"alt="">阿叹iv>2019.10.917:22:00xt">在三亚，如果你有伴儿，三亚将满足你对一场饱含山盟海誓的恋爱的全部幻想；如果你是一个人，三亚也不会让你得空去嗟叹，你可以在
亚洲潜水圣地蜈支洲岛海湾零距离观赏珊瑚礁，可以去...s="ban">游记>g"alt="">土耳其冬日之旅，给你不一样的感觉iv>vclass="travel-fixed">江南水乡，诗一样的地方vel-item">xed">"风帆之都"奥克兰vclass="title">热门旅游城市ss="city-item">北京上海s="city-item">新疆丽江="city-item">西藏哈尔滨="city-item">大连呼伦贝尔ivclass="city-item">漠河包头vclass="city-item">大兴安岭长春ivclass="city-item">长白山风景区沈阳
阿尔山雪
乡大雪谷成都>九寨沟色达县active">峨眉山若尔盖草原"city-item">稻城亚丁阿坝="city-item">都江堰黄山="city-item">庐山南昌"city-itemactive">西双版纳腾冲火山热
海香格里拉市>昆明大理
秦皇岛v>驴友部落欢迎你~

张佳音

tegy.html>.banner{width:100%;height:310px;margin-top:60px;
}img{width:100%;height:100%;}.title{font-size:20px;font-we
ight:700;padding:30px020px;text-align:center;border-botto
m:1pxsolid#ddd;margin-bottom:30px;}.str-list{margin-bottom:
40px;}.str-item{width:350px;height:320px;float:left;margi
n-right:20px;overflow:hidden;box-shadow:01px6px#ddd;back
ground:#fff;}.str-item:nth-child(3n){margin-right:0;}.str-item
img{width:100%;height:100%;}.img{width:350px;height:190px
;}.intraUser{display:flex;align-items:center;padding:8px;}.
user-imgimg{width:40px;height:40px;border-radius:50%;marg
in-right:12px;}.tm{margin-left:40px;color:#999;}.txt{paddin
g:08px;display:-webkit-box;-webkit-box-orient:vertical;-we
bkit-line-clamp:3;overflow:hidden;}.travel{margin-bottom:30p
x;}.travel-item{width:270px;height:320px;float:left;positi
on:relative;margin-left:10px;font-size:20px;}.travel-item:ho
ver.travel-fixed{background:rgba(0,0,0,0.5);text-align:cen
ter;top:0;padding-top:150px;}.travel-item-lg{width:540px;m
argin-left:0px;font-size:28px;}.travel-fixed{position:absolu
te;bottom:0;left:0;right:0;color:#fff;padding-bottom:16
px;}.city{margin-bottom:40px;}.city-item{float:left;margin:
16px;}.active{color:rgb(252,162,45);4.1页面展示“驴友部落”第四个页面我设置了登录入
口，登录后就能享受我们网页的专属服务。4.2代码展示="en">="width=device-width,initial-scale=1.0">Compatible"content="ie=edge">lesheet"href="./css/base.css">s/login.css">n="./index.html">登录e">
der="请输入密码">"登录">.login{position:
fixed;left:0;right:0;bottom:0;top:0;background:url(../
img/三亚.jpg);background-repeat:no-repeat;background-size:cover
;filter:blur(20px);z-index:-1;}form{width:400px;height:30
0px;position:absolute;top:50%;left:50%;z-index:1;margin-to
p:-150px;margin-left:-200px;background:#fff;border-radius:10px;}.title{height:60px;line-height:60px;background:#189F92;color:#fff;padding-left:20px;font-size:18px;margin-bottom:20px;border-top-right-radius:10px;border-top-left-radius:10px;}.username,.password,.btn{width:360px;margin:auto;margin-bottom:20px;}input{width:360px;height:46px;padding-left:12px;outline:none;border-radius:4px;border:1pxsolid#ddd;}.btninput{background:#189F92;color:#fff;border:0;}5.1页面展示“驴友部落”第五个网页我设置了登录后的专属网页，我们的高热门旅行地，详细直观的介绍了我们的热门地点。5.2代码展示.banner{width:100%;height:330px;background:url(../img/m.jpeg);background-repeat:no-repeat;background-size:100%100%;}.detail{margin-top:-30px;background:#fff;padding:020px40px;}h2{height:60px;line-height:60px;}p{color:#666;line-height:24px;}pimg{width:900px;margin:20px80px;}.to-index{position:fixed;right:0;bottom:40px;width:40px;height:40px;border:1pxsolid#999;border-radius:10px;text-align:center;background:#f8f8f8;}三、课程总结和感想学习了《web前端网页设计》这门课我深刻的学习到了之前我从未接触过的代码，制作网页这一类的课程。从这门课程中我学习到了很多很多有用的程序知识，同时也让我在电脑上的使用方面也有了很大的进步，这门课程我从未觉得简单过，但每节课跟着老师一起敲代码，一起记新的词的意思，虽然单词好多也很难记，但起码每节课都在认真的跟着老师的步伐听课、做作业、敲代码，我也尽我所能用心尽力跟着老师的每一步走，这一学期最最充实最不偷懒的就是这门课程了。每每做出一个网页心里都会有满满的成就感，技不压身，我能多学一点就是一点，也很感谢老师的细心栽培和照顾，这门课程使我有了很大的收获，学习到了很多以前根本不懂得知识，很开心很充实很满足。《web前端网页设计》大作业欧亚学院《HTML+CSS》大作业姓名51252