❤【作者主页-获取更多优质源码】
❤【Web后端期末作业——完整项目精品实用案例（1000套）】
文章目录
1. 网页介绍
1网页介绍：本作品为中学生个人主页网页设计主题，HTML+CSS布局制作，网页后端期末作业，大学生网页设计作业源码，这是一个不错的网页页面制作，图片灵动，代码简单中学生水平，特别适合初学者学习和使用。
2.网页编辑：网页作品的代码简单，可以使用任何HTML编辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意HTML编辑软件来运行、修改和编辑等）。
3、知识应用：技术方面主要应用网页知识：Div+CSS、鼠标悬停效果、Table、导航栏效果、Banner、表单、二级五级页面等，视频、音频元素、Flash、同时设计Logo所需的知识点（源文件）。
1、网页疗效
2.代码展示 1.HTML结构代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的家乡山东潍坊</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mian">
<div class="top">
<div class="logo">
<img src="images/logo.png" />
</div>
</div>
<div id="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="jianjie.html">家乡简介</a></li>
<li><a href="techan.html">家乡特产</a></li>
<li><a href="liuyan.html">在线留言</a></li>
</ul>
</div>
<div class="content">
<div class="ibox1">
<div class="ibox1-left">
<img src="images/img2.jpg" />
</div>
<div class="ibox1-right">
<div class="title"><h1>家乡简介</h1></div>
<P>潍坊，古称潍州、潍县，别称鸢都，是山东省地级市，国务院批复确定的山东省半岛城市群的区域中心城市。截至2018年，全市下辖5个区、2个县、代管6个县级市，总面积15859平方千米，2019年末常住人口935.15万人，城镇人口581.4万人，城镇化率62.18%，全市社会消费品零售总额2702.7亿元。</P>
<p>潍坊市位于山东半岛西部，居胶东经济圈中心位置，地跨东经118°10′～120°01′，北纬35°41′～37°26′。气候属暖温带季风型半湿润大陆性气候，市域地貌自北向南，由低到高，形成几个台阶。潍坊市是世界风筝都，连续荣获国家环保模范城市、国家卫生城市、国家园林城市、国家食品安全示范城市、国际和平城市、全国文明城市、中国优秀旅游城市、中国特色魅力城市、全国科技进步先进城市、全国循环经济示范市，全国双拥模范城市、中国最具幸福感城市，中国外贸百强城市等奖项，荣获中国人居环境奖。</p>
<div class="more"><a href="jianjie.html">点击查看更多</a></div>
</div>
</div>
<div class="ibox2">
<div class="title"><h1>著名人物</h1></div>
<div class="ibox2-ner">
<div class="bx">
<div class="xhao">1</div>
<h2>莫言，本名管谟业，1955年2月17日出生于山东省潍坊市高密市东北乡文化发展区大栏平安村，中国当代作家。首位中国籍诺贝尔文学奖获得者。</h2>
<img src="images/img4.jpg" />
</div>
<div class="bx">
<div class="xhao">2</div>
<h2>郭兰村(1902—1978) 名 馨。潍坊市潍城区城里人。他擅长工笔人物，兼画骏马和工笔花鸟。平生得意作品有《水浒传人物绣像》一百单八将。</h2>
<img src="images/img5.jpg" />
</div>
<div class="bx">
<div class="xhao">3</div>
<h2>臧克家（1905年10月8日～2004年2月5日），著名诗人，山东潍坊诸城人，曾用名臧瑗望，笔名少全、何嘉。被誉为"农民诗人"。第一部诗集是《烙印》</h2>
<img src="images/img6.jpg" />
</div>
<div class="bx">
<div class="xhao">4</div>
<h2>刘墉（1720年-1805年1月24日/25日），字崇如，号石庵，出生于山东高密。清朝政治家、书法家。大学士刘统勋长子。刘墉享年八十五岁，追赠太子太保，赐谥号文清。</h2>
<img src="images/img7.jpg" />
</div>
</div>
</div>
</div>
<div class="foot">版权所有©我的家乡山东潍坊</div>
</div>
</body>
</html>
2.CSS样式代码
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 14px;
font-family: "微软雅黑",arial;
line-height: 22px;
background:#e9ecec;
}
div,p,input,ul,li,h1 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #c60707;
text-decoration: none;
overflow: hidden;
}
.mian{
width:1100px;
height:auto;
overflow:hidden;
margin:0 auto;
}
.top{
height:335px;
background:url(../images/img1.jpg);
background-repeat: no-repeat;
}
.logo{
width:648px;
height:77px;
padding-top:75px;
margin:0 auto;
}
#nav{
height:45px;
background:#0ab0b6;
}
#nav ul{
padding:0px;
}
#nav ul li{
width:275px;
text-align:center;
height:45px;
float:left;
}
#nav ul li a{
display:block;
width:275px;
height:45px;
line-height:45px;
color:#FFF;
font-size:18px;
}
#nav ul li a:hover{
background:#34bfc4;
}
.content{
height:auto;
overflow:hidden;
background:#FFF;
padding:20px;
}
.ibox1{
height:441px;
margin-bottom:30px;
}
.ibox1-left{
width:496px;
height:441px;
float:left;
margin-right:20px;
}
.ibox1-right{
width:544px;
float:left;
}
.ibox1-right p{
line-height:30px;
font-size:14px;
text-indent:2em;
margin-bottom:10px;
}
.title{
padding-left:20px;
height:45px;
border-bottom:#3c7301 1px solid;
background:url(../images/img3.jpg) no-repeat;
margin-bottom:20px;
}
.title h1{
font-size:18px;
color:#0ab0b6;
line-height:40px;
}
.more{
height:45px;
line-height:45px;
width:207px;
text-align:center;
margin:0 auto;
background:#0ab0b6;
}
.more a{
color:#FFF;
font-size:14px;
}
.ibox2{
height:590px;
}
.ibox2-ner{
height:480px;
padding-top:20px;
}
.bx{
width:217px;
float:left;
margin:0px 20px;
}
.bx h2{
color:#0e0e0e;
line-height:25px;
font-size:14px;
text-align:center;
margin-bottom:15px;
font-weight:normal;
}
.xhao{
width:30px;
height:30px;
margin:0 auto;
background:url(../images/xuh.png) no-repeat;
line-height:30px;
text-align:center;
color:#FFF;
font-size:16px;
margin-bottom:20px;
}
.foot{
height:110px;
background:#0ab0b6;
line-height:110px;
text-align:center;
font-size:14px;
color:#FFF;
}
.tit{
height:55px;
line-height:55px;
text-align:center;
font-size:20px;
font-family:"微软雅黑";
}
.content p{
line-height:25px;
font-size:14px;
text-indent:2em;
margin-bottom:10px;
}
.centimg{
display:block;
margin:0 auto;
margin-top:10px;
margin-bottom:10px;
}
hr{
margin-bottom:30px;
}
.cuos{
height:230px;
background:#eae9e9;
padding:15px;
margin-bottom:30px;
}
.cuos img{
float:left;
margin-right:15px;
}
.jies{
width:745px;
float:left;
}
.jies h3{
line-height:35px;
font-size:16px;
font-weight:normal;
}
.jies p{
line-height:25px;
font-size:14px;
color:#999;
text-indent:0px;
}
.dianji{
color:#F00;
}
.liuyan{
height:auto;
overflow:hidden;
}
.liuyan p{
line-height:30px;
font-size:14px;
text-align:center;
}
.wenk{
border:none;
border:#CCC 1px solid;
height:20px;
line-height:20px;
padding:5px;
color:#666;
width:355px;
}
.liyk{
width:360px;
}
.tij{
display:block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
border:#666 1px solid;
margin:0 auto;
}
.left{
width:300px;
float:left;
margin-right:20px;
}
.left h1{
line-height:40px;
height:40px;
font-size:16px;
}
.left p{
line-height:40px;
height:40px;
text-align:center;
font-size:14px;
}
.right{
width:740px;
float:left;
}
.right h1{
line-height:40px;
height:40px;
font-weight:normal;
font-size:18px;
border-bottom:#CCC 1px dashed;
text-align:center;
margin-bottom:20px;
}
.right p{
text-indent:2em;
font-size:14px;
margin-bottom:10px;
}
.right img{
display:block;
margin:0 auto;
margin-top:10px;
margin-bottom:10px;
}
三、个人总结
一套合格的网页应包括（具体可根据个人要求确定）
页面分为四个部分：页眉、菜单导航栏（最好下拉）、中间内容蓝筹股、页脚； 所有页面均设有超链接，可跳转至五级页面，共5-10页； 页面风格style 统一布局显示正常，不乱，采用Div+Css技术； 菜单美观、醒目，二级菜单能正常弹出和跳转； 要有JS特效，比如定时切换、图片新闻自动切换等； 页面中有多媒体元素，如gif、视频、音乐、表单技术的运用； 页面清新、美观、大方，就是不一样。 网站后台程序除了能够呈现用户所要求的内容外，还必须满足良好的布局、美观的界面、优雅的色彩搭配、多样的表达方式等要求。 4． 更多干货
1.如果我的博客对您有帮助潍坊专业网站模板制作，如果您喜欢我的博客内容，请一键“点赞”、“✍️评论”、“收藏”！
2.❤️【关注我| 获取更多源代码 | 优质文章】带你学习各种后端插件，3D炫丽效果潍坊专业网站模板制作，图片展示，文字效果，以及全站模板，大学生毕业HTML模板，期末作业模板等！ “这里有很多后端开发人员，一起讲解后端Node知识，互相学习”！
3.欢迎大家一起交流和研究以上内容相关的技术问题
