学生HTML静态网页基础水平制作 ，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、👨🎓网站题目
旅游，当地特色，历史文化，特色小吃等网站的设计与制作。
二、✍️网站描述
- 株洲旅游主题的网页 一共八个页面
- 旅游网页使用html css js制作 有banana图
- 页面可以相互跳转 包含表单 三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他旅游网页
- 岳阳旅游网页介绍了历史革命 地方特产 关于我们等
- html静态网页 没有复杂效果 布局简单 原创html网页设计 适合当作业使用
👨🎓静态网站的编写主要是用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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站首页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="qb">
<!-- 导航栏 -->
<div class="nav">
<ul>
<li >
<a href="index.html">网站首页</a>
</li>
<li class="active">
<a href="chengshi.html">城市发展</a>
</li>
<li>
<a href="tese.html">特色景点</a>
</li>
<li>
<a href="meishi.html">美食打卡</a>
</li>
<li>
<a href="guanyu.html">关于深圳</a>
</li>
<li>
<a href="denglu.html">快速登陆</a>
</li>
</ul>
</div>
<!-- 城市发展 -->
<h3>城市发展</h3>
<div class="qb_2">
<div class="qb_2_1">
<img src="img/a1.png" alt="" width="100%" height="400px">
<p style="font-weight: bold;margin-top: 20px;">今年前三季度，深圳的经济增速下滑，令不少人感到意外</p>
<P>改革开放40年来，深圳从一个小渔村成长为国际性大都市，发生了翻天覆地的变化。
这些年里，一代代新华社记者和摄影爱好者通过镜头记录下深圳发展的一个个瞬间。站在改革开放40年的历史节点上，我们用照片将当年的小渔村与如今的大都市进行对比，
看看深圳这座城市近40年的变与不变。
有些人不担心短期的增速下降，更关注长期的高质量增长；认为深圳在政府财政、城市治理、科技资源、人才吸引力、资本市场、创新创业文化等方面优势明显，这些优势是这座城市持续发展的动力。
不过，一些人对此感到担忧，认为高房价降低了深圳的人才吸引力，提高了中小企业的成本，抑制了创新创业气氛；同时，取而代之的大型企业，如华为、恒大，也遭遇各种不同的困境，对经济产值及周边产业链打击较大。
</P>
</div>
</div>
<!-- 规模的虚实 -->
<h3>规模的虚实</h3>
<div class="qb_1">
<div class="qb_1_1">
<img src="img/a1.png" alt="" width="200px" style="margin:20px;">
</div>
<div class="qb_1_2">
<P>
不唯GDP论并不是说经济增长不重要，其真正含义是，关注实际GDP，而不是名义GDP。从静态的维度来看，经济总量的成色如何，我们需要分析通胀、环境损失和政府债务。怎么理解？假如两个城市的经济总量相同（其它指标也相同），但是一个城市的政府负债率很高，另一个政府负债率很低，那么前者的经济泡沫更大，后者的经济增长更稳健。一座城市想要短期内把名义GDP做大，政府可以借债大量投资基建，但这座城市的实际经济总量并未增加多少，反而滋生了债务泡沫风险。
</P>
</div>
</div>
<!-- 城市的虚实 -->
<h3>城市的虚实</h3>
<div class="qb_1">
<div class="qb_1_1">
<img src="img/a3.png" alt="" width="200px" style="margin:20px;">
</div>
<div class="qb_1_2">
<P>
数据显示，过去十年，深圳人口增加了713万人，目前常住人口达到1756万人。其中，15-59岁人口为1396万人，占79.53%。从每10万人中拥有大学文化程度的人口数看，与2010年相比，深圳由17545人上升为28849人，分别比全国、全省多13382人和13150人。比如，福田区40%的常住人口拥有大学学历。全国前20强大学的毕业生，有超过20%投奔深圳，北大清华的比例更高。
</P>
</div>
</div>
<!-- 增长的虚实 -->
<h3>增长的虚实</h3>
<div class="qb_1">
<div class="qb_1_1">
<img src="img/a2.png" alt="" width="200px" style="margin:20px;">
</div>
<div class="qb_1_2">
<P>
其实，从2012年开始，经济学界开始大量讨论中国经济增速的问题。有学者提出了“换挡降速”的观点，认为“新5%比旧8%好”。这种观点基本上是从历史主义出发，对比日本、韩国、巴西、阿根廷、俄罗斯等国家的经济增长轨迹，得出一个结论：一个国家的经济随着时间的推移，其边际增长会逐渐下滑，目前中国进入了“换挡降速”阶段。
</P>
</div>
</div>
<!-- 清除浮动 -->
<div style="clear: both;"></div>
<!-- 版权所有 -->
<div class="db">
<span>广东深圳</span>
</div>
</div>
</body>
</html>💒CSS样式代码
@charset "utf-8";
body{
background-image:url(../img/bg.png);
background-size: 100% ;
background-attachment: fixed;
}
* {
margin: 0;
padding: 0;
}
.qb {
width: 1000px;
margin: 0 auto;
background-color: rgba(255,255,255,0.2);
}
/* 导航栏 */
.nav ul {
width: 100%;
height: 50px;
line-height: 50px;
background-color: rgba(255,255,255,0.2);
}
.nav ul li {
float: left;
width: 100px;
text-align: center;
list-style: none;
margin-left:50px;
}
.nav ul li a {
color: white;
font-size: 15px;
padding: 5px;
text-decoration: none;
}
.nav ul li.active a {
color: #917567;
border-radius: 25px;
font-weight: bold;
background-color: white;
}
.nav ul li:hover a {
color: #917567;
border-radius: 25px;
font-weight: bold;
background-color: white;
}
/* 轮播图 */
#banner li {
list-style: none;
}
#banner {
width: 1000px;
height: 524px;
margin: 0 auto;
position: relative;
}
#banner .pic ul li a img {
width: 990px;
height: 500px;
border:4px solid #CCC;
}
#banner .pic {
width: 100%;
height: 100%;
position: relative;
}
#banner .pic ul li {
position: absolute;
display: none;
}
#banner .tab {
width: 148px;
height: 20px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -70px;
}
#banner .tab ul li {
width: 18px;
height: 18px;
background: #ffffff;
opacity: 0.7;
border-radius: 100%;
float: left;
margin: 1px 3px;
color: #fff;
text-align: center;
line-height: 18px;
font-family: 'Microsoft yahei';
font-size: 12px;
cursor: pointer;
}
#banner .tab ul li.on {
opacity: 1;
background: rgb(255, 255, 255);
}
#banner .btn {
display: none;
}
#banner .btn div {
width: 30px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
}
#leftBtn {
left: 0;
}
#rightBtn {
right: 0;
}
/* 简介 */
.qb_1 {
width: 960px;
height: 200px;
margin: 20px;
background-color: rgba(255,255,255,0.2);
}
.qb_1_1 {
float: left;
width: 200px;
height:200px;
}
.qb_1_2 {
float: left;
width: 760px;
box-sizing: border-box;
padding: 50px;
line-height: 1.6;
font-size: 14px;
}
.qb_1_2 p {
text-indent: 2em;
}
.qb_2 {
width: 960px;
margin: 20px;
background-color: rgba(255,255,255,0.2);
}
.qb_2_1 {
padding: 20px;
box-sizing: border-box;
}
.qb_2_1 p {
font-size: 14px;
line-height: 2.2;
text-indent: 2em;
}
h3 {
color: #008000;
padding-left: 20px;
border-left: 6px solid #008000;
margin: 20px 0 20px 20px;
}
.qb_3 {
width: 960px;
margin: 20px;
height: 340px;
background-color: rgba(255,255,255,0.2);
}
.qb_3 ul {
width: 100%;
margin: 20px;
padding: 0;
box-sizing: border-box;
}
.qb_3 ul li {
float: left;
list-style: none;
width: 300px;
background-color: rgba(255,255,255,0.2);
padding-bottom: 20px;
margin: 20px 10px 20px 0;
}
.qb_3_1 ul li:nth-child(3n) {
margin-right: 0;
}
.qb_3 ul li img {
width: 100%;
}
.qb_3 ul li video {
width: 100%;
}
.qb_3_1 h4 {
font-size: 18px;
margin: 5px 0;
color: #917567;
text-align: center;
}
.qb_3_1 p {
padding: 0 20px;
box-sizing: border-box;
font-size: 14px;
text-indent: 2em;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.db {
width: 100%;
text-align: center;
height: 60px;
font-size: 18px;
color: #FFF;
background-color: rgba(255,255,255,0.2); }
.db span {
font-size: 14px;
display: inline-block;
margin-top: 10px;
line-height: 1.5;
}/* CSS Document */
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
:3021557545
绿泡泡：XiaoMei_NN
4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
