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

最新推荐文章于 2023-07-13 22:09:31 发布

web网站建设

最新推荐文章于 2023-07-13 22:09:31 发布

阅读量682

点赞数

分类专栏：网页设计与制作文章标签： html网页模版学生网页作业网页设计与制作 web期末大作业网站建设

本文链接：https://blog.csdn.net/qq_38512571/article/details/127219802

版权

网页设计与制作专栏收录该内容

1187 篇文章 99 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意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结构代码


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