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

IT芷君

于 2023-01-08 10:15:10 发布

阅读量334

点赞数

分类专栏： html网页设计文章标签： css html web课程与设计 js 网页作业

本文链接：https://blog.csdn.net/VX_WJ88950106/article/details/128598747

版权

html网页设计专栏收录该内容

1750 篇文章 96 订阅

订阅专栏

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

一、网页介绍📖

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}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥 在这里插入图片描述

IT芷君

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript

1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。
复制链接

扫一扫