HTML5期末大作业：家乡网站设计——我的家乡- 达州(4页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：家乡网站设计——我的家乡- 达州(4页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>走进达州 - 跟随我们了解达州</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/scenery.css" rel="stylesheet">
<link rel="shortcut icon" href="img/logo.png" >
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
@font-face{
font-family: "中山行书百年纪念版";
src: url("fonts/中山行书百年纪念版.ttf");
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a href="index.html" class="navbar-brand">走进达州</a>
</div>
<div class="navbar-collapse collapse" role="naviqation">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li class="active"><a href="scenery.html">美景</a></li>
<li><a href="food.html">美食</a></li>
<li><a href="humanity.html">人文</a></li>
</ul>
</div>
</div>
</nav>
<!-- 背景 -->
<div class="background"></div>
<!-- 内容 -->
<div class="body">
<div class="container">
<!-- 城市美景 -->
<div class="scenery">
<div class="scenery-header">
<h3>城市美景</h3>
</div>
<!-- 巴山大峡谷 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>巴山大峡谷</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p6.jpg" alt="img1">
<p>巴山大峡谷前身为四川百里峡，位于宣汉县境内，是国家AAA级旅游风景区。景区由百里峡、江口湖两部分组成，总面积为105平方千米，其中百里峡景区范围65平方千米，海拔452米至2148米，峡长140千米。这里有百兽聚会、仙女岩、观音洞、南天门、二龙飞瀑、老黄山、犀牛望月、一线天、盘龙洞、雄鸡鸣天十大景点，江口湖水域面积20平方千米，有云雾寨、鸡窝石、三斗峡、普光寺、黄石白鹤林等景点。百里峡景区历史悠久，有秦末汉初樊哙屯兵驻扎留下的将军坪、跑马梁、拴马石、大通险道及石栈道等遗址，有张献忠、白莲教留下的青龙寨、大寨子等遗址。</p>
</div>
</div>
<!-- 八台山 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>八台山</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p7.jpg" alt="img2">
<p>八台山风景名胜区地处万源市八台乡的东部，因地貌成层状梯级递降，有八层之多，故名八台山。主峰2348m，为川东第二高峰。八台山为大巴山石灰岩山地的一部分。区内景物多彩多样，融山景、峰景、崖景、生景、气景为一体，是达州市自然风景最吸引人的景区之一。八台山峰谷高差达1500一1700m。站在峰顶，脚下群山起伏，如波似涛，延绵千里。其西南部为白沙河支流，谷坡宽阔，其上发育相对高差达100m的石灰岩孤丘36座，参差错落，形似象棋的棋子，故称棋盘山，这是四川省独一无二的石灰岩丘陵群景观。</p>
</div>
</div>
<!-- 真佛山 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>真佛山</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p8.jpg" alt="img3">
<p>真佛山位于达州市达川区城南30余千米的七里峡山脉中段的福善乡境内，是国家AAAA级风景区。风景区主要由德化寺、玉佛寺、金刚寺、凌云寨等人文景观，以及胭脂湖、三仙石、海螺洞、莲花庵、云华山、刀脊梁等自然景观构成。与德化寺遥遥相对的一佛寺双塔，造型别致，工艺精湛，塔高21层，可谓全国之最。古庙、石塔、林海、秀峰、溶洞、湖水浑然一体。</p>
</div>
</div>
<!-- 賨人谷 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>賨人谷</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p9.jpg" alt="img4">
<p>賨人谷风景区地处达州市渠县城东26千米，以奇山、秀水、幽洞、丽峡、飞瀑、湖泊、涌泉、怪石、古栈、茂林著称，被誉为川东“小九寨”、国家AAAA级旅游区、省级风景名胜区、省级森林公园。景区内景观众多，汇洞景、石景、崖景、瀑景、气景、生景和人文景观为一体，并且有些景物独具特色。洞景主要集中在渠县龙潭乡老龙村境内，初步调查有大小溶洞60多个，呈现于地表的多为落水洞形式，一门一洞，洞洞有别，洞间又有小洞相通。溶洞群中，以老龙洞的规模最大、最奇。该洞高20m，宽约30m，长在1000m以上。</p>
</div>
</div>
<!-- 宣汉观音山森林公园 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>宣汉观音山森林公园</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p10.jpg" alt="img5">
<p>观音山森林公园位于四川盆地东北大巴山南麓，达州市宣汉县柏树镇，面积24488亩，最高海拔1058.6米。以低山丘陵地貌为主，为中亚热带湿润季风气候区。观音山森林公园不仅是生态旅游胜地，还具有历史价值和丰富的文化底蕴，观音山的神话传说，神龙宫的传奇故事，山顶的宝盖寺遗址，红军战场遗址和“白莲教”起义遗址见证着历史的痕迹。</p>
</div>
</div>
<!-- 雷音铺省级森林公园 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>雷音铺省级森林公园</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p11.jpg" alt="img6">
<p>雷音铺森林公园总面积800公顷，距达川区南城6千米处，雷音铺森林公园金刚寺旅游度假村，距达城20千米，位于达川区金刚，该度假村置身于参天古树之中，大清乾隆三年建造的名胜古刹，规模宏伟壮观。雷音铺森林公园经过几年的建设，初具规模，已向游客开放并能为游客提供会议、度假、餐饮、娱乐为一体的优质服务。</p>
</div>
</div>
<!-- 万源市大竹河风景区 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>万源市大竹河风景区</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p12.jpg" alt="img7">
<p>大竹河风景区位于万源市北50千米，面积49.6平方千米。区内四季景色各有千秋。两岸山峰千姿百态，有的峭壁千仞，直插云霄；有的似鳄鱼上山、神龟下海，活灵活现；天坑、地缝、间歇泉、溶洞等景观目不暇接，令人叹为观止。</p>
</div>
</div>
<!-- 一佛寺塔 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>一佛寺塔</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p13.jpg" alt="img8">
<p>一佛寺塔又名双石塔，位于达川区城东南40千米的景市乡一佛塔村，一佛寺建于清宣统元年，其建筑形式和殿堂布局与真佛山寺庙十分相仿，可惜该寺庙毁于“文革”，现仅存山门和石梯，山门高5米，两边门柱上石刻楹联，为“梵刹甚清幽孤月寒烟空色相，园多雅致万家烟火映禅登”。距寺约20米是一佛塔，塔为双石塔，建于清道光二十九年，六边形密檐式实心塔。其中1号塔高42.65米，底层边长3.6米，下为石砌素面台基，高0.23米，基座为须弥座，高0.47米，东边三面浮雕佛龛人物10余尊以及园林建筑图案。</p>
</div>
</div>
<!-- 列宁主义街 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>列宁主义街</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p14.jpg" alt="img9">
<p>列宁主义街位于距达州市达川区63千米的石桥镇西南角，由东向西一字排开的四座仿木结构的石牌坊，分别是清嘉庆、同治、光绪年间为旌表、诰封、节孝而建造的。石牌坊古朴隽秀，重檐斗拱蔚为壮观。每坊额端均镂雕“五龙捧圣”。其间或浮雕“八仙”，或圆雕“桃园结义”，或“三战吕布”，或“二十四孝”等历史故事。</p>
</div>
</div>
<!-- 渠县汉阙群 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>渠县汉阙群</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p15.jpg" alt="img10">
<p>渠县碑、阙较多，而且品位高，档次高，其中汉阙有6处。是全国最多的地方，阙上有的刻有朱雀、青龙，有的刻有人物，雕刻精美，造型精致，为他处少见。全国重点保文物护单位2处，省重点文物保护单位4处，其余为县文物保护单位。主要碑、阙有冯焕阙、沈府君阙、蒲家湾无铭阙、赵家村西无铭阙、赵家村东无铭阙、王家坪无铭阙、赵公神道碑等。</p>
</div>
</div>
<!-- 渠县文庙 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>渠县文庙</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p16.jpg" alt="img11">
<p>渠县文庙地处四川达州市渠县县城内，市级重点文物保护单位。现存的文庙是前后经历康熙、雍正、乾隆、嘉庆四个皇帝，改迁位置，费时118年之久才建成的。文庙大门雄伟壮观，朱红照壁，十分耀眼。正北面“宫墙万仞”四个遁劲有力的楷书鎏金大字，相传为康熙皇帝手书。宫墙两边大门悬匾，左有“圣域”、右有“贤关”，即圣贤所能至。桥护栏雕刻文房四宝、花鸟虫鱼、祥云怪兽等。中桥两头为精雕蟠龙，只有状元衣锦还乡才可过此桥，寓意金榜题名，独占鳌头。两旁的二桥，也只有功成名就的读书人，才够资格过一趟，称做“游泮”，且要举行一定仪式，即所谓“泮水生香”，始能走过。</p>
</div>
</div>
<!-- 红三十军政治部旧址 -->
<div class="scenery-body">
<div class="scenery-body-header">
<h4>红三十军政治部旧址</h4>
</div>
<div class="scenery-body-body">
<img class="img-responsive" src="img/p17.jpg" alt="img12">
<p>红三十军政治部旧址位于四川省达州市通川区梓桐乡，建筑面积约620平方米，现存房屋10间。此处原名“杜府草堂”，因建国前是梓桐乡伪团总杜光亭的庄园。该建筑始建于民国初年，后经逐年维修、遂成为一座具有川北农村特色的四合大院。红三十军政治部旧址在1982年7月由达县地区人民政府批准为县级文物保护单位，并拨款修建了旧址陈列馆，老一辈无产阶级革命家张爱萍同志题写了馆名。1996年6月，被命名为地级爱国主义教育基地。2001年5月22日被达州市人民政府公布为达州市首批重点文物保护单位。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 底栏 -->
<footer class="footer">
<div class="container">
<div class="footerbar">
<div class="footerbar-header">
<p>跟随我们走进达州</p>
</div>
<div class="footerbar-body">
<span><a href="scenery.html">赏达州美景</a></span>
<span><a href="food.html">享达州美食</a></span>
<span><a href="humanity.html">读达州人文</a></span>
</div>
<div class="footerbar-footer">
<p>Copyright © 2020-2020 走进达州</p>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="js/scenery.js"></script>
</body>
</html>
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
