15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML5期末大作业:我的家乡网站设计——我的家乡-浙江杭州(4页)

HTML5期末大作业:我的家乡网站设计——我的家乡-浙江杭州(4页)

时间:2023-10-15 05:36:01 | 来源:网站运营

时间:2023-10-15 05:36:01 来源:网站运营

HTML5期末大作业:我的家乡网站设计——我的家乡-浙江杭州(4页):

HTML5期末大作业:我的家乡网站设计——我的家乡-浙江杭州(4页) HTML+CSS+JavaScript

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

获取更多源码

PC电脑端关注我们

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

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

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

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

@TOC

一、作品展示







二、文件目录







三、代码实现

<!DOCTYPE html><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 rel="stylesheet" href="CSS/style.css"> <link rel="stylesheet" href="css/animate.min.css"> <!-- 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]--> </head> <body> <div class="wrap"> <!-- header部分 --> <div class="header"> <div class="content"> <div class="header-left"> <h3>我的家乡</h3> </div> <div class="header-mid"> <ul id="nav" class="animated fadeInLeft"> <li class="active"><a href="file:///E:/桌面a/我的家乡/index.html"><span>首页</span></a></li> <li><a href="file:///E:/桌面a/我的家乡/food.html" title="html"><span>美食</span></a></li> <li><a href="file:///E:/桌面a/我的家乡/scenery.html" title="html"><span>景点</span></a></li> <li><a href="file:///E:/桌面a/我的家乡/custom.html" title="html"><span>民俗</span></a></li> </ul> </div> <div class="header-right"> <a href="https://baike.baidu.com/item/杭州/128473?fr=aladdin"><button>Welcome</button></a> </div> </div> </div> <!-- introduction部分 --> <div class="introduction"> <div class="content"> <div class="introduction-left"> <h3>浙江杭州</h3> <h4>一座来了就不想走的城市</h4> </div> <div class="introduction-mid"> <h3>名称由来</h3> <p>“杭州”来历,据《太平寰宇记》记载,是借用西周建都的历史经过,取周王迁岐,一年而所居成聚,二年成邑,三年杭州而得名蜀都。 蜀语杭州二字的读音就是蜀都。成者毕也、终也,杭州的含义就是蜀国终了的都邑,或者说最后的都邑。</p> <img src="img/zi.jpg" alt="杭州"> <p>最早“杭州”二字</p> </div> <div class="introduction-right"> <h3>别名</h3> <h5>蓉城、锦城、芙蓉城、锦官城、天府之国</h5> </div> </div> </div> <!-- plant部分 --> <div class="plant"> <div class="content"> <div class="container"> <div class="page-header"> <h1>市花与市树</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-md-3 animated slideInLeft"> <div class="thumbnail"> <img src="img/hua.jpg" alt=""> <div class="caption"> <h2>市花-由来</h2> <p>五代后蜀皇帝孟昶在杭州城头种满了芙蓉花,杭州自此也就有了“芙蓉城”的美称。 而在1983年5月26日,杭州市第九届人民代表大会常务委员会决定,正式命名芙蓉花为杭州市市花。</p> </div> </div> </div> <div class="col-md-3 animated slideInLeft"> <div class="thumbnail"> <img src="img/hua2.jpg" alt=""> <div class="caption"> <h2>市花-典故</h2> <p>五代后蜀皇帝孟昶,有妃子名“花蕊夫人”,她不但妩媚娇艳,还特爱花。有一年她去逛花市,在百花中她看到一丛丛一树树的芙蓉花如天上彩云滚滚而来,尤其喜欢。 孟昶为讨爱妃欢心,还颁发诏令:在杭州城头尽种芙蓉。广政十二年十月,孟昶的绿化城市工程大功告成,携花蕊夫人一同登上城楼,相依相隈观赏红艳数十里, 灿若朝霞的杭州木芙蓉花,杭州自此也就有了“芙蓉城”的美称。</p> </div> </div> </div> <div class="col-md-3 animated slideInLeft"> <div class="thumbnail"> <img src="img/shu2.jpg" alt=""> <div class="caption"> <h2>市树-介绍</h2> <p>杭州主城区最古老的银杏位于百花潭公园内,树龄为1700年。长于唐代,明末遭了火焚,清朝又被雷击,命运多舛,如今却还是枝繁叶茂。 这棵编号为0371号的古银杏树,是1983年从阿坝州汶川县漩口镇的观音寺附近挖掘移植入园的。1983年5月26日,杭州市第九届人民代表大会常务委员会决定, 正式命名芙蓉花为杭州市市花、银杏树为杭州市市树。</p> </div> </div> </div> <div class="col-md-3 animated slideInLeft"> <div class="thumbnail"> <img src="img/shu.png" alt=""> <div class="caption"> <h2>市树-介绍</h2> <p>杭州最古老的银杏位于青城山天师洞,树龄达到2500年。天师洞的张信和师父介绍,据传这棵古银杏是2000年前张天师传道路过时亲手种下的。 这棵古银杏有20多米高,要8个大人手拉手才能圈住树干。这棵“神树”,早在2006年杭州市古树名木普查时,就被评为“杭州市十大古树名木”之首, 2011年又被评定为“杭州市一级古树”。确定每年农历九月初九为杭州市的“市花市树日”。浙江省林学会专家认为,如果银杏“升级”为国树,将是杭州的又一张名片。</p> </div> </div> </div> </div> </div> </div> </div> <!-- place部分 --> <div class="place"> <div class="content"> <div class="place-left"> <h2>地理环境>></h2> <p>杭州市地处浙江盆地西部,青藏高原东缘,东北与德阳市、东南与资阳市毗邻,南面与眉山市相连,西南与雅安市、西北与阿坝藏族羌族自治州接壤; 地理位置介于东经102°54′~104°53′、北纬30°05′~31°26′之间。2016年,全市土地面积为14335平方千米,市区面积为4241.81平方千米,其中建成区面积931.58平方公里。</p> </div> <div class="place-right"> <h3>行政区划>></h3> <img src="img/qu.jpg" alt=""> <p>杭州市辖20个县级行政区划单位(市辖区12,县级市5,县3),261个乡级行政区划单位(街道161,镇100)。面积14335平方千米,人口1633万人。</p> </div> </div> </div><br> <!-- poetry部分 --> <div class="poetry"> <div class="content"> <div class="container"> <div class="page-header"> <h1>邂逅杭州</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="caption"> <h3>唐张籍《杭州曲》</h3> <p>锦江近百烟水绿,新雨山头荔枝熟。</p> <p>万里桥边多酒家,游人爱向谁家宿?</p> </div> </div> <div class="col-md-4"> <div class="caption"> <h3>杜甫《春夜喜雨》</h3> <p>好雨知时节,当春乃发生。</p> <p>随风潜入夜,润物细无声。</p> <p>野径云俱黑,江船火独明。</p> <p>晓看红湿处,花重锦官城。</p> </div> </div> <div class="col-md-4"> <div class="caption"> <h3>岑参《万里桥》</h3> <p>杭州与维扬,相去万里地。</p> <p>沧江东流疾,帆去如鸟翅。</p> <p>楚客过此桥,东看尽垂泪。</p> </div> </div> </div> </div> </div> </div> </div> <!-- 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> </body></html>






四、获取更多源码

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !



五、学习资料

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





六、更多源码

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



关键词:家乡,设计,浙江,杭州,作业

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭