学生家乡网页设计作品静态HTML网页—— HTML+CSS制作青海家乡主题网页源码(4页)
一、👨🎓网站题目
旅游，当地特色，历史文化，特色小吃等网站的设计与制作。
二、✍️网站描述
👨🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
四、🌐网站效果
五、🪓 代码实现
🧱HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>青海</title>
</head>
<body>
<div class="main">
<div class="left">
<div class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">青海美食</a></li>
<li><a href="imgs.html">青海景点</a></li>
<li><a href="history.html">青海历史</a></li>
</ul>
</div>
</div>
<div class="banner"><img src="https://www.hanpokou.com/wp-content/uploads/2021/12/1ea1513b03d3f6019c3cd12f6c8b96c6.jpg" width="100%" height="400px"/></div>
<div class="content">
<div class="bar">
<h3>青海省简介</h3>
</div>
<div class="pad">
青海省，简称“青”，是中华人民共和国省级行政区，省会西宁市；位于中国西北内陆，北部和东部同甘肃省相接，西北部与新疆维吾尔自治区相邻，南部和西南部与
西藏自治区毗连，东南部与四川省接壤，地势总体呈西高东低，南北高中部低的态势，位于四大地理区划的青藏地区 ；总面积72.23万平方公里，辖2个地级市、6个自
治州；2023年末，全省常住人口594万人 。青海省位于中国西部，雄踞世界屋脊青藏高原的东北部。因境内有国内最大的内陆咸水湖——青海湖而得名。青海省是长江、
黄河、澜沧江的发源地，故被称为“江河源头”，又称“三江源”，素有“中华水塔”之美誉，是联结西藏自治区、新疆维吾尔自治区与内地的纽带。特殊的地理优势让这里
也成为中华文明的重要源头；形成了以昆仑文化为主体、不同民族文化构成的多元文化 。2023年，青海省生产总值（GDP）3799.1亿元，按可比价格计算，比上年增
长5.3%。
</div>
<div class="bar">
<h3>历史沿革</h3>
</div>
<div class="pad">
旧石器时代晚期，青海省先民即在今柴达木盆地、昆仑山一带活动生息。秦汉时，羌人部落有150多个，每一部落有首长，互不统属，过着逐水草而居的游牧生活，
生产力低下，属原始社会形态。汉武帝元狩二年（前121年），西汉王朝派骠骑将军霍去病出兵击败河西匈奴，设令居塞，并在河西设4郡。武帝元鼎六年（前111年），
汉军征讨河湟羌人，在湟中设“护羌校尉”，开始经略湟中，筑西平亭（今西宁市）。从此，汉王朝开始了对青海东部的控制。汉宣帝神爵元年（前六十一年），赵充国奉
命平先零羌杨玉得胜后，罢兵田于河湟，设“金城属国”，先后设置临羌（治所在今湟源县）、安夷（治所在今海东市平安区）、破羌（治所在今海东市乐都区）、允吾
（治所在今民和县）、允街（治所在今甘肃省兰州市红古区）、河关（治所在今贵德县）7县，青海东部地区正式纳入中原封建王朝郡县体系。三国时，魏文帝黄初三年
（222年），凭依汉西平亭故城，修成西平郡城。四世纪初，吐谷浑人迁入甘青地区，后向青海境内发展，并建立了吐谷浑国。其盛时，势力范围东南至四川松潘，
北到青海祁连，东到甘肃洮河，西达新疆维吾尔自治区南部，东西长约1500公里，南北宽约500公里。吐谷浑人自进入青海至唐龙朔三年（663年）亡于吐蕃止。
东晋十六国时，前凉、前秦、后凉、南凉、西秦、西夏、北凉相继统治过青海河湟地区。7世纪，松赞干布统一西藏高原，建立了吐蕃王朝。先后兼并了羊同、苏毗、
白兰、党项诸羌，尽得其地。唐“安史之乱”后，吐蕃进一步东进，控制了青海全境，统治近200年。唐末，“嗢味”一度控制河湟地区。五代十国时期，青海吐蕃部落分散，
不复统一。宋时，唃厮啰势力渐强，以青唐城（今西宁）为中心，在河、湟、洮地区建立了以吐蕃为主体的宗咯地方政权，臣属于宋。徽宗初，唃厮啰政权势力日衰，
宋军遂进占河湟地区。崇宁三年（1103年），宋改鄯州为西宁州，是“西宁”见于历史之始。北宋亡后，金和西夏占有河湟地区约一个世纪。南宋理宗元庆三年（1227年），
成吉思汗进军洮、河、西宁州，青海东部地区纳入蒙古汗国版图。忽必烈即位初，在河州设吐蕃等处宣慰使司都元帅府，管辖青、甘一带吐蕃部落。至元十八年（1281年）
设甘肃等处行中书省，辖西宁诸州。明洪武六年（1373年），改西宁州为卫，下辖6千户所。以后又设“塞外四卫”：安定、阿端、曲先、罕东（当今海北州刚察西部至
柴达木西部，南至格尔木，北达甘肃祁连山北麓地区）。孝宗弘治元年（1488年），设西宁兵备道，直接管理蒙、藏各部和西宁近地，“塞外四卫”由西宁卫兼辖。明初青海东部实行土汉官参设制度。在青南、川西设有朵甘行都指挥使司，又在今青海黄南州、海南州一带设必里卫、答思麻万户府等。
十六世纪初，厄鲁特蒙古4部之一的和硕特部移牧青海，一度成为统治青海的民族。清雍正初年，罗卜藏丹津反清叛乱失败后清朝在青海设置青海办事大臣，统辖蒙古29
旗和青南玉树地区、果洛地区及环湖地区的藏族部落。青海东北部西宁卫改为西宁府，仍沿袭明朝的土司制度，属甘肃管辖。 民国元年（1912年），北洋军阀政府任命
马麒为西宁总兵，民国四年（1915年），又任命其为蒙番宣慰使和甘边宁海镇守使。从此，马家军阀统治青海近40年。民国三年（1914年），设立西宁道。民国十七年
（1928年）9月5日，南京国民政府决定新建青海省，治设西宁。民国十八年（1929年）1月，青海省正式建制。1949年9月5日，中国人民解放军解放西宁；9月26日，青海省人民军政委员会宣告成立。1950年1月1日，青海省人民政府正式成立，以西宁为省会。
</div>
<div class="bar">
<h3>青海景点</h3>
</div>
<div class="list">
<ul>
<li> <a href="info1.html"><img src="https://p1-q.mafengwo.net/s12/M00/BC/87/wKgED1wvaoiAZJBvAAgzC6qQH2084.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90" height="200" width="100%" />
<h3>茶卡盐湖--天空之境</h3>
</a></li>
<li> <a href="info2.html"><img src="https://p1-q.mafengwo.net/s12/M00/92/6F/wKgED1w7MvSALYKgAAy8PvaFPe821.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90" height="200" width="100%" />
<h3>青海湖--高原蓝宝石</h3>
</a></li>
<li> <a href="info3.html"><img src="https://p1-q.mafengwo.net/s12/M00/BD/03/wKgED1wvauOAVJmdAAnz77kmcxA79.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90" height="200" width="100%" />
<h3>坎布拉森林公园--碧水丹山</h3>
</a></li>
<li> <a href="info4.html"><img src="https://p1-q.mafengwo.net/s12/M00/92/F8/wKgED1w7M2iAN_YlABTYW4TsdmE79.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90" height="200" width="100%" />
<h3>卓尔山--东方小瑞士</h3>
</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="end">
<p>青海</p>
</div>
</div>
</body>
</html>🧱css
.js div img{ float:left; margin-right:20px}
.msg>div{ padding:10px}
.bar h3{ color:#fff}
.bar{ border-bottom:#304d51 solid 1px; margin:10px 0 ; text-align:center; font-size:18px; clear:both; font-weight:bold; padding:10px 25px; color: #0000;}
.box .boxle{ float: left; width: 250px; padding: 20px;}
.box .boxle img{ width: 100%;}
.box .boxri{ float: right; width: 670px; padding: 10px; color:#000 }
.box h4{ font-size: 28px;}
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦
原文地址：https://blog.csdn.net/2301_78133614/article/details/142438714
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！