534.我的家乡山东潍坊旅游主题网页大学生期末大作业 Web前端网页制作 html+css

本文链接：https://blog.csdn.net/A240307/article/details/142915646

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css：导航菜单、三级页面、留言表单等。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

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;
   }