《web前端网页设计》课程设计-山水旅游类大作业

1、欧亚学院HTML+CSS大作业姓名HTML5网页设计期末大作业 题 目： 山水 专 业： 班 级： 学 号： 姓 名： 时 间： 目录TOC o 1-3 h u HYPERLINK l _Toc24982 一：需求分析： PAGEREF _Toc24982 h 1 HYPERLINK l _Toc8854 二：详细设计 PAGEREF _Toc8854 h 2 HYPERLINK l _Toc9232 css文件all.css： PAGEREF _Toc9232 h 2 HYPERLINK l _Toc28962 1.介绍桂林 PAGEREF _Toc28962 h 4 HYPERLINK l

2、 _Toc30876 网页运行结果： PAGEREF _Toc30876 h 10 HYPERLINK l _Toc11398 2.介绍桂林景区 PAGEREF _Toc11398 h 10 HYPERLINK l _Toc11891 网页运行截图： PAGEREF _Toc11891 h 13 HYPERLINK l _Toc6558 3.介绍桂林的历史 PAGEREF _Toc6558 h 13 HYPERLINK l _Toc26484 网页运行结果： PAGEREF _Toc26484 h 16 HYPERLINK l _Toc26973 4. 介绍桂林美食 PAGEREF _Toc2

3、6973 h 17 HYPERLINK l _Toc5400 网页运行截图： PAGEREF _Toc5400 h 19 HYPERLINK l _Toc25209 5.介绍桂林代表人物 PAGEREF _Toc25209 h 19 HYPERLINK l _Toc6605 网页运行结果： PAGEREF _Toc6605 h 22 HYPERLINK l _Toc8664 6.介绍桂林资源 PAGEREF _Toc8664 h 22 HYPERLINK l _Toc6739 网页运行截图： PAGEREF _Toc6739 h 25 HYPERLINK l _Toc28415 三：课程总结与

4、感想： PAGEREF _Toc28415 h 25一：需求分析：功能需求：此网页设计初衷为借助互联网宣传桂林地区的旅游业，能够打破传统旅游业宣传的局限性，网站涵盖全面介绍，包括景点、人文历史、自然风光、基础设施建设，是一个完整的旅游网站。借助互联网宣传，降低单个旅游企业的营销推广费用，为桂林旅游业提供新的机遇以及提高桂林的知名度，为桂林旅游业做出创新性发展。软件需求：HBuilder HBuilder是Dcloud推出的一款支持Html5和Web开发IDE.HBuilder的编写用到了Java、c、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然

5、地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、CSS的开发效率。是学习网页设计的入门软件。使用说明：1.进入首页查看桂林简介，并有五个界面个可点击链接，可感觉自己像浏览相应的部分进行点击方可查看。2.桂林介绍分六板块（景点、美食、文化、人物、历史、建设、学校、自然）景点部分为桂林全貌视频简介美食为介绍桂林美食的图片文化部分为介绍桂林当地特色民族传承并配有相应图片人物部分为当地名人历史部分为当地自古至今的历史全解自然部分为介绍当地矿物资源、自然资源、动物资源、植物资源建设部分为当地特色建筑并配有图片学校部分为当地

6、著名大学3.桂林经济部分全面阐述了当地经济发展现状4.行政区域为桂林市行政区划图5.图片部分为桂林精美选图二：详细设计此次作业，我做了我喜欢的城市桂林，希望通过我的介绍，能够有更多的人喜欢这座城市。这个网页总共有六个子页面，包含了首页桂林简介，以及一些必须打卡的景点，当地的特色的美食，历史文化等。css文件all.css：ul,lilist-style:none;atext-decoration:none;color;black;#focuswidth:100%;height:400px;#focus .boxwidth:100%px;height:400px;margin:0px auto;

7、overflow:hidden;position:relative;#focus .box-1 ulpadding:0px;margin:0px;#focus .box-1 ul liwidth:100%px;height:400px;position:relative;overflow:hidden;#focus .box-1 ul li imgwidth:100%px;height:400px;display:block;#focus .box-1 ul li h2font-weight:normal;color:ghostwhite;background:rgba(125,125,120

8、,.4);font-size:13px;line-height:45px;text-outline:ellipsis;white-space: nowrap;width:150px;height:30px;padding-right:500px;position:absolute;left:0;bottom:0;overflow:hidden;#focus .box-2position:absolute; right:10px;bottom:10px;#focus .box-2 ul libackground: rgba(0,0,0,.5);text-indent:100px;width:10

9、px;height:10px;float:left;overflow:hidden;margin:0 3px;border-radius:50%;cursor:pointer;#focus .box-2 ul .onbackground: rgba(255,255,255,0.6);1.介绍桂林 该页面是介绍桂林。页面内容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。html文件index.html：桂林window.onload = function()function $(param)if(arguments1 = true)return

10、 document.querySelectorAll(param);elsereturn document.querySelector(param);var $box = $(.box);var $box1 = $(.box-1 ul li,true);var $box2 = $(.box-2 ul);var $box3 = $(.box-3);var $length = $box1.length;var str = ;for(var i =0;i$length;i+)if(i=0)str +=+(i+1)+;elsestr += +(i+1)+;$box2.innerHTML = str;v

11、ar current = 0;var timer;timer = setInterval(go,3000);function go()for(var j =0;j$length;j+)$box1j.style.display = none;$box2.childrenj.className = ;if($length = current)current = 0;$box1current.style.display = block;$box2.childrencurrent.className = on;current+;for(var k=0;k$length;k+)$box1k.onmous

12、eover = function()clearInterval(timer);$box1k.onmouseout = function()timer = setInterval(go,3000);for(var p=0;p$box3.children.length;p+)$box3.childrenp.onmouseover = function()clearInterval(timer);$box3.childrenp.onmouseout = function()timer = setInterval(go,3000);for(var u =0;u$length;u+)$box2.chil

13、drenu.index = u;$box2.childrenu.onmouseover = function()clearInterval(timer);for(var j=0;j$length;j+)$box1j.style.display = none;$box2.childrenj.className = ;this.className = on;$box1this.index.style.display = block;current = this.index +1;$box2.childrenu.onmouseout = function()timer = setInterval(g

14、o,3000);$box3.children0.onclick = function()back();$box3.children1.onclick = function()go();function back()for(var j =0;j$length;j+)$box1j.style.display = none;$box2.childrenj.className = ;if(current = 0)current = $length;$box1current-1.style.display = block;$box2.childrencurrent-1.className = on;cu

15、rrent-; 网站首页 桂林介绍 桂林经济 行政区域 图片风光 桂林，简称桂，是国务院批复确定的国际旅游胜地、国家可持续发展议程创新示范区；联合国世界旅游组织亚太旅游协会旅游趋势与展望国际论坛永久举办地。桂林北接湖南、贵州，西南连柳州，东邻贺州，属山地丘陵地区及典型喀斯特岩溶地貌，辖17个区（市）县和高新区、总面积2.78万平方公里，2018年户籍人口538.15万人1，国家级重点科研中心7个，高校15所。桂林是中国融贯西南、华南、中南最便捷国际旅游综合交通枢纽，是“一带一路”和黔粤湘桂交界重要联接点，其高铁通车里程占广西1/4，下属9个高铁站。2014年，以桂林山水为代表的中国南方喀斯特地

16、貌被联合国教科文组织列入世界自然遗产名录。桂林是世界旅游组织推荐4大中国最佳旅游城市之一、首批对外开放生态山水名城；2017年入境游客居全国第四，仅次于京沪镐。2021年5月，在2021城市商业魅力排行榜中，桂林获评为三线城市。 景点美食文化人物历史自然建设学校 2021-12-14闫司航 桂林山水甲天下 违法及不良信息举报中心网页运行结果：2.介绍桂林景区作品页面展示了桂林一些特色景区。页面内容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。桂林 网站首页 桂林介绍 桂林经济 行政区域 图片风光 景点 美食 文化 人物 历史 自然 建设 学校

17、 漓江 桂林市漓江景区位于广西壮族自治区东部，是世界上规模最大、风景最美的岩溶山水游览区之一 。 桂林市漓江景区是广西东北部喀斯特地貌发育最典型的地区，主要景点有象鼻山、冠岩、黄布倒影和仙人推磨等自然景观，人称“百里漓江、百里画廊”。2007年，桂林市漓江景区被评为国家AAAAA级旅游区。 象鼻山 象鼻山原名漓山，位于广西区桂林市内桃花江与漓江汇流处，山因酷似一只站在江边伸鼻豪饮漓江甘泉的巨象而得名，被人们称为桂林山水的象征。象鼻山以神奇著称。其神奇，首先是形神毕似，其次是在鼻腿之间造就一轮临水明月，构成“象山水月”奇景。 阳朔西街 阳朔西街是集古今中外文化于一体的旅游景点和商业点，位于广西阳

18、朔县城中心，又称洋人街。 阳朔西街是阳朔县城内最古老的街道，略呈东西走向，东到滨江路，西到蟠桃路，中间与县前街、城中路交汇，全长近800米，大理石路面，呈弯曲的S形，整条街道建筑凸显桂北民居特色。 2021-12-14闫司航 桂林山水甲天下 违法及不良信息举报中心网页运行截图：3.介绍桂林的历史作品页面介绍了桂林的历史。页面内容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。桂林 网站首页 桂林介绍 桂林经济 行政区域 图片风光 景点 美食 文化 人物 历史 自然 建设 学校 桂林是具有万年历史的人类智慧圣地，桂林历史可上溯到距今12000年的

19、新石器时代，在距今约一万年前，根据市区宝积岩和甑皮岩洞穴发现的遗物考证，甑皮岩人已进入母系氏族社会阶段。 变迁 夏商周时期，这里是“百越”人的居住地。秦始皇置桂林，象，南海三郡，这是“桂林”名称的最早起源，但郡治不在今天的桂林市。汉元鼎六年（公元前111年），在这里设始安县，隶属荆州零陵郡。东汉时改属始安侯国。三国时先属蜀，后归吴。甘露元年（265年），置始安郡始安县，郡县治所都在今之桂林。隋唐时属岭南桂州总管府。唐武德四年（621年），李靖修城于独秀峰南。贞观八年（634年）改名临桂县，属桂州始安郡。光化三年（900年）始，属静江节度。五代十国时先后属楚和南汉的桂州。宋时，前属广南西路桂州，

20、后属静江府。元时属广西行中书省静江路。明清时均属广西省桂林府。民国时属广西省。1914年改名桂林县，1940年始设桂林市。1944年11月至1945年7月28日，为日寇占领。光复后仍为广西省辖市。历史上长期为广西省会。1949年11月22日桂林解放，为广西省辖市，1958年改称广西壮族自治区桂林市。 文学 有着深厚文化底蕴的桂林，以山水文化著称。其实质是中原文化，其源头在于兴安灵渠。它沟通了长江水系和珠江水系，将先进的中原文化输送到整个岭南。俗话说：北有长城南有灵渠。郭沫若认为灵渠“诚足与长城南北相呼应，同为世界奇观。”翦伯赞说：“不到灵渠岸，无由识始皇。”这却是学术界对灵渠的评价了。桂林山水

21、文化有一个看得见摸得着的载体，那就是桂海碑林。桂林奇山异洞中琳琅满目的摩崖石刻多达2000多件，绝对世界第一。其中可称文物国宝的摩崖石刻有伏波山的米芾自画像等。因此，在桂林游山玩水历来有“看山如观画，读山如读史”的说法。艺术文史与山水融为一体，堪称天人合一的绝妙注解 传说 桂林米粉 桂林米粉的传说讲了好多年，谁也不清楚，也没得几个人去考证它。传说讲秦始皇派史禄率民工开凿灵渠，灵渠修通了，秦始皇由丞相李斯陪同，微服游览桂林山水。他老哥子有个嗜好，爱用鲤鱼须、鱼肚来下酒，脆啊。来到漓江一看，哇，漓江里的鲤鱼用手就捧得起，乐得他乱拍屁股，叫船家赶快弄来，银子多多给。一餐不晓得要用好多条鲤鱼才炒得出一

22、海碗，秦始皇在漓江上游了半把个月，杀了成千上万条鲤鱼去。急起漓江里的鲤鱼王乱跳，发誓要把秦始皇的游船拱翻去，让他葬身鱼腹！河伯晓得了警告说，帝王之事乱来不得，你赶紧另想办法吧。鲤鱼王急中生智，用大米磨浆制成了鱼须(米粉)、鱼肚(切粉)。秦始皇吃了，拍案叫绝，从此桂林米粉就问世了。 后来，秦始皇“焚书坑儒”成了千古暴君，老百姓不喜欢他了，干脆把桂林米粉的传说内容改头换面，改成桃花江上摆渡的年轻人，救了漓江的鲤鱼王，鲤鱼王问他要什么报答，年轻人是孝子，说老母亲有病，胃口不开，鲤鱼王听了，就教他学会了制作米粉的工艺，老母亲一吃，又可口又消化，病也好了。因那年轻人是瑶族人，所以传说讲米粉最早是瑶族同胞

23、做出来的。从前，米粉作坊压花格窗上总爱挂一条木制的鲤鱼，就是根据这些传说来的。 2021-12-14闫司航 桂林山水甲天下 违法及不良信息举报中心网页运行结果：介绍桂林美食作品页面展示了桂林的当地美食。页面内容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。桂林 网站首页 桂林介绍 桂林经济 行政区域 图片风光 景点 美食 文化 人物 历史 自然 建设 学校 桂林米粉 艾糍粑 白果炖老鸭 2021-12-14闫司航 桂林山水甲天下 违法及不良信息举报中心网页运行截图：5.介绍桂林代表人物作品页面介绍了桂林的代表人物。页面内容有html的锚点效果

24、还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。桂林 网站首页 桂林介绍 桂林经济 行政区域 图片风光 景点 美食 文化 人物 历史 自然 建设 学校 乔振宇 李宗仁 郁钧剑 2021-12-14闫司航 桂林山水甲天下 违法及不良信息举报中心网页运行结果：6.介绍桂林资源作品页面展示了桂林资源。页面内容有html的锚点效果还有网页的内部布局，还包括了很多效果形式，链入式，内嵌式，以及字体的样式设置。桂林 网站首页 桂林介绍 桂林经济 行政区域 图片风光 景点 美食 文化 人物 历史 自然 建设 学校 矿物资源 桂林矿产资源丰富 桂林矿产资源丰富，矿种主要有赤铁矿、黄铁矿、褐铁矿、铅、锌、锡、钨、铝、铌、钽、锰、滑石、重晶石、萤石、花岗石、石灰石、大理石等40多种，其中探明有一定储量的有30多种，在广西位于全国前列的36种矿产中，桂林占17种，其中大理石、花岗石、石灰石、滑石分布广，储量大，