如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。
1.网页作品简介 ：
HTML期末大学生网页设计作业，可以替换文字图片满足不同的家乡，根据百度百科的信息来替换就是自己的家乡了
2.知识应用：
在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
3. 内容介绍：
《我的家乡》共有5个页面，分别为
Index.html【首页】
首页主要使用hover来实现一些动画，同时具备响应式功能，添加桌面同学，可以跟着鼠标的移动来转动（可以删除），实现的效果图如下：
核心代码如下：
<div id="all">
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- *** SIDEBAR ***-->
<div id="sidebar" class="col-md-4 col-lg-3 sidebar-offcanvas">
<div class="sidebar-content">
<h1 class="sidebar-heading"> <a href="index.html">曹县 CaoXian</a></h1>
<ul class="sidebar-menu">
<!-- Link-->
<li class="sidebar-item"><a href="index.html" class="sidebar-link active">主页</a></li>
<!-- Link-->
<li class="sidebar-item"><a href="about.html" class="sidebar-link">去旅游</a></li>
<!-- Link-->
<li class="sidebar-item"><a href="contact.html" class="sidebar-link">社区论坛</a></li>
</ul>
<p class="sidebar-p">  曹县，隶属于山东省菏泽市，古称曹州，位于山东省西南部，鲁豫两省八县交界处，南临商丘、民权县，北接菏泽、定陶区，东靠单县、成武县，西濒东明、兰考县；总面积1969平方千米，辖5个街道办事处，22乡镇；</p>
<p class="sidebar-p">  明洪武四年（1371年），降曹州为曹县，后复置曹州，曹县此称沿用至今。曾获得“中国芦笋之乡”、“中国泡桐加工之乡”、“中国食品工业百强县”、“中国平原绿化先进县”、中国首批规模化克隆牛实验基地等荣誉。</p>
<!--
<p class="social"><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" title="" class="external instagram"><i class="fa fa-instagram"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p>
<div class="copyright text-center text-md-left">
<p class="credit">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></p>
</div>
-->
</div>
</div>
<!-- *** SIDEBAR END *** -->
<!-- *** PORTFOLIO ***-->
<div class="col-md-8 col-lg-9 content-column">
<div class="small-navbar d-flex d-md-none">
<button type="button" data-toggle="offcanvas" class="btn btn-outline-primary"> <i class="fa fa-align-left mr-2"></i>Menu</button>
<h1 class="small-navbar-heading"> <a href="index.html">Creative </a></h1>
</div>
<div class="grid row">
<div class="col-md-6 col-lg-3 grid-item">
<div class="box-masonry"> <a href="renwen.html" title="" class="box-masonry-image with-hover-overlay"><img src="img/anyang/wenbo.jpg" alt="" class="img-fluid"></a>
<div class="box-masonry-hover-text-header"> <a href="about.html" class="tile-link"> </a>
<h4>文字博物馆</h4>
<div class="box-masonry-desription">
<p>
  中国文字博物馆位于甲骨文的故乡——河南省曹县市，是经国务院批准建设的集文物保护、陈列展示和科学研究为一体的国家级博物馆，是中华汉字文化的科普中心，全国科普教育基地，爱国主义教育基地。
  中国文字博物馆基本陈列以世界文字为背景，以汉字为主干，以少数民族文字为重要组成部分，荟萃历代中国文字样本精华，讲解中国文字的构形特征和演化历程。展览以详实的资料、严谨的布局、科学的方法和现代化的展示手段充分展示中华民族一脉相承的文字、灿烂的文化和辉煌的文明，同时反映华夏文明与中国语言文字的研究成果，具有普及性和学术性双重使命。
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 grid-item">
<div class="box-masonry"> <a href="renwen.html" title="" class="box-masonry-image with-hover-overlay with-hover-icon"><img src="img/anyang/yuefei.jpg" alt="" class="img-fluid"></a>
<div class="box-masonry-text">
<h4> <a href="detail.html">岳飞</a></h4>
<div class="box-masonry-desription">
<p>岳飞（1103年3月24日—1142年1月27日），字鹏举，相州汤阴（今河南省曹县市汤阴县）人。南宋时期抗金名将、军事家、战略家、民族英雄 、书法家、诗人，位列南宋“中兴四将”之首,著有《满江红》。</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 grid-item">
<div class="box-masonry"> <a href="about.html" title="" class="box-masonry-image with-hover-overlay with-hover-icon"><img src="img/anyang/bianfencai.jpg" alt="" class="img-fluid"></a>
<div class="box-masonry-text">
<h4> <a href="detail.html">扁粉菜</a></h4>
<div class="box-masonry-desription">
<p>
  扁粉菜是 曹县一带的传统名菜，属于豫菜菜系。是曹县居民最爱吃的饭菜之一。 扁粉菜以粉条做主料，配以青菜、豆腐、猪血等，在一口大铁锅中煮。
  扁粉菜的关键是高汤，高汤味道的好坏，直接影响扁粉菜的味道，因此，曹县扁粉菜经营者一直在高汤的做法上下功夫，使扁粉菜味道不断改善。吃扁粉菜的精髓在于辣椒，辣椒要香而微辣。
</p>
</div>
</div>
</div>
</div>about.html【关于界面】
关于界面主要介绍家乡的风景，主要是轮播图的使用，以及地图的使用，通过百度百科可随意更换为你的家乡，如下是效果图：
核心代码如下：
<div id="all">
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- *** SIDEBAR ***-->
<div id="sidebar" class="col-md-4 col-lg-3 sidebar-offcanvas">
<div class="sidebar-content">
<h1 class="sidebar-heading"> <a href="index.html">曹县 Anyang</a></h1>
<ul class="sidebar-menu">
<!-- Link-->
<li class="sidebar-item"><a href="index.html" class="sidebar-link active">主页</a></li>
<!-- Link-->
<li class="sidebar-item"><a href="about.html" class="sidebar-link">去旅游</a></li>
<!-- Link-->
<li class="sidebar-item"><a href="contact.html" class="sidebar-link">社区论坛</a></li>
</ul>
<p class="sidebar-p">  曹县，隶属于山东省菏泽市，古称曹州，位于山东省西南部，鲁豫两省八县交界处，南临商丘、民权县，北接菏泽、定陶区，东靠单县、成武县，西濒东明、兰考县；总面积1969平方千米，辖5个街道办事处，22乡镇；</p>
<p class="sidebar-p">  明洪武四年（1371年），降曹州为曹县，后复置曹州，曹县此称沿用至今。曾获得“中国芦笋之乡”、“中国泡桐加工之乡”、“中国食品工业百强县”、“中国平原绿化先进县”、中国首批规模化克隆牛实验基地等荣誉。</p>
<!--
<p class="social"><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" title="" class="external instagram"><i class="fa fa-instagram"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p>
<div class="copyright text-center text-md-left">
<p class="credit">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></p>
</div>
-->
</div>
</div>
<!-- *** SIDEBAR END *** -->
<!-- *** DETAIL ***-->
<div class="col-md-8 col-lg-9 content-column white-background">
<div class="small-navbar d-flex d-md-none">
<button type="button" data-toggle="offcanvas" class="btn btn-outline-primary"> <i class="fa fa-align-left mr-2"></i>Menu</button>
<h1 class="small-navbar-heading"> <a href="index.html">Creative </a></h1>
</div>
<div class="row">
<div class="col-xl-10">
<div class="content-column-content">
<h1>去旅游</h1>
<hr />
<h3>部分景点</h3>
<div>
<div>
<div id="container">
<div id="list" style="left: -1000px;">
<img src="img/anyang/01.jpg" alt="">
<img src="img/anyang/02.jpg" alt="">
<img src="img/anyang/03.jpg" alt="">
<img src="img/anyang/04.jpg" alt="">
<img src="img/anyang/05.jpg" alt="">
<img src="img/anyang/01.jpg" alt="">
<img src="img/anyang/02.jpg" alt="">
<img src="img/anyang/03.jpg" alt="">
<img src="img/anyang/04.jpg" alt="">
<img src="img/anyang/05.jpg" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<em id="prev" class="arrow"><</em>
<em id="next" class="arrow">></em>
</div>
<hr />
<div>
<p>  曹县，隶属于山东省菏泽市，古称曹州，位于山东省西南部，鲁豫两省八县交界处，南临商丘、民权县，北接菏泽、定陶区，东靠单县、成武县，西濒东明、兰考县；总面积1969平方千米，辖5个街道办事处，22乡镇； [39] 根据第七次人口普查数据，截至2020年11月1日零时，曹县常住人口为1384282人。 [47]
明洪武四年（1371年），降曹州为曹县，后复置曹州，曹县此称沿用至今。曾获得“中国芦笋之乡”、“中国泡桐加工之乡”、“中国食品工业百强县”、“中国平原绿化先进县”、中国首批规模化克隆牛实验基地等荣誉。历史上先后涌现了商朝宰相伊尹、战国时期军事家吴起、汉朝农学家氾胜之等一批杰出人物。
曹县是山东省直接管理县（市）财政体制改革试点 [1] ，国务院批准的对外开放县；是东部企业向中西部地区梯次转移的桥头堡和承接带，中原经济区东部县市之一。</p>
</div>
<hr />
<div>
<h3>地图康康在哪</h3>
<iframe src="./map.html" width=100% height=600px frameborder="0"></iframe>
</div>
<div><hr /><h3>(MORE TODO)<h3></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>renwen.html【人文界面】
人文界面主要介绍家乡的人文方面的信息，如下是效果图：
核心代码如下：
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code { font-size: inherit; }
h2 tt, h2 code { font-size: inherit; }
h3 tt, h3 code { font-size: inherit; }
h4 tt, h4 code { font-size: inherit; }
h5 tt, h5 code { font-size: inherit; }
h6 tt, h6 code { font-size: inherit; }
h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid rgb(238, 238, 238); }
h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid rgb(238, 238, 238); }
h3 { font-size: 1.5em; line-height: 1.43; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { border-left: 4px solid rgb(223, 226, 229); padding: 0px 15px; color: rgb(119, 119, 119); }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }
table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; text-align: left; margin: 0px; padding: 6px 13px; }
table tr td { border: 1px solid rgb(223, 226, 229); text-align: left; margin: 0px; padding: 6px 13px; }
table tr th:first-child, table tr td:first-child { margin-top: 0px; }
table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }
.CodeMirror-lines { padding-left: 4px; }
.code-tooltip { box-shadow: rgba(0, 28, 36, 0.3) 0px 1px 1px 0px; border-top: 1px solid rgb(238, 242, 242); }
.md-fences, code, tt { border: 1px solid rgb(231, 234, 237); background-color: rgb(248, 248, 248); border-radius: 3px; padding: 2px 4px 0px; font-size: 0.9em; }
code { background-color: rgb(243, 244, 244); padding: 0px 2px; }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; }
.md-task-list-item > input { margin-left: -1.3em; }
@media print {
html { font-size: 13px; }
table, pre { break-inside: avoid; }
pre { word-wrap: break-word; }
}
.md-fences { background-color: rgb(248, 248, 248); }
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
.md-mathjax-midline { background: rgb(250, 250, 250); }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
.md-tag { color: rgb(167, 167, 167); opacity: 1; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
.sidebar-tabs { border-bottom: none; }
#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }
#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
.md-lang { color: rgb(180, 101, 77); }
.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }
#md-notification .btn { border: 0px; }
.dropdown-menu .divider { border-color: rgb(229, 229, 229); }
.typora-export li, .typora-export p, .typora-export, .footnote-line {white-space: normal;}
</style>
<div class='typora-export os-windows' >
<div id='write' class = 'is-node'>
<h3><a name='header-n0' class='md-header-anchor '></a>文字博物馆</h3><hr /><p><img src='md/md_pic/wenbo.jpg'></img></p><p><span> </span>中国文字博物馆位于甲骨文的故乡——河南省曹县市，是经国务院批准建设的集文物保护、陈列展示和科学研究为一体的国家级博物馆，是中华汉字文化的科普中心，全国科普教育基地，爱国主义教育基地。</p><p>中国文字博物馆基本陈列以世界文字为背景，以汉字为主干，以少数民族文字为重要组成部分，荟萃历代中国文字样本精华，讲解中国文字的构形特征和演化历程。展览以详实的资料、严谨的布局、科学的方法和现代化的展示手段充分展示中华民族一脉相承的文字、灿烂的文化和辉煌的文明，同时反映华夏文明与中国语言文字的研究成果，具有普及性和学术性双重使命。 </p><p>中国文字博物馆分两期建设，已于2009年11月16日建成开馆的一期工程占地81亩，建筑面积22700平方米，包括主体馆、字坊、广场等。已开工建设的续建工程占地175亩，建筑面积68300平方米，包括文字文化研究交流中心和文字文化演绎体验中心等。</p><p> 续建工程完成后，中国文字博物馆将成为功能完善、面向国内外开放的知识型、信息型博物馆，成为向全世界展示中华文化的窗口和国际性文化交流平台。</p>
<h4><a name='header-n13' class='md-header-anchor '></a>馆藏文物</h4><hr />
<h5><a name='header-n21' class='md-header-anchor '></a>卜甲</h5><p><img src="md/md_pic/bujia.jpg"></p><p><span> </span>古代占卜用的龟甲。多用龟腹甲，也有用背甲的。先钻凿、再火灼。据灼烧之裂纹推测吉凶，决定行止。刻上卜辞、验辞等内容。现见卜甲多出土于殷墟，郑州商代遗址、周原西周遗址中也有发现。该文物出土于殷墟花园庄东。殷墟花园庄东地甲骨，是中国社会科学院考古研究所于1991年秋在殷墟花园庄村东H3发掘的。该甲骨坑距花园庄村100余米，坑口距地表1.2米，近长方形。坑长2米、宽1米、深2.5米，保存完整。坑中出土甲骨1583片，其中有字甲骨为689片，以大片和完整的居多。这是继1936年小屯村东北地YH127坑甲骨、1973年小屯南地甲骨发现以来，殷墟甲骨文的第三次重大发现，备受学术界关注，被评为1991年全国考古十大发现之一。</p><p> </p>
<h5><a name='header-n32' class='md-header-anchor '></a>贾伯壶</h5><p><img src="md/md_pic/jiabohu.jpg"></p><p> 2012年11月16日上午，中国文字博物馆隆重举行开馆三周年国宝“贾伯壶”首展揭幕仪式。中国文字博物馆开馆三年以来，在上级文物主管部门的重视指导下，在社会各界的鼎力支持下，始终将文物征集工作做为立馆根本，重中之重，常抓不懈，并取得了可喜的成绩。尤其西周重器贾伯壶的征集入藏是开馆至今征集到馆的最为珍贵的文物，是我馆文物征集工作进程中的一个重要里程碑，其入藏充实了我馆馆藏，填补了我馆没有成对青铜壶的空白。</p><p> </p><hr /><p> </p>
<h3><a name='header-n46' class='md-header-anchor '></a>殷墟</h3><hr /><p><span> </span>殷墟，位于中国历史文化名城——曹县市的西北郊，横跨洹河南北两岸。古称“北蒙”，甲骨文卜辞中又称为“大邑商”、“邑商”，是中国商代晚期的都城，也是中国历史上第一个有文献可考、并为甲骨文和考古发掘所证实的古代都城遗址，距今已有3300年的历史。 </p><hr />
<h5><a name='header-n54' class='md-header-anchor '></a>司母戊鼎</h5><p><img src="md/md_pic/simuwuding.jpg" /></p><p><span> </span>商代是中国青铜时代的第二个王朝，与世界上的其他文明古国相比较，殷墟的青铜文化有着鲜明的中国特色，以青铜礼器为基础，发展成为一套以等级为核心的礼制制度，在中国延续了数千年，这在世界青铜文明中是绝无仅有的，体现出独特的东方色彩。殷墟出土青铜器种类繁多，器形厚重，纹饰繁缛，铸造工艺高超，达到了前所未有的水平。其中尤以王陵遗址出土的司母戊大鼎最负盛名，大鼎高达133厘米，器口长79.2厘米，重量达875公斤，它是至今世界上发现最大的青铜器，代表了中国古代青铜文化的最高水平。原件现藏中国国家博物馆，此鼎造型庞大雄浑，纹饰精美细腻，通体以雷纹为底纹，饕餮纹、夔纹为主体装饰，给人以稳重、庄严而又神秘的感觉，是古代科技与艺术、雕塑与绘画的完美结合，是中国青铜器文化中的瑰宝，美术史上的璀璨明珠。</p><hr />
<h3><a name='header-n64' class='md-header-anchor '></a>(MORE TODO)</h3><p> </p></div>
</div>contact.html【留言界面】
留言界面可以在没有后端的支持下自由留言，通过这个可以学习前端状态的保存，这里通过localStorage保存信息到本地
效果图如下：
适合大多数我的家乡标题的作业，通过百度百科的简介修改，即可完成该作业，获取代码关注公众号（coding加油站）领取。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
