HTML5期末大作业：家乡网站设计——我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：家乡网站设计——我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品
作品介绍
一、作品展示
二、文件目录
三、代码实现
五、学习资料
六、更多源码

一、作品展示

二、文件目录

三、代码实现


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我的家乡</title><!--链接bootStrap--><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="css/navigation.css"><!--链接导航条css--><link rel="stylesheet" href="css/commonCSS.css" /><style>
/*************************************************logo背景图***************************************************/body{/*css3中可以指定背景图片的大小,是相对于父元素的宽度和高度的百分比的大小*/background-color: #FFFFF0;margin: 0;padding: 0;background-image: url(img/枫叶.jpg);background-repeat: repeat-x;background-size: 100% 167px;}
/************************************导航条*********************************8***********************/.nav{margin-top:167px ;}#shiping{width:800px;margin: 0 auto;}*, *:before, *:after {box-sizing: border-box;}.content {display: flex;margin: 0 auto;justify-content: center;align-items: center;flex-wrap: wrap;max-width: 1000px;}.heading {width: 100%;margin-left: 1rem;font-weight: 900;font-size: 1.618rem;text-transform: uppercase;letter-spacing: .1ch;line-height: 1;padding-bottom: .5em;margin-bottom: 1rem;position: relative;}.heading:after {display: block;content: '';position: absolute;width: 60px;height: 4px;background: linear-gradient(135deg, #1a9be6, #1a57e6);bottom: 0;}.description {/*???*/width: 100%;margin-top: 0;margin-left: 1rem;margin-bottom: 3rem;}.card {color: inherit;cursor: pointer;width: calc(33% - 2rem);min-width: calc(33% - 2rem);height: 400px;min-height: 400px;perspective: 1000px;margin: 1rem;position: relative;}@media screen and (max-width: 800px) {.card {width: calc(50% - 2rem);}}@media screen and (max-width: 500px) {.card {width: 100%;}}.front,.back {display: flex;border-radius: 6px;background-position: center;background-size: cover;text-align: center;justify-content: center;align-items: center;position: absolute;height: 100%;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;transform-style: preserve-3d;transition: ease-in-out 600ms;}.front {background-size: cover;padding: 2rem;font-size: 1.618rem;font-weight: 600;color: #fff;overflow: hidden;font-family: Poppins, sans-serif;}.front:before {position: absolute;display: block;content: '';top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, #1a9be6, #1a57e6);opacity: .25;z-index: -1;}.card:hover .front {transform: rotateY(180deg);}.card:nth-child(even):hover .front {transform: rotateY(-180deg);}.back {background: #fff;transform: rotateY(-180deg);padding: 0 2em;}.card:hover .back {transform: rotateY(0deg);}.card:nth-child(even) .back {transform: rotateY(180deg);}.card:nth-child(even):hover .back {transform: rotateY(0deg);}.button {transform: translateZ(40px);cursor: pointer;-webkit-backface-visibility: hidden;backface-visibility: hidden;font-weight: bold;color: #fff;padding: .5em 1em;border-radius: 100px;font: inherit;background: linear-gradient(135deg, #1a9be6, #1a57e6);border: none;position: relative;transform-style: preserve-3d;transition: 300ms ease;}.button:before {transition: 300ms ease;position: absolute;display: block;content: '';transform: translateZ(-40px);-webkit-backface-visibility: hidden;backface-visibility: hidden;height: calc(100% - 20px);width: calc(100% - 20px);border-radius: 100px;left: 10px;top: 16px;box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);background-color: rgba(26, 87, 230, 0.25);}.button:hover {transform: translateZ(55px);}.button:hover:before {transform: translateZ(-55px);}.button:active {transform: translateZ(20px);}.button:active:before {transform: translateZ(-20px);top: 12px;}div.img a:hover img{border: 1px solid black;}/****************************************鼠标移到到家乡图片上出现边框效果**************************************************/.hometownimg a:hover img{border:2px black  solid;}</style></head>
<body><div class="container">
<!----------------------------------------------------导航条------------------------------------------------------><div class="nav" style="margin-left: -105px; margin-right: -110px;"><a href="index.html#aboutMe" target="_blank" style="float:right;">关于我</a><a href="index.html" class="on">首页<em></em></a><a href="diary.html">生活笔记<em></em></a><a href="hometown.html">我的家乡<em></em></a><a href="tour.html">我的旅游<em></em></a><a href="#">我的爱好<em></em></a><a href="/">技术杂谈<em></em></a></div><!----------------------------------------家乡视频播放----------------------------------------------------------><div id="shiping" style="margin-top: 50px;"><!--controls：向用户显示控件，比如播放按钮。--><video  controls="controls" autoplay="autoplay" loop="loop" style="width: 100%;"><source src="img/Waqrp1081-mobile.mp4"></source><source src=""></source></video></div><!------------------------------------------家乡介绍简单介绍----------------------------------------------------------------------><div class="" style="background-color: #FFFFF0; margin-top: 50px;"><div class=""><div class=""><h2 style="text-align: center;">四川</h2><p style="text-align: center; line-height: 30px;">
&nbsp;&nbsp;&nbsp;&nbsp;四川，简称“川”或“蜀”，是<a href="https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD/106554">中华人民共和国</a>省级行政区。<br/> 省会成都，位于中国西南地区内陆，界于北纬26°03′-34°19′，东经92°21′-108°12′之间，<br>东连<a href="https://baike.baidu.com/item/%E9%87%8D%E5%BA%86/23586?fr=aladdin">重庆</a>，<br/>南邻<a>云南</a>、<a>贵州</a>，<br/>西接西藏，<br>北界陕西、甘肃、青海，<br/>四川省总面积48.6万平方千米。 <br />
&nbsp;&nbsp;&nbsp;&nbsp;四川省地貌东西差异大，地形复杂多样，<br/>位于中国大陆地势三大阶梯中的第一级<a>青藏高原</a>和第二级<a href="https://baike.baidu.com/item/%E9%95%BF%E6%B1%9F%E4%B8%AD%E4%B8%8B%E6%B8%B8%E5%B9%B3%E5%8E%9F/345194">长江中下游平原</a>的过渡地带，<br/>高差悬殊，地势呈西高东低的特点，由山地、丘陵、平原盆地和高原构成。<br/>四川省分属三大气候，分别为，<a>四川盆地</a>中亚热带湿润气候，川西南山地亚热带半湿润气候，川西北高山高原高寒气候。<br />
&nbsp;&nbsp;&nbsp;&nbsp;<br /></p><p><a class="btn btn-primary btn-large" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569?fr=aladdin" style="margin-left: 500px;">详细信息</a></p></div></div></div><!-------------------------------成都美食与文化----------------------------------------------->
<div style="margin-top: 50px;"><h2 style="text-align: center;">成都美食与文化</h2><div  class="hometownimg"   style="margin-left: -20px; margin-right: -20px; margin-top: 30px;"><a href="#"><img src="img/喷火1.jpg"  /></a><a><img src="img/变脸.jpg" style="margin-left:12px; margin-right: -10px;"/></a><a><img src="img/变脸2.jpg"  style="margin-left: 24px;"/></a><a><img src="img/火锅2.jpg" style="margin-top: 15px;"/></a><a><img src="img/串串.jpg" style="margin-top: 15px; margin-left: 12px;"/></a><a><img src="img/血旺.jpg" style="margin-top: 15px; margin-left: 12px;" /></a></div>
</div><!-----------------------------------------------文字描述-----------------------------------------><div class="" style="background-color: #FFFFF0; margin-top: 50px;"><div class=""><div class=""><p style="text-align: center; line-height: 30px;">
川剧是融汇<a>高腔</a>、<a>昆曲</a>、<a>胡琴</a>(即皮黄)、<a>弹戏</a>(即梆子)和四川民间灯戏五种声腔艺术而成的剧种。<br/>流行于四川东中部、重庆及贵州、云南部分地区。<br/> 川剧中展现的绝技丰富多彩，如变脸、托举、开慧眼、藏刀、喷火等，很多传统的技艺至今都令人叹为观止。<br/>川剧脸谱是川剧表演艺术中重要的组成部分，<br/>是历代川剧艺人共同创造并传承下来的艺术瑰宝。<br/>
2006年川剧入选第一批<a>国家级非物质文化遗产</a>名录。<br/>成都作为国家历史文化名城，古蜀<a>文明发祥地</a>，具有<a>“天府之国”</a>的美称。<br/>孕育出了历史悠久、内涵丰富的天府文化，也孕育出了<a>蜀绣</a>、<a>蜀锦</a>、<a>瓷胎竹编</a>、<a>川剧变脸</a>等一大批非遗瑰宝。<br />欢迎大家来成都游玩。</p></div></div></div><!----------------------------------------------------------图片翻转特效-----------------------------------------------><div class="content" style="margin-top: 50px;"><a class="card" href="#!"><div class="front" style="background-image: url(img/迎春花.jpg)"></div><div class="back"><!--背面--><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><!--???--><div class="front" style="background-image: url(img/小花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/梅花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/熊猫.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/梨花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/油菜花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a></div><!-----------------------------------------文字描述------------------------------------------------------------><div class="" style="background-color: #FFFFF0;text-align: center;margin-top: 50px;margin-bottom: 20px;"><div class=""><div class=""><h2>成都</h2><div style="line-height: 30px;"><p>如果说<a>杜牧</a>是扬州的代言人，<a>白居易</a>和<a>苏东坡</a>是杭州的代言人，那么，<a>杜甫</a>毫无疑问是成都的代言人。</p><p>扬州之美，美在月色。</p><p>杭州之美，美在西湖。</p><p>成都之美，美在锦江。</p><p>因为锦江，成都古代称为<a>锦城</a>或<a>锦官城</a>。</p><h2>春夜喜雨</h2><p>(唐) 杜甫</p><p>好雨知时节，当春乃发生。</p><p>随风潜入夜，润物细无声。</p><p>野径云俱黑，江船火独明。</p><p>晓看红湿处，花重<a>锦官城</a>。</p><p><a class="btn btn-primary btn-large" href="https://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473">详细信息</a></p></div></div></div></div><!-------------------------------------分页--------------------------------------------------------------------------------------><div class="row clearfix" style="margin-left: 410px; margin-top: 20px;" ><div class="col-md-12 column" ><ul class="pagination"><li><a href="#">Prev</a></li><li><a href="index.html">1</a></li><li><a href="diary.html">2</a></li><li><a href="hometown.html">3</a></li><li><a href="tour.html">4</a></li><li><a href="#">Next</a></li></ul></div></div><!---------------------------------------------------页脚版权-------------------------------------------------><div class="footer"><p class="p1" style="color: white;">Copyright &copy; 2019年4月21日   郑州航空工业管理学院 智能工程学院  计算机科学与技术专业  胡雪版权所有</p></div></div></body>
<script src="js/bootstrap.js"></script>
</html>

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

六、更多源码

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

html静态页面作业家乡网站设计—我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品相关推荐

web网页设计实例作业 ——我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品
HTML5期末大作业:家乡网站设计--我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
HTML5期末大作业：我的家乡——长治(8页) HTML+CSS+JavaScript 大学生DW网页设计作业成品学生HTML个人网页作业作品下载学生家乡网页设计模板下载
HTML5期末大作业:我的家乡--长治(8页) HTML+CSS+JavaScript 大学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. ...
div+css静态网页设计——千与千寻-电影图文(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业:网页设计作业网站设计--千与千寻-电影图文(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
HTML5期末大作业：电影介绍类型网站设计——《盗梦空间》8页 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕业设计源码
HTML5期末大作业:电影介绍类型网站设计--<盗梦空间>8页 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见 ...
HTML5期末大作业：出行网站设计——西安旅游-高质量(9页) HTML+CSS+JavaScript 学生DW网页设计
HTML5期末大作业:出行网站设计--西安旅游-高质量(9页) HTML+CSS+JavaScript 学生DW网页设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. ...
HTML5期末大作业：女装服装商城网站设计——女装服装商城(11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页
HTML5期末大作业:女装服装商城网站设计--女装服装商城(11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页常见网页设计作业题材有个人. 美食. 公司 ...
HTML5期末大作业：影视在线网站设计——电影网H5(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:影视在线网站设计--电影网H5(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
HTML5期末大作业：电影网站设计——我的电影(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:电影网站设计--我的电影(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码一.作品介绍 1.作品简 ...
HTML5期末大作业：魔域私服网站设计——魔域私服游戏(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html实训大作业
HTML5期末大作业:魔域私服网站设计--魔域私服游戏(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html实训大作业常见网页设计作业题材有个人. 美食. 公司. 学 ...
17HTML5期末大作业：国外影视网站设计——橙色国外电影(13页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:国外影视网站设计--橙色国外电影(13页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...

html静态页面作业家乡网站设计—我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品