Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript

news2025/4/17 16:42:24

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

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>

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

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}

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