HTML静态网页作业——(国乒网 8页) HTML+CSS+JavaScript-CSDN博客

本文链接：https://blog.csdn.net/qq_524614081/article/details/127890057

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |校园篮球网页设计 | 足球体育运动 | 体育游泳运动 | 兵乓球 | 网球 | 等网站的设计与制作| HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>国乒网</title>
</head>

<body>

<div class="bg">
   
   
   <div class="menu">
       <div class="logo"><img src="images/logo.png" height="45px"></div>
       <a href="index.html" class="on"> 首页</a>
       <a href="lishi.html"> 国乒历史</a>
       <a href="saishi.html"> 相关赛事</a>
       <a href="chengji.html"> 奥运成绩</a>
       <a href="guanjun.html"> 冠军榜</a>
   </div>
   
   <div class="top"><img src="images/banner.jpg"></div>
   
   <div class="xq">
   
   <div class="bt">
       <h2>中国国家乒乓球队</h2>
   </div>
       <p><img src="images/1.jpg" align="right" width="440">中国乒乓球队成立于1952年，中国乒乓球队队训是“你不要这一分，祖国还要这一分”。在全国人民的热情支持下，拼搏不息，攀登不止，经历了由弱到强、持久昌盛的发展历程。</p>
       <p>自容国团1959年赢得第一个世界冠军至今，中国乒乓球队四十多年来共为祖国夺取124.5个世界冠军。</p>
       <p>2018年2月25日，在伦敦举行的2018国际乒联团体世界杯团体决赛中，中国男队、女队双双夺冠 。2020年3月8日，在国际乒联世界巡回赛卡塔尔公开赛中，国乒收获4冠1亚，全体队员将246900美元奖金全部捐献给武汉抗疫前线。</p>
       <p>2021年5月16日，中国乒协在官网正式公布国乒东京奥运会参赛名单。男乒方面，马龙、樊振东、许昕携手出战。女乒方面，陈梦、刘诗雯、孙颖莎获得参赛资格。7月26日，许昕、刘诗雯夺得2020年东京奥运会乒乓球混双银牌 。8月5日，在东京奥运会乒乓球女团决赛中，中国队3-0战胜日本队，获得金牌。8月6日晚，东京奥运会乒乓球男团决赛，中国队3-0战胜德国队，最终以大比分3比0取胜，获得冠军。 </p>
   </div>
   
   <div class="gp">
       <div class="gp_l">
           <div class="bt"><h2>荣誉记录</h2></div>
           <div class="jl">
               <img src="images/2.jpg" width="100%">
               <p>2021年5月27日，中国体育价值榜2020最受关注的中国运动队榜发布，中国国家乒乓球队位居榜单第2名。</p>
           </div>
       </div>
       <div class="gp_r">
           <div class="bt"><h2>词条图册</h2></div>
           <div class="pic">
              <span style="margin-left:0;"><img src="images/3.jpg"></span>
              <span><img src="images/4.jpg"></span>
              <span><img src="images/5.jpg"></span>
              <span style="margin-left:0;"><img src="images/6.jpg"></span>
              <span><img src="images/7.jpg"></span>
              <span><img src="images/8.jpg"></span>
           </div>
       </div>
   </div>
   
   <div class="banquan">中国国家乒乓球队网</div>

</div>
</body>
</html>