|
|
《HTML5网页设计》期末大作业题目：山水专业：班级：学号：姓名：时间：目
录一：需求分析：1二：详细设计2css文件——all.css：21.介绍桂林4网页运行结果：102.介绍桂林景区10网页运行截图：
133.介绍桂林的历史13网页运行结果：164.介绍桂林美食17网页运行截图：195.介绍桂林代表人物19网页运行结果：226.
介绍桂林资源22网页运行截图：25三：课程总结与感想：25一：需求分析：功能需求：此网页设计初衷为借助互联网宣传桂林地区的旅游业，
能够打破传统旅游业宣传的局限性，网站涵盖全面介绍，包括景点、人文历史、自然风光、基础设施建设，是一个完整的旅游网站。借助互联网宣传
，降低单个旅游企业的营销推广费用，为桂林旅游业提供新的机遇以及提高桂林的知名度，为桂林旅游业做出创新性发展。软件需求：HBuild
erHBuilder是Dcloud推出的一款支持Html5和Web开发IDE.HBuilder的编写用到了Java、c、Web
和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBu
ilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、CSS的开发效率。是学习网页设计的入门软件
。使用说明：1.进入首页查看桂林简介，并有五个界面个可点击链接，可感觉自己像浏览相应的部分进行点击方可查看。2.桂林介绍分六板块（
景点、美食、文化、人物、历史、建设、学校、自然）景点部分为桂林全貌视频＋简介美食为介绍桂林美食的图片文化部分为介绍桂林当地特色民族
传承并配有相应图片人物部分为当地名人历史部分为当地自古至今的历史全解自然部分为介绍当地矿物资源、自然资源、动物资源、植物资源建设部
分为当地特色建筑并配有图片学校部分为当地著名大学3.桂林经济部分全面阐述了当地经济发展现状4.行政区域为桂林市行政区划图5.图片部
分为桂林精美选图二：详细设计此次作业，我做了我喜欢的城市桂林，希望通过我的介绍，能够有更多的人喜欢这座城市。这个网页总共有六个子页
面，包含了首页桂林简介，以及一些必须打卡的景点，当地的特色的美食，历史文化等。css文件——all.css：ul,li{list-
style:none;}a{text-decoration:none;color;black;}#focus{width:100%
;height:400px;}#focus.box{width:100%px;height:400px;margin:0pxa
uto;overflow:hidden;position:relative;}#focus.box-1ul{padding:0
px;margin:0px;}#focus.box-1ulli{width:100%px;height:400px;posi
tion:relative;overflow:hidden;}#focus.box-1ulliimg{width:100%
px;height:400px;display:block;}#focus.box-1ullih2{font-weight
:normal;color:ghostwhite;background:rgba(125,125,120,.4);font-siz
e:13px;line-height:45px;text-outline:ellipsis;white-space:nowrap
;width:150px;height:30px;padding-right:500px;position:absolute;le
ft:0;bottom:0;overflow:hidden;}#focus.box-2{position:absolute;r
ight:10px;bottom:10px;}#focus.box-2ulli{background:rgba(0,0,0
,.5);text-indent:100px;width:10px;height:10px;float:left;overflow
:hidden;margin:03px;border-radius:50%;cursor:pointer;}#focus.bo
x-2ul.on{background:rgba(255,255,255,0.6);}1.介绍桂林该页面是介绍桂林。页面内
容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。html文件——index.h
tml：""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">ss"rel="stylesheet"media="all"type="text/css"/>uiv="Content-Type"content="text/html;charset=utf-8"/>桂林<br>window.onload
=function(){function$(param){if(arguments[1]==true){returnd
ocument.querySelectorAll(param);}else{returndocument.querySelect
or(param);}}var$box=$(".box");var$box1=$(".box-1ulli",tru
e);var$box2=$(".box-2ul");var$box3=$(".box-3");var$length
=$box1.length;varstr="";for(vari=0;i<$length;i++){if(i==0)
{str+=""+(i+1)+"";}else{str+=""+(i+1)+
"";}}$box2.innerHTML=str;varcurrent=0;vartimer;timer=
setInterval(go,3000);functiongo(){for(varj=0;j<$length;j++){$
box1[j].style.display="none";$box2.children[j].className="";}
if($length==current){current=0;}$box1[current].style.display
="block";$box2.children[current].className="on";current++;}for
(vark=0;k<$length;k++){$box1[k].onmouseover=function(){clearIn
terval(timer);}$box1[k].onmouseout=function(){timer=setInterv
al(go,3000);}}for(varp=0;p<$box3.children.length;p++){$box3.chil
dren[p].onmouseover=function(){clearInterval(timer);};$box3.chi
ldren[p].onmouseout=function(){timer=setInterval(go,3000);}}f
or(varu=0;u<$length;u++){$box2.children[u].index=u;$box2.chi
ldren[u].onmouseover=function(){clearInterval(timer);for(varj=
0;j<$length;j++){$box1[j].style.display="none";$box2.children[j
].className="";}this.className="on";$box1[this.index].style.d
isplay="block";current=this.index+1;}$box2.children[u].onmou
seout=function(){timer=setInterval(go,3000);}}$box3.children[
0].onclick=function(){back();}$box3.children[1].onclick=funct
ion(){go();}functionback(){for(varj=0;j<$length;j++){$box1[j].
style.display="none";$box2.children[j].className="";}if(curre
nt==0){current=$length;}$box1[current-1].style.display="blo
ck";$box2.children[current-1].className="on";current--;}}pt>cus.css"/>s="box-1">- <
/li>
li>- mgsrc="images/10.jpg"width="100%"height="400"/>
>>html">网站首页桂林介绍
桂林经济行政区域<
/a>图片风光clear">s="left">r/>桂林，简称桂，是国务院批复确定的国际旅游胜地、国家可持续发展议程创新
示范区；联合国世界旅游组织亚太旅游协会旅游趋势与展望国际论坛永久举办地、中央军委桂林联勤保障中心驻所。桂林北接湖南、贵州，西南连柳
州，东邻贺州，属山地丘陵地区及典型喀斯特岩溶地貌，辖17个区（市）县和高新区、总面积2.78万平方公里，2018年户籍人口538.
15万人[1]，国家级重点科研中心7个，高校15所。桂林是中国融贯西南、华南、中南最便捷国际旅游综合交通枢纽，是“一带一路”和黔粤
湘桂交界重要联接点，其高铁通车里程占广西1/4，下属9个高铁站。2014年，以桂林山水为代表的中国南方喀斯特地貌被联合国教科文组织
列入《世界自然遗产名录》。桂林是世界旅游组织推荐4大中国最佳旅游城市之一、首批对外开放生态山水名城；2017年入境游客居全国第四，
仅次于京沪镐。2021年5月，在2021城市商业魅力排行榜中，桂林获评为三线城市。class="clear">- l">景点
- 美食
- ml">文化
- 人物
- tml">历史
- 自然
- html">建设
- 学校
ss="clear">ieshu">?2021-12-14 闫司航 ="jieshu">桂林山水甲天下违法及不良信息举报中心dy>网页运行结果：2.介绍桂林景区作品页面展示了桂林一些特色景区。页面内容有html的锚点效果还有网页的内部布局，
还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。HTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml
1-transitional.dtd">ead>text/css"/>harset=utf-8"/>桂林>/>.html">网站首页桂林介绍>桂林经济行政区域
图片风光"clear">ist">漓江桂林市漓江景区位于广西壮族自治区东部，是世界上规模最大、风景最美的岩溶山水游览区之一。桂林市漓
江景区是广西东北部喀斯特地貌发育最典型的地区，主要景点有象鼻山、冠岩、黄布倒影和仙人推磨等自然景观，人称“百里漓江、百里画廊”。2
007年，桂林市漓江景区被评为国家AAAAA级旅游区。- dth="100%"height="400"/>
象鼻山象鼻山原名漓山，位于广西区桂林市内桃花江与漓江
汇流处，山因酷似一只站在江边伸鼻豪饮漓江甘泉的巨象而得名，被人们称为桂林山水的象征。象鼻山以神奇著称。其神奇，首先是形神毕似，其次
是在鼻腿之间造就一轮临水明月，构成“象山水月”奇景。。 - "width="100%"height="400"/>
阳朔西街阳朔西街是集古今中外文化于一体的旅
游景点和商业点，位于广西阳朔县城中心，又称洋人街。阳朔西街是阳朔县城内最古老的街道，略呈东西走向，东到滨江路，西到蟠桃路，中间与
县前街、城中路交汇，全长近800米，大理石路面，呈弯曲的S形，整条街道建筑凸显桂北民居特色。
div>ass="jieshu">?2021-12-14 闫司航 class="jieshu">桂林山水甲天下违法及不良信息举报中心v> | | |
