如下代码供学习交流，获取完整代码，请关注公众号（coding加油站） 获取。
1.网页作品简介 ：
HTML期末大学生网页设计作业，可以替换文字图片满足不同的家乡，根据百度百科的信息来替换就是自己的家乡了
2.知识应用：
在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
3. 内容介绍：
《我的家乡》共有5个页面，分别为
Index.html【首页】
首页主要使用hover来实现一些动画，主要是轮播图的使用（没有使用插件，适合学习轮播图的原理），以及常用布局的使用，效果图如下：
全部代码：
<!DOCTYPE html><html><head>
<title>汕尾游</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="./js/index.js"></script>
</head>
<body>
<div class="header">
<div class="wrap">
<div class="logo">
<a href="index.html"><img src="images/logo.png" title="logo" /></a>
</div>
<div class="top-nav">
<ul>
<li class="active"><a href="index.html">主 页</a></li>
<li><a href="scenic.html">景 点</a></li>
<li><a href="cate.html">美 食</a></li>
<li><a href="gewu.html">歌 舞</a></li>
<li><a href="video.html">更 多</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="container">
<div id="list" style="left: -600px;">
<img class="img" src="images/4s.jpg" alt="4">
<img class="img" src="images/1f.jpg" alt="1">
<img class="img" src="images/2h.jpg" alt="2">
<img class="img" src="images/3r.jpg" alt="3">
<img class="img" src="images/4s.jpg" alt="4">
<img class="img" src="images/1f.jpg" alt="1">
<div class="mask"></div>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"></a>
<a href="javascript:;" id="next" class="arrow"></a>
</div>
<div class="clear"> </div>
<div class="content">
<div class="content_top">
<div class="wrap">
<h1><a href="video.html">汕尾市</a></h1>
<p>位于广东省东南部，是一座沿海城市，渔业发达，水产丰富。气候条件温和，冬暖夏凉。这座城市有着悠久的历史文化，据东南沿海出土文物考证，最早在新石器时代就有先民在此渔猎种植，生息繁衍。汕尾是闽南文化、潮汕文化、客家文化、广府文化交汇地，有正字戏、西秦戏、白字戏等3大稀有剧种。在饮食上，汕尾市传统小吃品种众多且家喻户晓、远近闻名，比如牛肉饼、冬节鸽、猪肠粉、、菜茶、咸茶、扁食等等。在近代，汕尾是一片红色故土、革命老区。是全国十三块红色革命根据地之一，中国第一个县级苏维埃政权诞生地。全市4个县（市、区）均为一类革命老区县，有着极为浓厚的红色气息。</p>
</div>
</div>
<div class="content-grids">
<div class="content-grid">
<img class="pic" src="images/map.gif" title="汕尾地图" />
<h2 class="text">地理位置</h2>
<p>汕尾市，位于广东省东南部沿海，东临揭阳市，同惠来县交界；西连惠州市，与惠东县接壤；北接河源市，和紫金县相连；南濒南海。下辖城区、海丰县、陆河县，代管陆丰市。</p>
</div>
<div class="content-grid">
<img src="images/jiaot.jpg" title="交通运输" />
<h2 class="text">交通运输</h2>
<p>国家高速公路G15沈海高速公路即深汕高速公路贯穿市域东西。厦深铁路汕尾段共设有陆丰站，汕尾站，鲘门站。这是汕尾历史上首条铁路。城内有多条公交车路线。</p>
</div>
<div class="content-grid con-grid">
<img src="images/pengp.jpg" title="名人事迹" />
<h2 class="text">名人事迹</h2>
<p>汕尾是许多名人伟人的故乡，其就包括彭湃，中国无产阶级革命家，中国农民运动大王。党早期农民运动领导人之一。彭士禄，海丰人，核动力专家，彭湃之子，第一完成人获“国家科技进步特等奖”。</p>
</div>
<div class="clear"> </div>
<div class="imgrid">
<div class="content-heading">
<h3>旅 游 攻 略</h3>
</div>
<div class="content-grid">
<a href="scenic.html">
<img class="pic" src="images/xuanw.jpg" title="旅游景点" />
<h1 class="text">旅游景点</h1>
</a>
<p>汕尾市有着许多风景优美的景点，包括汕尾凤山祖庙旅游区、红海湾旅游区、莲花山旅游风景区、海丰红宫红场、陆丰金厢滩滨海景区、陆河绿色生态走廊景区、陆河神象山公园、陆丰清云山景区、陆河瑞龙庄园。</p>
</div>
<div class="content-grid">
<a href="cate.html">
<img src="images/xioac.jpg" title="美味小吃" />
<h1 class="text">美味小吃</h1>
</a>
<p>民以食为天，汕尾的美食小吃丰富多样，传统小吃更是家喻户晓、远近闻名，比如小米、牛肉饼、菜粿（菜包粿）、韭菜饺、冬节鸽、猪肠粉、层糕粿、菜茶、咸茶、扁食等等。</p>
</div>
<div class="content-grid con-grid">
<a href="gewu.html">
<img src="images/qilw.jpg" title="歌舞文化" />
<h1 class="text">歌舞文化</h1>
</a>
<p>汕汕尾是闽南文化、潮汕文化、客家文化、广府文化交汇地，有正字戏、西秦戏、白字戏等3大稀有剧种，另外还有汕尾渔歌、海丰麒麟舞、钱鼓舞、河田高景、陆丰甲子英歌舞、汕尾滚地金龙等文化。</p>
</div><div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="footer">
<div class="footer-heading"></div>
<div class="footer-grid">
你的学校 你的班级
</div>
</div>
</body></html>scenic.html【景点页】
景点页主要介绍家乡的景点，使用锚点技术实现跳转，同时增加多个轮播图效果，效果图如下：
核心代码：
<div class="scenic-heading">
<h3>风 景 名 胜</h3>
</div>
<div class="scenic-content">
<div class="scrnic-menu">
<ul>
<li class="bsolid"><a href="#">顶部</a></li>
<li class="bsolid"><a href="#pic">红宫红场</a></li>
<li class="bsolid"><a href="#pic1">凤山妈祖</a></li>
<li class="bsolid"><a href="#pic2">莲花山</a></li>
<li><a href="#pic3">红海湾</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="scenic-right">
<div class="box">
<p id="num" class="num">1/5</p>
<form><img src="images/h1.jpg" id="pic">
<input type="button" value="上一张" id="forward">
<input type="button" value="下一张" id="next0">
</form>
</div>
<p class="scenic-text"><span>红宫</span>位于海丰县红宫红场旧址，原为明代学宫，建于明洪武十二年，由南海丰知县郑源所建。红宫现存面积1850平方米，主要建筑有棂星门、泮桥泮池、大成门、大成殿和配殿。1927年，海丰人民在彭湃的领导下举行了第三次武装起义，武装夺取政权。同年11月在这里召开了海丰全县工农兵代表大会，大会会场四周都刷以红色，场内则用红布覆盖墙壁，代表红色政权，从此改称“红宫”。
</p>
<div class="box">
<p id="num1" class="num">1/5</p>
<form><img src="images/f1.jpg" id="pic1">
<input type="button" value="上一张" id="forward1">
<input type="button" value="下一张" id="next1">
</form>
</div>
<p class="scenic-text"><span>凤山祖庙</span>旅游区位于汕尾市区东南面，是粤东旅游黄金海岸的主要景点。凤山虽不高，但以形似一凤凰展翅而得名。凤仪台妈祖石像高达16.83米，由468块来自妈祖家乡的优质花岗岩石雕刻而成，是中国目前最大型的妈祖艺术石雕像。站在凤仪台，汕尾市区“三山一湖”湖光山色尽收眼底，远望汕尾港舟楫如梭，水天一色。凤山妈祖庙正殿是旅游区的主要建筑，正殿为三进二院布局，面阔三间，风火式山墙，硬山顶，称为“双星抱印，龙虎相护”，属正三山传统庙宇建筑。还有着妈祖圣迹馆、天后阁、渔家风情馆、妈祖文化广场等壮丽风光。
</p>
<div class="box">
<p id="num2" class="num">1/5</p>
<form><img src="images/l1.jpg" id="pic2">
<input type="button" value="上一张" id="forward2">
<input type="button" value="下一张" id="next2">
</form>
</div>
<p class="scenic-text"><span>汕尾莲花山森林公园</span>位于广东省汕尾市海丰县北部7公里处，主峰海拔1337.3米，汕尾市八景之一，为粤东沿海第一高峰，状如一朵盛开的莲花，故名莲花山。开发有莲花山公园。森林公园方圆8万亩，其间崇山峻岭，峰峦叠秀，峰奇石异，林青水绿，鸟语花香，景色宜人。至于海拔1336米的莲花山脉主峰，更是游人登高赏景之佳处。这个风景区以鸡鸣寺为中心，在5公里的半径范围内，有金鸡报晓、玉龙喷须、如来盘石、三井回音等10多处名胜古迹。再往西侧有五马归槽、浦仔温泉；再往东即有水库烟波、猕猴奇石、湾廊温泉；再往北便有红军石室、三坑汇水；再往南尚有把水神宫等。
</p>
<div class="box">
<p id="num3" class="num">1/5</p>
<form><img src="images/w1.jpg" id="pic3">
<input type="button" value="上一张" id="forward3">
<input type="button" value="下一张" id="next3">
</form>
</div>
<p class="scenic-textf"><span>红海湾</span>即汕尾红海湾遮浪半岛旅游区，位于汕尾市区以东18公里处，湾内有多处洁白柔软的沙滩，还有神秘岛、龟龄岛等数个秀丽的岛屿。距汕尾市区约30公里的遮浪半岛现已建成红海湾滨海旅游度假区，岛上有海上运动俱乐部，是著名的帆船帆板赛场。夏天旅游必到之处。
</p>
</div>
</div>cate.html【美食页】
美食页主要介绍家乡美食，符合我的家乡的场景主题设置，为简单html中的布局，效果图如下：
核心代码：
<div class="catef">
<div class="cate-text"><p>TOP 1</p>肠粉： 用米浆蒸熟后形成的皮，再自主选择加入什么肉类，有牛肉、猪肉、海鲜，一般猪肉是最普遍的，配菜有白菜，笋丝，生菜，一般白菜最常搭配。再加入每家店都有着不同口味的酱汁，有蚝油、芝麻酱，一般芝麻酱居多，一些传统老店的自制酱汁配上白嫩嫩的肠粉，更是视觉和味觉上的双重享受。</div>
<img src="images/changf.jpg" title="肠粉">
<div class="clear"> </div>
</div>
<div class="catef">
<div class="cate-text"><p>TOP 2</p>卤味： 卤味之中有卤鹅、卤鸭、卤猪脚、卤五花肉、卤鸡脚等等，卤味在汕尾也是不同店有着不同口味，但大体上都有一个卤汁的香味，另外有的偏甜，有的偏咸香,一些店家只做卤味，而有一些店家是做卤肉饭，当一勺卤汁淋在米饭上，配上卤肉，美味至极。</div>
<img src="images/luwei.jpg" title="卤味">
<div class="clear"> </div>
</div>
<div class="catef">
<div class="cate-text"><p>TOP 3</p>蚝烙： 准备新鲜的生蚝加上鸡蛋和葱花以及地瓜粉，葱切末，鸡蛋搅散加入生蚝肉、葱花、盐、鸡精搅拌均匀。锅中倒油，猪油都要用本地猪的鬃头肉煎出来的猪油，倒入蛋液，煎至两面金黄即可出锅。具有特别鲜美的蚝香味，口感酥而不硬，脆而不软。</div>
<img src="images/hao.jpg" title="蚝烙">
<div class="clear"> </div>
</div>
<div class="catef">
<div class="cate-text"><p>TOP 4</p>菜包粿： 从前，到了农历的大年三十，家家户户都做了招待客人，由此祝愿一年四季五谷丰登，菜包粿现在已经成为海丰地区街头巷尾常见的一种小吃，通常用作午餐。皮用生粉开水和成，馅料可用当季蔬菜、猪肉、鱿鱼、虾米、花生等。包成长条的形状，蒸熟，皮软糯馅咸香。</div>
<img src="images/xioac.jpg" title="菜包粿">
<div class="clear"> </div>
</div>
<div class="catef">
<div class="cate-text"><p>TOP 5</p>萝卜丸： 又名菜头丸， 用煎炒而成，在现在的潮汕三市与 汕尾市等地区的早点、油炸摊都有售卖、是逢年过节家家必备的食品。主料是萝卜丝和虾米以及面粉，外表晶莹剔透，极富弹性和嚼劲，味道也清甜甘香，有祛火除痰，消食开胃的功效。</div>
<img src="images/caitou.jpg" title="萝卜丸">
<div class="clear"> </div>
</div>
<div class="catet">
<div class="cate-text"><p>TOP 6</p>擂茶：是汕尾的午餐特色！当地人每家每户都会做，当地也有一些咸茶铺。 擂茶做法很费时，先把黑芝麻去壳，用手在牙钵里转圈，再用水过滤！接着再把花生用擂槌（很沉的石槌）磨碎，冲入水，过滤渣再和各类的青草磨碎，滤渣煮水。通常还会再炒一个香菜，或荷兰豆或丝瓜，搭配上炒米。</div>
<img src="images/leic.jpg" title="擂茶">
<div class="clear"> </div>
</div>
</div>gewu.html【歌舞界面】
歌舞界面主要是展示的家乡中的歌舞等风俗文化，可以修改为相关的家乡的风俗，效果图如下：
核心代码：
<div class="gewu-content">
<div class="gewuf">
<div class="gewu-text gewu-right"><span>正字戏 </span>本名正音戏，用中州官话唱念，是一个多声腔的古老稀有剧种。正字戏表演风格古朴、气魄宏大，特别擅长连台本戏。正字戏设12个行当，以正音曲和昆腔为主要声腔，分文戏和武戏。文戏的唱腔比较古老，以曲牌体的正音曲（大板曲）、唱牌子（即昆腔）为主，杂以乱弹、小调等。正音曲受弋阳腔、余姚腔、青阳腔、四平腔等四种腔调影响，一唱众和，多滚白、滚唱。武戏以做工尤其是打斗为主，没有或少有唱腔，分为大传戏、小传戏、本头和锦出四类。正字戏的昆腔，可以因剧目的同一首曲牌在不同角色的演唱中，以及在不同剧目或同一剧目的不同场次中，形成不同的情境。2006年5月20日，正字戏经中华人民共和国国务院批准列入第一批国家级非物质文化遗产名录。</div>
<img src="images/zxi.jpg" title="正字戏" class="gewu-left">
<div class="clear"> </div>
</div>
<div class="gewuf">
<div class="gewu-text gewu-left"><span>汕尾滚地金龙 </span>是一种广东省汕尾市民间舞蹈 [1] ，属于龙舞的一种，适合在节日喜庆场合表演，2006年5月被国家批准为非物质文化遗产。汕尾滚地金表情丰富、套路众多、舞段精彩、技艺兼善是这个舞蹈的基本特点。滚地金龙体现了龙能刚能柔，善静善动，能显能藏，自强不息的积极进取精神。“滚地金龙”始创于南宋，明嘉靖年间，黄氏光昭公一支从福建漳州移居广东陆丰大安镇南溪村，带来《滚地金龙演史传》的传本。</div>
<img src="images/long.jpg" title="汕尾滚地金龙" class="gewu-right">
<div class="clear"> </div>
</div>
<div class="gewuf">
<div class="gewu-text gewu-right"><span>独角麒麟舞 </span>至今为止还保留传统的表演方式，通常以农村的晒场、空地为表演场所，由一人舞动麒麟头、一人牵动麒麟尾。在大鼓、大锣、大镲、大唢呐的伴奏下，开始舞动麒麟，先朝天参拜三下（一拜天，祝风调雨顺，二拜地，祝五谷丰登，三拜人，祝健康平安），接着绕圆场和朝场地四个角落觅食，此时唢呐吹奏《吃四门》，然后在场地中间舞弄，表演出打滚、舐脚、洗须、咬骚等风趣动作及喜怒哀乐的情绪。</div>
<img src="images/qlinwu.jpg" title="独角麒麟舞" class="gewu-left">
<div class="clear"> </div>
</div>
<div class="gewuf">
<div class="gewu-text gewu-left"><span>英歌舞 </span>是汉族独具男子群体舞风采的3种民间舞蹈之一，它以人物为主题，以《水浒传》中梁山泊英雄大破大名府，营救卢俊义故事为内容的群众性广场情景舞，是一种把武术、舞蹈、戏剧融为一体的民间娱乐形式。被认为具有驱鬼神、镇邪恶、保平安、求福祉的作用，每逢春节、元宵、游神赛会等日子各地纷纷组织英歌舞排练及表演，已成为人们节日生活休闲娱乐健身的一种方式。</div>
<img src="images/jiazi.jpg" title="英歌舞" class="gewu-right">
<div class="clear"> </div>
</div>
</div>适合大多数我的家乡标题的作业，通过百度百科的简介修改，即可完成该作业， 获取代码关注公众号（coding加油站） 领取。
