466.大学生HTML期末大作业 —【我的家乡南京旅游主题网页(8页)】 Web前端网页制作 html+css

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/145929021

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

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

二、网页文件

本网页实例共包含8个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>南京介绍</title>
</head>
<body>
<div class="content">
<nav class="menu">
<ul class="center mid">
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html">南京介绍</a></li>
<li><a href="img.html">南京图片</a></li>
<li><a href="zuopin.html">风景名胜</a></li>
<li><a href="jingli.html">视频介绍</a></li>
</ul>
</nav>
<div class="banner ">
<div class="top_img"><img src="images/0.jpg" width="100%"/></div>
</div>
<div class="clear"></div>
<div class="con">
<div class="bar">介绍</div>
<div class="con1" style="text-indent: 2rem; line-height: 30px;">
<p> 南京，江苏省辖地级市，简称“宁”，古称金陵、建康，是江苏省省会、副省级市、特大城市、南京都市圈核心城市，国务院批复确定的中国东部地区重要的中心城市、全国重要的科研教育基地和综合交通枢纽 [3] 。截至2019年，全市下辖11个区，总面积6587.02平方千米，建成区面积823平方千米。截至2020年，南京常住人口9314685人，城镇人口808.53万人，城镇化率86.8% ，南京实现地区生产总值14817.95亿元。</p>
<p> 南京地处中国东部、长江下游、濒江近海，是中国东部战区司令部驻地，是国务院规划定位的长三角辐射带动中西部地区发展的重要门户城市，也是东部沿海经济带与长江经济带战略交汇的重要节点城市。</p>
<p> 南京是首批国家历史文化名城，中华文明的重要发祥地，长期是中国南方的政治、经济、文化中心，历史上曾数次庇佑华夏之正朔。南京早在100-120万年前就有古人类活动，35-60万年前已有南京猿人在汤山生活，有着7000多年文明史、近2600年建城史和近500年的建都史。</p>
<p> 南京是国家重要的科教中心，自古以来就是一座崇文重教的城市，有“天下文枢”“东南第一学”之称，明清中国一半以上的状元均出自南京江南贡院。截至2020年，南京各类高等院校68所，其中双一流高校12所、111计划高校10所，211高校8所、两院院士81人，均仅次于北京上海。</p>
<p> 2020年8月，联合国人居署发布亚洲城市百强名单，南京位列亚洲第11，中国大陆第5 。</p>
<div class="imglist scrollleft" >
<ul>
<li> <img src="images/3.jpg" height="220"/> </li>
<li> <img src="images/4.jpg" height="220"/> </li>
<li> <img src="images/5.jpg" height="220"/> </li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>

</video>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="end">
<p>南京</p>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}

body{ line-height:21px; width:1000px; background:#fff; margin:0 auto}
.clear{ clear:both}
.menu li{ list-style:none}
.logo img{ width:1000px }
.banner{ clear:both; position:relative}
.bar{ font-size:24px; margin-top:26px; margin-bottom:10px; padding:15px 0; color:#fff; background:#f2adad; line-height:30px; text-indent:15px}

.menu{ float:left; margin-top:25px}
.menu li a{ color:#fff; font-weight: bold; }
.menu li { padding:20px 0px ; margin-left:10px; display:inline-block; width:184px; background-color: #f2adad; text-align:center;font-size:24px; margin-bottom:20px}

.right{ float:right; width:260px; background:#E2DBD6; padding:20px; margin-right:10px}
.left{ min-height:260px; float:left; width:260px; padding:20px; margin-right:10px}
.content { color:#817b7b; clear:both; padding-bottom:30px; width:1000px; margin:0 auto; background:#fff; font-size:14px; }
.con {margin-left:20px; margin-right:20px;}
.cona { margin-right:30px; margin-left:20px}
.cona p {display:inline-block; margin-right:20px}
.end{ clear:both; color:#fff; padding:30px 0; text-align:center; background:#f2adad}
.produce li{ width:24%; margin:0.5%; float:left;}
.produce li img{ width:100%}
img{ max-width:100%}
.pad{ padding:20px 0; display:block}
.pics p{ margin:20px; text-align:center}
.imglist{ clear:both}
.imglist li img{ width:100%;}
.imglist li{ width:310px; margin-bottom:10px ; margin-right:10px; text-align:center; float:left}
.imglist li a{
color:#817b7b;
}
.fr{ float:right}
.news li{ width:92%; float:left; padding:5px 20px;}
.news li>img{ float:left}
.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}
.mid{ margin:0 auto; float: left}
.msg>div{ padding:10px}