如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。
1.网页作品简介 ：
HTML期末大学生网页设计作业，可以替换文字图片满足不同的家乡，根据百度百科的信息来替换就是自己的家乡了
2.知识应用：
在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
3. 内容介绍：
《我的家乡》共有5个页面，分别为
index.html【首页】
该页面引用了超链接、div盒子、浮动等，主要是展示家乡的风景，特色等，如下是效果图：
下面是核心代码区域：
<header class="container-fluid">
<div class="row">
<img src="img/bg02.png" class="img-fluid" alt="Responsive image">
</div>
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" style="margin-left: 50px; margin-top: 5px"><h2>湖北 · 宜昌</h2></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item food">
<a class="nav-link" href="food.html">特色美食</a>
</li>
<li class="nav-item culture">
<a class="nav-link" href="culturalConstruct.html">历史文化</a>
</li>
<li class="nav-item culture">
<a class="nav-link" href="landscapeAppreciate.html">风景欣赏</a>
</li>
<li class="nav-item culture">
<a class="nav-link" href="MessageBoard.html">留言板</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-primary " type="submit">搜索</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div class="container-fluid ">
<div class="bg bg-blur"></div>
<div class="content-front">
<div class="jumbotron-fluid">
<div class="container mid" >
<div class="row">
<h1 class="display-4 cityIntro" >城市介绍·宜昌</h1>
</div>
<div class="row">
<div class="col-lg-6">
<p class="lead introWords"> 宜昌古称夷陵，因“水至此而夷、山至此而陵”得名，清朝时取“宜于昌盛”之意改称“宜昌”，是屈原、嫘祖、王昭君、杨守敬等历史名人的故里。宜昌是长江三峡起始地、三峡工程所在地，拥有水电站468座（含三峡大坝、葛洲坝），以全国0.2%的土地装备了全国7%的水电装机容量</div>
<div class="col-lg-6 introImg">
<img src="img/img01.png" class="introImg shadow-lg p-0 mb-2 rounded" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container-fluid ">
<div class="bg2 bg-blur"></div>
<div class="content-front">
<div class="jumbotron-fluid">
<div class="container mid" >
<div class="row"style="margin-left: 650px">
<h1 class="display-4 cityIntro">地理环境·宜昌</h1>
</div>
<div class="row">
<div class="col-lg-6 introImg">
<div class="row" style="margin-top: 10px"><img src="img/img03.png" class="introImg shadow-lg p-0 mb-2 rounded" ></div>
<div class="row" style="margin-top: 60px"><img src="img/img02.png" class="introImg shadow-lg p-0 mb-2 rounded" ></div>
</div>
<div class="col-lg-6">
<h4 style="margin-top: 30px; margin-left: 60px">地形地貌：</h4>
<p class="lead introWords" style="margin-left: 60px">宜昌市位于湖北省西南部，地处长江上游与中游的结合部、鄂西武陵山脉和秦巴山脉向江汉平原的过渡地带，“上控巴蜀，下引荆襄”。地跨东经110°15'～112°04'、北纬29°56'～31°34'之间，东西最大横距174.08千米，南北最大纵距180.6千米。东邻荆州市和荆门市，南抵湖南省石门县，西接恩施土家族苗族自治州，北靠神农架林区和襄阳市。
</p>
<h4 style="margin-top: 30px; margin-left: 60px">水文：</h4>
<p class="lead introWords" style="margin-left: 60px">
宜昌市河流均属长江流域的长江上游干流水系、长江中游干流水系、清江水系、洞庭湖区的四口水系及澧水水系等五大水系。以长江干流为主脉，河流多、密度大、水量丰富。据全国水利普查调查，宜昌市集水面积在50平方千米以上135条，在境内的集水面积占全市总面积的91.5%，河网密度0.24千米/平方千米。河流集水面积大于1000平方千米，长度大于100千米以上河流主要有长江、清江、沮漳河、黄柏河、渔洋河等。</p>
<h4 style="margin-top: 30px; margin-left: 60px" style="margin-left: 60px">气候：</h4>
<p class="lead introWords" style="margin-left: 60px">宜昌位于中亚热带与北亚热带的过渡地带，属亚热带季风性湿润气候。有四季分明，水热同季，寒旱同季的气候特征。多年平均降水量1215.6毫米。平均气温16.9摄氏度，极端最高温度41.4摄氏度（7月），极端最低温度零下9.8摄氏度（元月）。年平均大于10度的活动积温5200摄氏度以上，持续天数达250天。无霜期250～300天，年平均辐射量100.7千卡每平方厘米，年平均日照时数1538～1883小时，日照率40%。 </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container-fluid ">
<div class="bg3 bg-blur"></div>
<div class="content-front">
<div class="jumbotron-fluid">
<div class="container mid" >
<div class="row" >
<h1 class="display-4 cityIntro">人口民族·宜昌</h1>
</div>
<div class="row">
<div class="col-lg-6">
<h4 style="margin-top: 105px">人口：</h4>
<p class="lead introWords">2020年末全市户籍人口为389.90万人。全年出生人口2.45万人，出生率为6.3‰；死亡人口2.65万人，死亡率为6.8‰；自然增长率为-0.5‰。
</p>
<h4 style="margin-top: 50px">民族：</h4>
<p class="lead introWords">宜昌是一个多民族地区，除汉族以外，有瑶、壮等48个少数民族，少数民族人口63.0867万，占全市总人口10%。
</p>
</div>
<div class="col-lg-6 introImg">
<img src="img/img04.png" class="introImg shadow-lg p-0 mb-2 rounded" style="margin-top: 90px" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Food.html【家乡美食介绍】
核心代码如下：
<div class="container-fluid">
<div class="bg bg-blur"></div>
<div class="bg2 bg-blur"></div>
<div class="row content-front">
<div class="col-lg-12 ">
<div style="margin-top: 130px; margin-left: 100px; color: gainsboro">
<h1 class="display-1">特色美食</h1>
<p class="lead" style="font-size: larger ; margin-top: 20px ">characteristic and delicious Food</p>
<hr class="my-4">
<p>永州，为潇、湘二水汇合处，独特的地理环境，造就了永州丰富多样的特色美食</p>
</div>
</div>
</div>
<div class="row content-front2">
<div class="col-lg-12" style="margin-top: 900px">
<img src="img/img05.png" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image" style="width: 700px; height=450px">
<div class="col-lg-6" style="margin-left: 380px; margin-top: 20px">
<h3 style="margin-top: 20px">永州血鸭</h3>
<p class="lead" >
永州血鸭是湖南永州的一款地方传统名菜。永州血鸭分为多种，有江永，道县，新田、宁远、蓝山、东安、双牌等多个说法。在当地，几乎家家户户都会制作此菜。具有美味、开胃凉血的特点。
</p>
</div>
</div>
</div>
<div class="row content-front2">
<div class="col-lg-12" style="margin-top: 1600px">
<img src="img/img06.png" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image" style="width: 700px; height: 450px;">
<h3 style="margin-top: 20px">祁阳米粉</h3>
<div class="col-lg-6" style="margin-left: 380px; margin-top: 20px">
<p class="lead">
祁阳米粉又称文明米粉，是湖南古城祁阳的传统小吃。因其明末清初始创于该县文明铺地方而得名。在原料选用、粉丝制作和粉汤配制等方面，均有其独特的技巧和讲究。用来榨粉的原料，必须是优质稻米，以新谷新米为佳。粉汤是用新鲜猪骨头炖出来的，猛火烧开，文火炖烂，把粘附在骨头上的肉炖化，把骨头里面的髓炖溶，再加佐料。
</p>
<a class="btn btn-primary" href="index.html" style="margin-top: 30px;;">回到首页</a>
</div>
</div>
</div>
</div>culturalConstruct.html【历史文化界面】
该页面使用全局背景图，介绍家乡历史，同时使用单独的card页面展示不同的历史介绍，如下是效果图：
核心代码：
<style>
.bg {
background: url('img/bg17.jpg');
height:800px;
text-align: center;
line-height: 800px;
}
.bg2 {
background: url('img/bg20.jpeg');
height:1730px;
text-align: center;
line-height: 1600px;
}
.bg-blur {
float: left;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.content-front {
position:absolute;
left: 10px;
right: 10px;
height:600px;
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="bg bg-blur"></div>
<div class="bg2 bg-blur"></div>
<div class="row content-front">
<div class="col-lg-12 ">
<div style="margin-top: 200px; color: honeydew">
<h1 class="display-4">千年历史文化名城，湖南省永州市</h1>
<p class="lead"></p>
<br>
<hr class="my-4">
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-"><p class="lead">永州，古称“零陵”，为潇、湘二水汇合处，也称“潇湘”。永州市历史悠久，自公元前124年始置泉陵侯国以来，至今已有2100多年的建制史。永州在隋朝以前称零陵。零陵得名于舜葬九嶷。《史记、五帝本纪》载，舜“南巡狩，崩于苍梧之野，葬于江南九嶷，是为零陵”。零陵在夏代属荆州之域，春秋战国时属楚国南境，秦时属长沙郡。</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="row content-front">
<div class="col-lg-12" style="margin-top: 900px">
<img src="img/img07.jpg" class=" shadow-lg p-0 mb-2 rounded img-fluid" alt="Responsive image">
<h3 style="margin-top: 30px">九嶷山—舜帝陵风景名胜区</h3>
<div class="col-lg-6" style="margin-left: 380px; margin-top: 20px">
<p class="lead">
舜帝陵位于湖南省宁远县城南三十公里处的du九嶷山，是中华民族始祖“五帝”之一舜帝的陵庙。舜帝陵占地面积5万平方米，分为两个自然院落，九个单体建筑，从外入内有玉带桥，仪门、神道、山门、干门、拜殿、正殿、寝殿、左右厢房、左右碑房和碑廊，三面宫墙环绕；气势恢宏，结构严谨，是我国始祖陵中最高最大的陵，被称为“华夏第一陵”。
</p>
</div>
</div>
</div>
<div class="row content-front">
<div class="col-lg-12" style="margin-top: 1650px">
<img src="img/img08.jpg" class="img-fluid shadow-lg p-0 mb-2 rounded" alt="Responsive image">
<h3 style="margin-top: 30px">永州勾蓝瑶寨景区</h3>
<div class="col-lg-6" style="margin-left: 380px; margin-top: 20px">
<p class="lead">
勾蓝瑶是江永“四大民瑶” 之一，将瑶寨围得固若金汤。三层防御工事，层层把守，镇守该村通往外界的各个隘口，加上在两山之间的要道上筑造由大块青石构成的寨墙，可说是“一夫当关，万夫莫开”。这种类似古代关隘的城墙保护方式在一个少数民族村落出现，非常珍贵。兰溪勾蓝瑶寨古建筑群不仅体现了当地较为高超的民间工艺，也集中反映了当地的习俗，加之千余年的瑶寨历史和丰富的文化底蕴，具有较高的历史价值、艺术价值和科学价值。2011年，被列为省重点文物保护单位。有培元桥、盘王庙、石鼓登亭、古民居等古迹，建有瑶族表演厅。
</p>
<a class="btn btn-primary" href="index.html" style="margin-top: 50px;">回到首页</a>
</div>
</div>
</div>
</div>
landscapeAppreciate.html【风景介绍界面】
主要通过轮播图展示风景，通过设置背景音乐烘托气氛，如下是效果图，该界面使用到的技术主要是轮播图的使用，定位布局的使用等
核心代码如下：
<div class="content-front container-fluid" style="">
<div class="row">
<div style="margin-left: 570px;margin-top: 50px;">
<h2 class="display-4" style="color: gainsboro;"> 宜昌市风景欣赏</h2>
</div>
</div>
<div class="row" style="margin-top: 50px;margin-left: 360px">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="width: 800px;height: 400px">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/bg03.jpg" class="d-block w-100 img-thumbnail" alt="...">
</div>
<div class="carousel-item">
<img src="img/bg04.jpg" class="d-block w-100 img-thumbnail" alt="...">
</div>
<div class="carousel-item">
<img src="img/bg05.jpg" class="d-block w-100 img-thumbnail" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row">
<div style="margin-top:50px; margin-left: 615px">
<audio controls="controls" autoplay="autoplay" style="background-color: transparent">
<source src="video/m01.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
<div style="text-align: center;">
<a href="index.html" type="button" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro;margin-top: 50px; margin-left: 725px">返回首页</a>
</div>
</div>
</div>MessageBoard.html【留言板界面】
主要用于留言使用，学习使用表单form等等使用，效果图如下：
核心代码如下：
<style>
.bg {
background: url('img/bg01.jpg');
height: 820px;
text-align: center;
line-height: 800px;
}
.bg-blur {
float: left;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.content-front {
position:absolute;
}
</style>
</head>
<body>
<div class="bg bg-blur"></div>
<div class="content-front container-fluid" style="color: gainsboro">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div style="text-align: center; color: gainsboro;">
<div class="" style="margin-top: 50px">
<h1 class="display-4">留言板</h1>
<p class="lead" style="margin-top: 30px">a place u can record or release sth. </p>
<hr class="my-4" style="background-color: gainsboro">
<form method="post" action="#">
<div class="mb-3" >
<label for="validationTextarea"></label>
<textarea name="message" class="form-control" id="validationTextarea" placeholder="在这里可以写对本网站的意见或建议" style="background-color: transparent;color: gainsboro; margin-top: 19px"></textarea>
<button type="submit" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro; margin-top: 10px">提交</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4" style="margin-top: 20px">
<p>历史留言</p>
<hr class="my-4" style="background-color: gainsboro">
<div style="text-align: center;margin-top: 200px">
<a href="index.html" type="submit" class="btn btn-primary-outline border rounded-pill" style="color: gainsboro; margin-top: 10px">返回首页</a>
</div>
</div>
</div>
</div>适合大多数我的家乡标题的作业，改改其中部分图片以及简洁即可，获取代码关注公众号（coding加油站）领取。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
