📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

D33JP-南京-8页HTML+CSS

🧩 2.图片演示

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_web前端

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_学生网页作业_02

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_web前端期末大作业_03

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_web前端_04

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_web前端期末大作业_05

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_学生网页作业_06

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_web课程与设计_07

HTML期末大学生网页设计作业 (我的家乡南京介绍网站制作)_网页设计_08

四、💒 网站代码

🧱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>

  
  <div class="clear"></div>
  <div class="cona">
    <div class="bar">视频</div>
    <video width="100%"  controls>
      <source src="video/v.mp4" type="video/mp4">
   

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

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

.banner{  width:1000px;}
.text-center{ text-align:center}