HTML5期末大作业:我的家乡网站设计——我的家乡-深圳网站优化推广公司
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(7)

HTML5期末大作业:我的家乡网站设计——我的家乡

发布于2022-12-03 12:26     阅读(910)     评论(0)     点赞(10)     收藏(5)


如下代码供学习交流,获取完整代码,请关注文后二维码(coding加油站)回复家乡免费获取。

1.网页作品简介 :

HTML期末大学生网页设计作业,可以替换文字图片满足不同的家乡

2.知识应用:

在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

3. 内容介绍:

《我的家乡》共有8个页面,分别为

index.html【首页】

该页面引用了超链接、div盒子、浮动、轮播图、视频播放等知识将页面能够醒目的呈现出来,同时提供导航栏,提供底部导航。如下演示图:

核心代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>主页</title>
  8. <link rel="stylesheet" href="../css/Index.css" type="text/css">
  9. <link rel="stylesheet" href="../css/photoC.css" type="text/css">
  10. </head>
  11. <body>
  12. <div id="top">
  13. <img src="../image/chizhouLogo.png" class="img1">
  14. <div id="top-right">
  15. <input type="text" name="search" placeholder="请输入关键字">
  16. <div id="search">搜索</div>
  17. </div>
  18. <div id="top-gov">
  19. <a href="http://www.cj.gov.cn//">昌吉政府官网</a>
  20. &nbsp;&nbsp;&nbsp;&nbsp;
  21. <a href="http://www.weather.com.cn/weather1d/101130401.shtml#input">昌吉天气</a>
  22. </div>
  23. </div>
  24. <hr style="height:10px;border:none;border-top:10px groove rgb(14,
  25. 143, 194);" />
  26. <div id="top2">
  27. <div id="nav">
  28. <ul>
  29. <li><a href="../html/Index.html">首页</a></li>
  30. <li><a href="../html/History.html">历史</a></li>
  31. <li><a href="../html/Culture.html">人文</a></li>
  32. <li><a href="../html/Foods.html">美食</a></li>
  33. <li><a href="../html/Views.html">景点</a></li>
  34. <li><a href="../html/Traffic.html">交通经济</a></li>
  35. <li><a href="../html/Natural.html">自然</a></li>
  36. <li><a href="../html/honor.html">荣誉</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
  41. />
  42. <div id="top1">
  43. <div id="flash">
  44. <img src="../image/view1.jpg" style="display: block">
  45. <img src="../image/view2.jpg">
  46. <img src="../image/view3.jpg">
  47. <img src="../image/view4.jpg">
  48. <img src="../image/view5.jpg">
  49. <ul>
  50. <li class="li_1"></li>
  51. <li></li>
  52. <li></li>
  53. <li></li>
  54. <li></li>
  55. </ul>
  56. <div class="span-r">
  57. <span>></span>
  58. </div>
  59. <div class="span-l">
  60. <span><</span>
  61. </div>
  62. </div>
  63. </div>
  64. <hr style="height:1px;border:none;border-top:1px dashed
  65. goldenrod;" />
  66. <div id="center">
  67. <p>
  68. <img src="../image/mark.png" width="20px"
  69. height="20px">
  70. 昌吉,取“昌盛吉祥”之意。昌吉回族自治州成立于1954年,州域总面积7.39万平方公里,总人口1613585人(不包括五家渠市),生活着汉族、回族、维吾尔族、哈萨克族等42个民族,全州辖5县(玛纳斯县、呼图壁县、吉木萨尔县、奇台县、木垒哈萨克自治县)、2市(昌吉市、阜康市)、3个国家级园区(新疆准东经济技术开发区、昌吉高新技术产业开发区、昌吉国家农业科技园区)。驻有新疆生产建设兵团第六师和第八师部分团场21个。
  71. </p>
  72. <p>
  73. <img src="../image/mark.png" width="20px"
  74. height="20px">
  75. 区位优势明显。昌吉州从东西北三面环抱首府乌鲁木齐市,地处天山北坡经济带和乌昌石城市群率先发展的核心区域,是建设新疆丝绸之路经济带核心区的重要组成部分。州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。G312、G216、G7等高速公路贯穿全境,是东联内地、西接中亚和欧洲市场的桥头堡和黄金通道。
  76. </p>
  77. <p>
  78. <img src="../image/mark.png" width="20px"
  79. height="20px">
  80. 自然资源富集。州内已发现的能源、金属和非金属矿产资源有煤炭、石油、天然气、石灰石、芒硝、铁、铀、金、铜等40种。煤炭资源富集,预测储量5732亿吨,占全疆的26%、全国的12%,其中:准东煤田是目前全国最大的整装煤田,预测资源量3900亿吨,已探明2531亿吨。石油预测储量27亿吨、天然气预测储量6000亿立方米。天然草场9981万亩,森林1231万亩。年日照时数2700—3100小时,无霜期155—180天。
  81. </p>
  82. <p>
  83. <img src="../image/mark.png" width="20px"
  84. height="20px">
  85. 经济蓬勃发展。昌吉州始终坚持新发展理念,推动经济高质量发展,深化市场化改革,扩大高水平开放,加快建设现代化经济体系,人均生产总值1.2万美元。
  86. </p>
  87. <video width="800" height="480" controls>
  88. <source src="../video/xcVideo.mp4" type="video/mp4">
  89. <source src="../video/xcVideo.ogg" type="video/ogg">
  90. <source src="../video/xcVideo.webm" type="video/webm">
  91. <object data="../video/xcVideo.mp4" width="800"
  92. height="480">
  93. <embed src="../video/xcVideo.swf" width="800"
  94. height="480">
  95. </object>

History.html【家乡历史介绍】

该页面使用背景图进行背景绘制、使用h2标签将文字进行排版,使页面整洁,充分利用外来资源,引入相关资料。

Culture.html【家乡人文】

以图片和文字的形式展现出家乡的人文特征。

核心代码:

  1. <div id="C1-center" style="background: url(image/culture-bc.jpg);
  2. background-size: cover;">
  3. <br><br>
  4. <p>
  5. 昌吉州有艺术表演团体7个;公共文化馆 8 个;公共图书馆 8 个;博物馆 9 所。已探明文物点 642 处,被公布为各级文物保护单位的有 169 处,世界文化遗产 1 处、其中国家级 4 处、自治区级 53处、县市级 111 处,全州有馆藏文物 12600 多件,其中国家珍贵文物 223 件(套),反映地方民族特色的民俗实物近 2000 件,其它藏品 10000 多件。
  6. </p>
  7. <p>
  8. 州级广播电视台 1 座,全州广播人口综合覆盖率 99.68%;县级广播电视台 7 座。
  9. </p>
  10. <img src="../image/culture-poem.jpg">
  11. <p>
  12. 昌吉州旅游文化资源独具特色。“新疆天山”成功申报为世界自然遗产、“北庭故城”成功申报为世界文化遗产,是新疆唯一同时拥有“双世界遗产”的地州。州域内有奇台汉代疏勒城、吉木萨尔北庭故城、车师古道、呼图壁康家石门子生殖崇拜岩画等400多处历史遗迹,奇台硅化木·恐龙沟国家地质公园、魔鬼城等地质遗迹,国家5A级风景名胜区——天山天池、国家森林公园——江布拉克等自然景观,新疆曲子、美食小吃等民间艺术和风味饮食。
  13. </p>
  14. <img src="../image/culture-god.jpg">
  15. <p>
  16. 根据第七次全国人口普查结果,现将2020年11月1日零时我州常住人口的基本情况公布如下:
  17. </p>
  18. <img src="../image/culture-Opera.jpg">
  19. <p>
  20. 全州常住人口为1613585人(不包含五家渠市),与2010年第六次全国人口普查的1428587人相比,增加184998人,增长12.95%,年平均增长率为1.22%。分别比全国平均水平高出7.57个百分点和0.69个百分点,分别比全区平均水平低5.57个百分点和0.49个百分点。
  21. </p>
  22. <img src="../image/culture-hd.jpg">
  23. </div>

Foods.html【家乡美食】

以图片和文字的形式展现出家乡的美景,添加a标签超级链接,跳转到相关介绍界面。如下是实现图:

核心代码:

  1. <div id="F-center">
  2. <div id="leftF" style="background: url(../image/food-choutofu.jpg);
  3. background-size: cover;">
  4. <div>
  5. <p class="p1">大盘鸡</p>
  6. <p class="p2">
  7. 大盘鸡色彩鲜艳,有爽滑麻辣的鸡肉和软糯甜润的土豆,辣中有香,粗中带细,而且经济实惠,亲朋聚会食用尚家
  8. </p>
  9. </div>
  10. </div>
  11. <div id="leftF" style="background: url(../image/food-doujiao.jpg);
  12. background-size: cover;">
  13. <div>
  14. <p class="p1">香酥羊腿</p>
  15. <p class="p2">
  16. 羊肉性温味甘,既可食补,又可食疗,为优良的强壮祛疾食品,有益气补虚,温中暖下,补肾壮阳,生肌健力,抵御风寒之功效。
  17. </p>
  18. </div>
  19. </div>
  20. <div id="leftF" style="background: url(../image/food-duck.jpg);
  21. background-size: cover;">
  22. <div>
  23. <p class="p1">黄面</p>
  24. <p class="p2">
  25. 在昌吉市、奇台县、米泉市等地的回族人中间,多有出名的拉黄面师傅,拉出的面细如游丝,柔韧耐嚼。
  26. 再加上配料精致独到,蒜、醋、辣味俱全,深受群众欢迎。而昌吉州流行的“烤肉拌凉面”的独特吃法,更是受到外地来客的青睐。
  27. </p>
  28. </div>
  29. </div>
  30. <div id="leftF" style="background: url(../image/food-ggtofu.jpg);
  31. background-size: cover;">
  32. <div>
  33. <p class="p1">烤包子</p>
  34. <p class="p2">
  35. 烤包子(维语叫“撒木萨”)和薄皮包子(维语叫“皮特尔曼它”)是维吾尔族同胞喜爱的食品之一。
  36. 城乡巴扎的饭馆、食摊多销售这种食品。烤包子主要是在馕坑烤制。包子皮用死面擀薄,四边折合成方形。包子馅用羊肉丁、羊尾巴油丁、洋葱、孜然粉、精盐和胡椒粉等原料,加入少量水,拌匀而成。
  37. </p>
  38. </div>
  39. </div>
  40. <div id="leftF" style="background: url(../image/food-mijiao.jpg);
  41. background-size: cover;">
  42. <div>
  43. <p class="p1">馕焖肉</p>
  44. <p class="p2">
  45. 食时一边吃馕,一边吃肉。因这种食品兼有主食和菜肴的功能,所以不用另加主食即可饱腹。加之其味浓郁醇香,所以深受食者喜爱。
  46. </p>
  47. </div>
  48. </div>
  49. <div id="leftF" style="background: url(../image/food-subin.jpg);
  50. background-size: cover;">
  51. <div>
  52. <p class="p1">烤全羊</p>
  53. <p class="p2">
  54. 烤全羊不仅是街头的风味小吃,而且也是维吾尔人招待贵客的上等佳肴,现在也成为高级筵席中的一道佳品,倍受中外客人的青睐。
  55. </p>
  56. </div>
  57. </div>

Traffic.html 【交通经济】

嵌入百度地图图片,通过按钮点击可以直接跳转到百度界面显示家乡的位置,使用hover来控制动画效果

 效果图:

核心代码:

  1. <div id="T-center">
  2. <div id="T-text1">
  3. <p style="font-size: 30px;">公路</p>
  4. <p>
  5. 昌吉回族自治州州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。
  6. </p>
  7. <p style="font-size: 20px; line-height: 35px">
  8. 北疆铁路、312国道、216国道、115省道、吐乌大高等级公路贯穿全境。
  9. 2017年,昌吉回族自治州客运量2767万人,同比下降9.0%,客运周转量218142万人公里,同比下降26.2%;货运量13410万吨,同比增长14.8%,货物周转量2817876万吨公里,同比增长18.5%。
  10. 截至2017年底,昌吉回族自治州民用汽车保有量为32.7万辆(包括三轮汽车和低速货车)。其中,私人汽车保有量19.4万辆
  11. </p>
  12. </div>
  13. <div id="T-map">
  14. <div id="down">
  15. <a
  16. href="https://map.baidu.com/search/%E6%98%8C%E5%90%89%E5%B8%82/@9575494.05779743,5471499.88,8.88z?querytype=s&da_src=shareurl&wd=%E6%98%8C%E5%90%89&c=299&src=0&pn=0&sug=0&l=14&b=(13068126,3563552.25;13092702,3575104.25)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2">
  17. 点击跳转至百度地图
  18. </a>
  19. </div>
  20. <img src="../image/map.png" width="100%"
  21. height="560px">
  22. </div>
  23. <div id="T-text2">
  24. <p style="font-size: 30px;">经济综述</p>
  25. <p>
  26. 2020年昌吉州全地域(含兵团)地区生产总值(GDP)1387.25亿元,按可比价格计算,同比增长5.3%,增速位居全疆第四位,经济实现平稳增长。其中,第一产业增加值242.45亿元,同比增长4.5%;第二产业增加值581.28亿元,增长12.4%;第三产业增加值563.51亿元,下降1.1%,三次产业结构为17.5:41.9:40.6,第三产业虽然遭到两次疫情重创,但占GDP的比重依然达到40%以上,总体结构基本保持稳定
  27. </p>
  28. <p>
  29. 2017年,昌吉回族自治州地区生产总值1220.0亿元,按可比价格计算,比上年增长7.0%。其中,第一产业增加值242.0亿元,增长4.0%;第二产业增加值577.0亿元,增长6.0%;第三产业增加值401.0亿元,增长10.4%。三次产业分别拉动经济增长1.0、2.6、和3.4个百分点。三次产业结构为19.8:47.3:32.9。实现地域工业增加值444.1亿元,增长4.7%,拉动经济增长1.8个百分点。人均生产总值76097元,同比增长6.4%。按当年平均汇率折合11271美元。城镇居民家庭人均可支配收入30201元,同比增长8.0%。农村居民人均可支配收入17316元,同比增长5.3%。
  30. </p>
  31. <p>
  32. 2017年,昌吉回族自治州城镇新增就业28853人,其中:就业困难人员实现再就业3666人,实名登记高校毕业生实现就业4929人,城镇登记失业人员期末实有人数3369人。城镇登记失业率2.2%,“零就业家庭”24小时动态清零成果继续巩固。居民消费价格比上年上涨2.6%,其中,食品烟酒类价格上涨1.4%。商品零售价格比上年上涨2.9%。
  33. </p>
  34. <p>
  35. 2017年,昌吉回族自治州全社会完成固定资产投资1800.0亿元(不含农户、不含跨地区项目,计划总投资达到500万以上项目),同比增长20.0%。从产业投向看,第一产业投资99.8亿元,同比增长111.4%;第二产业投资644.1亿元,下降17.6%,其中工业投资643.0亿元,下降17.7%;第三产业投资1056.2亿元,增长56.0%。三次产业投资构成5.5:35.8:58.7。
  36. </p>
  37. </div>
  38. </div>

Natural.html【家乡自然景点】

使用js添加左侧栏目点击事件,切换看板的显示,让不同的按钮展示不同的文字。效果图如下:

核心代码:

  1. <div id="N-center">
  2. <div class="left">
  3. <ul>
  4. <li><img src="../image/water.png">气候 </li>
  5. <li><img src="../image/Mine.png">地缘特点
  6. </li>
  7. <li><img src="../image/Ecological.png">资源情况
  8. </li>
  9. <li><img src="../image/Land.png">地貌</li>
  10. </ul>
  11. </div>
  12. <div class="right">
  13. <p>
  14. 昌吉市属中温带区,为典型的大陆性干旱气候,具有冬季寒冷、夏季炎热、昼夜温差大的特点。由于地形条件的影响,由南向北气候差异较大,南部夏季降水较多;北部沙漠性气候特征显著。昌吉州日照充足,年日照时数为2700小时;热量条件也较为充足,年≥10℃积温为3450℃,年平均气温6.8℃,1月份平均气温为-15.6℃,7月份平均气温为24.5℃;年平均降水量为190毫米,夏季降水量明显多于冬季;年无霜期为160-190天。
  15. </p>
  16. <p>
  17. 昌吉州是建设新疆丝绸之路经济带核心区的重要组成部分,是天山北坡经济带和乌昌石城市群率先发展的核心区域,从东西北三面环抱首府乌鲁木齐市,具有与乌鲁木齐市同城一体化发展的区位优势,州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。北疆铁路、312国道、216国道、115省道、吐乌大高等级公路贯穿全境,是东联内地、西接中亚和欧洲市场的桥头堡和黄金通道。
  18. </p>
  19. <p>
  20. 昌吉州内已发现的能源、金属和非金属矿产资源有煤炭、石油、天然气、石灰石、芒硝、铁、铀、金、铜等50多种。煤炭资源富集,预测储量5732亿吨,占全疆的26%、全国的12%,其中:准东煤田是目前全国最大的整装煤田,预测资源量3900亿吨,已探明2136亿吨。石油预测储量27亿吨、天然气预测储量6000亿立方米。水土光热资源丰富,常年耕种面积800万亩左右,人均耕地10亩左右,盛产棉花、小麦、大麦、玉米、制酱番茄等50多种高效优质农作物,是全国重要的商品粮、商品棉、制酱番茄、酿酒葡萄生产基地。
  21. </p>
  22. <p>
  23. 昌吉自治州地势南高北低,由东南向西北倾斜,南部是天山山地,中部为广袤的冲积平原,北部为浩瀚的沙漠盆地,此区域为横亘南部的天山的北坡,习惯称之为“天山北坡”。
  24. </p>
  25. </div>
  26. </div>

 适合大多数我的家乡标题的作业,改改其中部分图片以及简洁即可,免费获取代码关注公众号(coding加油站)回复家乡领取。




所属网站分类: 技术文章 > 博客

作者:大哥你来啦

链接:http://www.qianduanheidong.com/blog/article/459201/78991a225b33fe3b68f4/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)




相关内容推荐

h5网站制作软件武威网站制作峨眉山网站制作和推广网站制作报价单模板制作直播网站费用浙江网站建设制作网络公司大亚湾营销类网站制作石排互联网网站制作好不好怎么制作属于自己的网站衢州网站制作安平网站制作盛千专业湖州网站建设设计制作免费网站广告制作专业网站制作企业自己制作网站的步骤蓬莱网站制作荔湾网站制作怎么联系企业网站制作表白制作网站武汉营销型网站制作公司制作照片的网站广州效果好的网站建设制作张家港营销型网站制作网站建设企业网站制作制作网站宣传语珠海环保如何创建网站制作南京网站模板下载如何制作道滘五金网站制作电话南城网站制作婺源网站制作网站是怎么制作的合肥制作外贸网站模板龙岩制作网站设计哪家可靠网站制作和正规网站制作公司电子制作杂志社网站在线制作举牌照网站郑州商城网站制作营口门户网站制作多少钱津南网站制作企业网站制作企业qq空间制作网站北京网站制作推广制作头像的网站二次元科技制作网站义乌网站制作员一月多少钱工资静安网站制作在线网站制作工具商业购物网站设计与制作李兆明免费的h5制作网站模板网站制作设计公司酒泉制作网站免费证件照片在线制作网站推荐房山制作网站缙云专注外贸网站制作泉山区企业网站制作哪家服务好网站制作与推广济南公司网站制作多少钱华容区网站制作企业代理加盟制作相册的网站网站会员系统制作告白网站制作深圳商城网站制作商城网站设计制作沈阳网站制作培训达州网站制作大连网站制作的公司拖拽式网站制作茂名网站建设制作设计服务商张掖网站制作相片制作网站企业VR网站制作上海制作网站的公司网站开发网站制作上海网站制作费用七夕网站制作莆田企业制作网站定制网站标识在线制作手机免费网站制作上海品质网站制作流程大概费用连云港企业网站制作价格网站制作成绩排名教程七台河专业网站制作深圳微网站制作雅安网站制作公司推荐制作公司网站的合肥专业网站制作设计网站链接制作平台怎么制作游戏网站航模制作网站自己制作封面的网站永城专业网站设计制作设计制作高端网站专业做制作网站服务济南零基础学制作网站如何制作产品网站成都企业网站维护制作r语言问卷调查网站制作医院网站制作公司昆明网站制作设计泉山区企业网站制作怎么做企业型网站制作淘宝客网站制作山东高端网站制作嵊州网站制作公司哪家好自己制作网站的步骤自己制作一个网站制作网站作业网站系统制作如果自己制作网站网站数字证书制作制作简历网站服饰网站制作浙江靠谱的网站制作排名网站设计与制作知识点自建网站制作文字音乐北辰网站制作建设制作外贸网站公司华强北专门做网站制作哪家快简历制作网站推荐亳州网站制作选哪家好武昌网站制作公司金华单页网站怎么制作教程制作网站的图片齐齐哈尔制作网站价格制作简易网站的APP抖音网站制作步骤网站地图制作方法厦门网站制作品质网站制作与维护视频网站制作实例佛山网站制作企业价格清远定制网站制作咨询电话孝义网站制作制作网站公司哪家好公司官方网站的设计与制作雅安网站制作哪家不错彩票网站的图怎么制作制作班级网站网站制作及维护制作辣条的恶心过程网站万江网站制作天津个人网站制作巴彦淖尔如何制作网站骰娘制作网站ps设计制作购物网站网页益阳网站制作哪家值得信赖中山佛山网站制作方案齐齐哈尔制作网站价格购物网站制作需要多少钱网站链接制作平台视频制作模板常用网站科普视频素材网站短视频制作配音免费视频网站制作铜川制作网站公司如何快速制作静态网站海东网站制作丹东网站制作网站制作西安珠海网站制作哪家好制作班级网站接码网站的制作辛集网站建设制作价格毕设电子商务网站设计与制作购物网站制作策划书广东省网站制作订做龙口功能性网站制作海宁如何制作网站源码宜兴响应式网站制作要多少费用珠海在线网站制作咨询电话自己制作的网站如何保存图标制作网站网站制作商大足企业网站制作公司哪家好网站好制作吗如何把网站制作成书源服务好的网站制作推荐咨询电脑网站制作哪个好网站制作教程网专业网页设计和网站制作公司延庆区智能网站制作哪家专业梅州制作网站哪家好聊天室网站制作台州门户网站制作外包公司如何制作旅游网站上海企业网站制作价格一键制作网站普陀区网站制作微网站制作方案海珠区网站制作价格制作网站数据库蚌埠网站设计制作涿鹿县制作网站南京企业网站制作模板价格制作图表的网站java制作网站教程北京网站制作的公司新手怎样快速的制作一个网站我的校园网站制作哪个网站可以制作原创视频

合作伙伴

深圳网站优化推广公司

龙岗网络公司
深圳网站优化
龙岗网站建设
坪山网站建设
百度标王推广
天下网标王
SEO优化按天计费
SEO按天计费系统