HTML5期末大作业：我的家乡——走进达州(4页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 总共4个页面。
2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
文章目录
- HTML5期末大作业：我的家乡——走进达州(4页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
- 作品介绍
- 一、作品展示
- 1.首页
- 2.风景
- 3.美食
- 4.人文
- 二、文件目录
- 三、代码实现
- 四、web前端(学习资料)
- 五、源码获取
- 六、更多源码
一、作品展示
1.首页
2.风景
3.美食
4.人文
二、文件目录
三、代码实现
<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/index.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 data-spy="scroll" data-target="#myScrollspy" data-offset="10">
<!-- 导航栏 -->
<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 class="active"><a href="index.html">首页</a></li>
<li><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 id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<a href="scenery.html">
<img src="img/banner1.png" alt="First slide">
</a>
</div>
<div class="item">
<a href="food.html">
<img src="img/banner2.png" alt="Second slide">
</a>
</div>
<div class="item">
<a href="humanity.html">
<img src="img/banner3.png" alt="Third slide">
</a>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- 侧边导航栏 -->
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked" id="sidebar">
<li><a href="#about">了解</a></li>
<li><a href="#environment">环境</a></li>
<li><a href="#resources">资源</a></li>
<li><a href="#population">人口</a></li>
<li><a href="#celebrity">名人</a></li>
<li><a href="#honor">荣誉</a></li>
<li><a href="#most">之最</a></li>
<li><a href="#">
<img src="img/go-top.png" alt="go-top">
</a></li>
</ul>
</nav>
<!-- 内容 -->
<div class="body">
<div class="container">
<!-- 了解达州 -->
<a id="about"></a>
<div class="about-body">
<div class="about-body-header">
<h3>了解达州</h3>
</div>
<div class="about-body-body">
<img class="img-responsive" src="img/p1.jpg" alt="img1">
<p>达州是四川省下辖的地级市之一，位于四川省东部，是四川省的人口大市、农业大市、资源富市、工业重镇和交通枢纽，是著名的革命老区，素有“中国气都，巴人故里”之称。达州上古时属巴地，夏属梁州，殷商属雍州，春秋战国属巴国，秦和西汉属宕渠县。达州物产丰饶，资源富集，著名景点有真佛山、百里峡、賨人谷、列宁街、罗家坝遗址、渠县汉阙等，享有中国苎麻之乡、中国黄花之乡、中国油橄榄之都、中国富硒茶之都、中国香椿第一县的美称，成为成渝城市群重要节点城市。</p>
</div>
</div>
<!-- 地理环境-->
<a id="environment"></a>
<div class="environment-body">
<div class="environment-body-header">
<h3>地理环境</h3>
</div>
<div class="environment-body-body">
<!-- 位置境域 -->
<div class="environment-body-body-location">
<h4>位置境域</h4>
<p>达州地处川渝鄂陕四省市结合部和长江上游成渝经济带，是四川对外开放的“东大门”和四川重点建设的百万人口区域中心城市，达州市幅员面积16591平方千米。</p>
</div>
<!-- 地貌 -->
<div class="environment-body-body-landform">
<h4>地貌</h4>
<p>达州市地势东北高（大巴山区），西南低（盆地丘陵区）。最高处是宣汉县鸡唱乡大团堡，海拔2458.3米；最低处是渠县望溪乡天关村，海拔222米。大巴山横直在万源宣汉北部，明月山、铜锣山、华蓥山由北而南，纵卧其间，将达州市分割为山区、丘陵、平坝3块。山地占幅员面积70.70%，丘陵占28.10%，平坝占1.20%。北部山体切割剧烈，山势陡峭，形成中、低山地貌单元；中南部较为平缓，形成平等谷地地貌单元。</p>
<img class="img-responsive" src="img/p2.jpg" alt="img2">
</div>
<!-- 水文 -->
<div class="environment-body-body-hydrology">
<h4>水文</h4>
<p>达州市河流主要属长江支流的嘉陵江水系，发源于大巴山，由北而南呈树枝状分布。前河、中河、后河汇成州河后与巴河在渠县三汇镇汇合成渠江，南流300千米入长江。境内流域面积在100平方千米以上的河流有53条，1000平方千米以上的干流有15条。共有通航河流9条，分别是渠江、州河、巴河、前河、后河、中河、铁溪河、清溪河、林岗溪，基本形成以渠江、州河、巴河这主干流的水路运输网络，流域覆盖达州市四个县（市）。各河流可通航里程不等，运载量在100吨以下。</p>
</div>
<!-- 气候 -->
<div class="environment-body-body-climate">
<h4>气候</h4>
<p>达州市属亚热带湿润季风气候类型。由于地形复杂，区域性气候差异大。海拔800米以下的低山、丘陵、河谷地区气候温和，冬暖、春早、夏热、秋凉，四季分明，无霜期长；海拔800至1000米的低、中山气候温凉、阴湿，回春迟，夏日酷热，秋凉早，冬寒长；海拔1000米以上的中山区，光热资源不足，寒冷期较长，春寒和秋霜十分突出。达州市热量资源丰富，雨热同期，全年平均气温14.7度～17.6度之间，无霜期300天左右。达州市雨量充沛，年平均雨量在1076至1270毫米之间。春季多寒潮低温天气，夏季多伏旱和洪涝、大风、冰雹，秋季多连绵阴雨。</p>
</div>
</div>
</div>
<!-- 自然资源 -->
<a id="resources"></a>
<div class="resources-body">
<div class="resources-body-header">
<h3>自然资源</h3>
</div>
<div class="resources-body-body">
<!-- 矿产资源 -->
<div class="resources-body-body-mineral">
<h4>矿产资源</h4>
<img class="img-responsive" src="img/p3.jpg" alt="img3">
<p>截至2012年，达州市已发现矿物38种，产地250余处。其中探明储量的28种，产地146处；可开发利用的28种，已开发利用的21种。石煤已探明储量7.63亿吨，其中保有储量5.80亿吨，表外储量1.22亿吨，炼焦用煤6.39亿吨。主要分布在达川区、通川区、大竹县、宣汉县、渠县及开江县、万源市境内。</p>
<p>达州天然气远景储量达3.8万亿立方米，已探明天然气储量6600亿立方米，是全国继新疆塔里木、内蒙古鄂尔多斯气田之后最具开发潜力的大气田。中石化在宣汉普光发现迄今为止国内探明规模最大、丰度最高的特大型海相整装气田，探明天然气储量高达3561亿立方米，到2009年预计探明储量将达到7700亿立方米；中石油万源罗文铁山坡气田单井日产无阻流量高达1550万立方米，创全国陆地单井日产量之最。中石油、中石化已把达州作为“十一五”期间天然气勘探、开采的主战场，到2010年，将建设普光、罗家寨、铁山坡、渡口河和石河等5个天然气净化厂，达到天然气处理能力7400万立方米/日，年新增商品天然气量200亿立方米，年产硫磺450万吨。</p>
<p>铁矿保有储量3743万吨，预测储量1400万吨，主要分布在万源市红旗、长石、城区、关坝、水田、沙滩等地。达川区新兴，宣汉县新华、樊哙、漆碑、天生、上峡等地也有分布。锰矿在万源市大竹河田坝一仙鹅一带，发现一处锰矿。矿床延伸30余千米仅在北段8千米地区内探明菱锰矿表外D级储量113.5万吨。矿石中锰最高含量36.27%，最低11.1%。</p>
<p>钒矿主要分布在万源市大竹河蒲家坝、隔档溪地区，D级保有储量，五氧化二钒42.88万吨，矿石5918万吨。铝土矿分布于万源市花尊山一带，长18千米，厚度0.43至3.2米。探明储量84万吨，平均品位35%-51%。石灰岩在万源市、渠县、通川区境内局部地区探明保有储量5亿吨。大竹县、宣汉县、达川区都有出露。达州市地质储量20亿吨左右。</p>
<p>截至2012年，石膏已探明储量2.3亿吨，主要分布在渠县、万源市、达川区等区县的一些地区。岩盐矿位于达川区铁山背斜北端含盐块区，面积12平方千米，远景储量2亿吨以上；宣汉县西北含盐块区，面积14平方千米，远景储量4亿吨以上；通川区罗江、宣汉县王家含盐块区，面积12平方千米，远景储量0.9亿吨以上。</p>
<p>富钾卤水储量为3.39亿m³，探明储量1.65亿m³，主要分布在宣汉县境内。白云岩的远景储量2272万吨，硅石远景储量5亿吨，钾盐矿远景储量1000万吨，钡矿远景储量20万吨以上，铸石远景储量5亿吨以上，大理石远景储量2000万立方以上。其他非金属矿产耐火粘土地质储量500万吨，磷矿保有储量631万吨，硫铁矿200万吨，膨润土（俗称白泥巴）保有储量11.76万吨，页岩、粘土矿695万吨。</p>
<img class="img-responsive" src="img/p4.jpg" alt="img4">
</div>
<!-- 生物资源 -->
<div class="resources-body-body-biological">
<h4>生物资源</h4>
<p>达州市共有脊椎动物400余种，其中兽类60多种，鸟类230多种，爬行类14种，两栖类10多种，鱼类85种。有国家、省重点保护野生动物52种。属国家二级保护的兽类14种，鸟类20种，两栖类1种（大鲵，俗称娃娃鱼）；属省重点保护的兽类3种，鸟类12种，爬行类2种；属四川省林业厅公布的有重要经济、科学研究价值的野生动物250种。</p>
<p>全区有野生植物5000余种，分属201科、1269属，具有种类多、分布广、数量大、南北植物兼备等特点。除稀珍保护植物31种，占全国列为保护类的8.8%左右外，还有药用价值植物、油脂植物、芳香植物、淀粉植物、纤维植物、单宁植物、菌藻类植物和花卉等。 </p>
<p>达州市普查鉴定的2158种植物中，可供药用的1652种，现已收入标准的有500多种。大宗品种有30多个，畅销国内外市场。达县出产的白芷、红花、百合、乌梅；宣汉出产的黄连、党参、大力子、厚朴；开江县出产的香附子、山植；万源市出产的陈皮、党参、柴胡、杜仲、天麻。渠县出产的白芷、川芎等均为大宗产品。其中天麻、杜仲、黄柏、厚朴、首乌等颇负盛名。</p>
</div>
</div>
</div>
<!-- 人口 -->
<a id="population"></a>
<div class="population-body">
<div class="population-body-header">
<h3>人口</h3>
</div>
<div class="population-body-body">
<img class="img-responsive" src="img/p5.jpg" alt="img5">
<p>达州是四川省下辖的地级市之一，位于四川省东部，是四川省的人口大市、农业大市、资源富市、工业重镇和交通枢纽，是著名的革命老区，素有“中国气都，巴人故里”之称。达州上古时属巴地，夏属梁州，殷商属雍州，春秋战国属巴国，秦和西汉属宕渠县。达州物产丰饶，资源富集，著名景点有真佛山、百里峡、賨人谷、列宁街、罗家坝遗址、渠县汉阙等，享有中国苎麻之乡、中国黄花之乡、中国油橄榄之都、中国富硒茶之都、中国香椿第一县的美称，成为成渝城市群重要节点城市。</p>
</div>
</div>
<!-- 著名人物 -->
<a id="celebrity"></a>
<div class="celebrity-body">
<div class="celebrity-body-header">
<h3>著名人物</h3>
</div>
<div class="celebrity-body-body">
<h4>古代</h4>
<p>
<span>元稹（唐代著名诗人）</span>
<span>唐瑜（达州第一位帝师）</span>
<span>李长祥（明末清初抗清将士）</span>
<span>唐甄（中国杰出思想家）</span>
<span>李特（帝王）</span>
<span>李雄（帝王）</span>
</p>
<h4>近代</h4>
<p>
<span>陈伯钧（开国上将）</span>
<span>张爱萍（开国上将、副总理）</span>
<span>向守志（开国少将）</span>
<span>王维舟（国军少将）</span>
<span>黎玉玺（国军一级上将）</span>
<span>魏传统（开国少将）</span>
<span>金香碧（开县人大副主任）</span>
<span>李中权（开国少将）</span>
</p>
<h4>现代</h4>
<p>
<span>魏传义（著名画家）</span>
<span>梁上泉（著名歌词作家、文学家）</span>
<span>陈清泉（著名画家）</span>
<span>庞中华（著名书法家）</span>
</p>
</div>
</div>
<!-- 城市荣誉 -->
<a id="honor"></a>
<div class="honor-body">
<div class="honor-body-header">
<h3>城市荣誉</h3>
</div>
<div class="honor-body-body">
<p>2017年12月24日，达州入围2017中国特色魅力城市200强。</p>
<p>2020年6月9日，达州获评四川省促进服务业发展工作先进市党委、政府。</p>
</div>
</div>
<!-- 城市之最 -->
<a id="most"></a>
<div class="most-body">
<div class="mostr-body-header">
<h3>城市之最</h3>
</div>
<div class="most-body-body">
<p>中国苎麻之乡，中国黄花之乡，中国富硒茶之都</p>
<p>世界上最大的3座天然气脱硫厂在达州</p>
<p>世界上规模最大、技术水平最高的湿法磷酸净化装置在达州瓮福集团</p>
<p>亚洲最大的硫磺生产基地在达州</p>
<p>全国最大微玻纤生产基地在达州</p>
<p>全国第一大海相气田——达州普光气田</p>
<p>全国第一大天然气化工园区在达州</p>
<p>全国最大的苎麻交易中心在达州</p>
<p>国家级天然气质量检验机构和科研机构在达州</p>
<p>国家级新农村展演基地在达州</p>
<p>国家级曲棍球训练基地在达州</p>
<p>中国西部最大燃气电站在达州---总装机高达140万千瓦</p>
<p>中国西南最大铝型材基地在达州</p>
<p>全国唯一一个国家开发银行不封顶贷款城市</p>
<p>四川省第一个进入人民大会堂招商的城市</p>
<p>四川省第一个以地级市的名义直接向中央拿到100亿的城市</p>
<p>四川省第一个把省AA风景区直接申请世界自然公园的城市</p>
<p>国内唯一发现的最早记述种植茶树历史的万源市石窝乡紫云坪植茗灵园记摩岩石刻（迄今已有890多年的历史）</p>
<p>四川省第一个始发动车组的二级城市</p>
<p>成都铁路局在二级城市中第一大铁路枢纽特等站</p>
<p>四川省东北部最大工业基地</p>
<p>四川东北部最大档次最高的综合性博物馆——达州博物馆</p>
<p>四川东北部规模最大的图书馆、文化馆、大剧院都群聚达州</p>
<p>四川东北部最大的五金、小商品批发市场——达州市南外时代天成，西外好一新商贸城</p>
<p>四川川东北最大家具市场——中青国家际家居生活广场</p>
<p>达州的“城坝遗址”、“罗家坝遗址”堪称与三星堆、金沙遗址媲美</p>
<p>土溪汉阙、开江县牌坊同属国家重点保护文物，堪称艺术中的珍品</p>
<p>渠县汉阙有6处7尊，占全国汉阙总数的四分之一，占汉阙总数的五分之三，是名副其实的汉阙之乡不仅是中国最大的汉阙群，而且以其艺术精湛而著称于世，引起了中外历史学家和汉学家的关注。</p>
<p>大竹县是“中国苎麻之乡”，苎麻种植面积30万亩，年产量4.5万吨，居全国首位。</p>
</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/index.js"></script>
</body>
</html>
