大一学生HTML期末作业: 季奥林匹克运动会 8页无js 带表单带报告5200字

⛵ 源码获取文末联系 ✈

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

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

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（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 lang="en">
<head>
<link href="../css/index.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2022北京冬奥会--奥运宣传title>
head>
<body>
    <div id="head_box">
        <div id="head_wrap">
            <div id="head_nav">
                <a href="#">奥运会官方a>
                <span>|span>
                <a href="#">冬奥会官方a>
                <span>|span>
                <a href="#">残奥会官方a>
                <span>|span>
                <a href="#">奥组委官方a>
                <span>|span>
                <a href="#">奥运知识a>
                <span>|span>
                <a href="#">奥运云服务a>
                <span>|span>
                <a href="#">问题反馈a>
                <span>|span>
                <a href="#">Select Regiona>
            div>
            <div id="head_right">
                <div id="head_landing">
                    <a href="form.html">登录a>
                    <span>|span>
                    <a href="form.html">注册a>
                div>
            div>
        div>
    div>
    
    <div id="menu_box">
        <div id="menu_logo">
            <img src="../images/a.jpg">
        div>
        <div id="menu_nav">
            <ul>
                <li><a href="aaa.html" title="网站首页">网站首页a>li>
                <li><a href="index.html" title="奥运宣传">奥运宣传a>li>
                <li><a href="check.html" title="举办竞选">举办竞选a>li>
                <li><a href="pic.html" title="往届图片">往届图片a>li>
                <li><a href="game.html" title="赛事安排">赛事安排a>li>
                <li><a href="sagc.html" title="申奥过程">申奥过程a>li>
                <li><a href="order.html" title="在线订票">在线订票a>li>
            ul>
        div>
        <div id="menu_wrap">
            <div id="find_wrap">
                <div id="find_bar">
                    <input type="text" id="find_input" placeholder="2022北京冬奥会最新新闻">
                div>
          div>
        div>
    div>

<div class="content">
   <div class="v">
    <video width="100%" controls>
      <source src="../images/冬奥会宣传-首页.mp4" type="video/mp4">
      您的浏览器不支持 video 标签。 video>
  div>
  <div class="clear">div>
  <div class="clear">div>
  <div class="produce">
    <div class="bar"><strong class=" ">第24届冬季奥林匹克运动会strong>div>
    <div class="pad"> <img src="../images/big.jpg" width="240" style="float:left" />
      <p>       <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=49055317_4_hao_pg&wd=%E7%AC%AC24%E5%B1%8A%E5%86%AC%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A&fenlei=256&rsv_pq=b3f2e45c0022709e&rsv_t=b99duHD9W4hLUc3AAdjFAQpDBysGtv8SDSodmYZpz2HEuoxzZz4haemyAxb0vl1psC51ZURexK8&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1067&rsv_sug3=12&rsv_sug1=9&rsv_sug7=100&rsv_sug2=0&rsv_sug4=1934"  title="百度搜索“第24届冬季奥林匹克运动会” "target="_blank"><strong>第24届冬季奥林匹克运动会strong>a>（英语：The XXIV Olympic Winter Games），又称2022年北京冬季奥运会。
        2015年7月31日，托马斯·巴赫宣布2022年冬季奥林匹克运动会主办城市是北京，北京成为第一个举办过夏季奥林匹克运动会和冬季奥林匹克运动会以及亚洲运动会三项国际赛事的城市，也是继1952年挪威的奥斯陆举办后时隔70年的第二个举办冬奥会的首都城市。
        <br/>
              与此同时，张家口市凭借与北京市共同申办
        <a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=62095104_43_oem_dg&wd=2022%E5%8C%97%E4%BA%AC%E5%86%AC%E5%A5%A5%E4%BC%9A&fenlei=256&rsv_pq=fa623c3200012d93&rsv_t=eca2fN2zEWqGbPNEFGubv2zCn6cRcZiE%2Fwh0wBaeIHUpBliEsLfwIgGzot78nWhITFnqQtK8%2BKkQ&rqlang=cn&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=17&rsv_sug1=9&rsv_sug7=101&rsv_sug2=1&rsv_btype=i&prefixsug=2022B%2526gt%253BIJ&rsp=0&inputT=4321&rsv_sug4=5424"  title="百度搜索“2022北京冬奥会” "target="_blank"><strong>2022北京冬奥会strong>a><strong>
        [1]
        strong>的契机成功获得了2021年国际雪联自由式滑雪和单板滑雪世界锦标赛的举办权与北京市石景山区成为中国第一个获得此项赛事举办权的城市，同时北京与张家口成为中国第一个获得过冬季奥林匹克运动会举办权的城市。
        <br/>
              <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=62095104_43_oem_dg&wd=2022%E5%8C%97%E4%BA%AC%E5%86%AC%E5%A5%A5%E4%BC%9A%E8%BF%90%E5%8A%A8%E9%A1%B9%E7%9B%AE&fenlei=256&oq=2022%25E5%258C%2597%25E4%25BA%25AC%25E5%2586%25AC%25E5%25A5%25A5%25E4%25BC%259A%25E9%25A1%25B9%25E7%259B%25AE&rsv_pq=c5cb20d400010bcc&rsv_t=9bb8CQDqJQkj0uPBmNPqeQrPQfRRpSjQdNPBIaIIT3BHb3hZCT86svJKD0rPtcITiPpBuLwgq2xZ&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=1648&rsv_sug3=31&rsv_sug1=26&rsv_sug7=100&rsv_sug2=0&rsv_sug4=2706" title="百度搜索“2022北京冬奥会运动项目” "target="_blank"><strong>北京冬季奥运会设7个大项，15个分项，109个小项 [2]strong>a><strong>。strong>北京将主办冰上项目，张家口将主办雪上项目，延庆协办张家口举办雪上项目。p>
    div>
  div>
  <div class="lianxi">
    <div class="bar"><strong class=" ">比赛场馆strong>div>
    <div class="con"> 
    <img src="../images/冰丝带.png" width="499" height="326" style="float:left; margin-right:20px" />
    <img src="../images/水立方.png" width="453" height="327" style="float:left; margin-right:20px" />
      <p>            <font size="+1">北京2022年冬奥运会和冬残奥运开闭幕式计划在北京市区举行，共举办包括滑冰（含短道速滑、速度滑冰、花样滑冰）、冰球、冰壶在内的3个大项5个分项的所有冰上项目比赛，北京赛区一共有5座竞赛场馆，其中4座分别是水立方、国家体育馆、五棵松体育馆和首都体育馆，这4座体育馆将分别举办冰壶、男子冰球、女子冰球、短道速滑和花样滑冰的比赛。冬奥会需要的12个冰上项目场馆，已经有11个是现成的，此外还需要在北京奥林匹克森林公园网球中心南侧新建一个场馆——国家速滑馆。font> p>
    div>
  div>
  <div class="clear">div>
  <div class="bar"><strong class=" ">往届冬奥会图片欣赏strong> div>
  <div class="imglist scrollleft">
    <ul>
      <li>
        <p><img src="../images/3.jpg" /><br />
          <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/4.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/5.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/6.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/7.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/8.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
      <li>
        <p><img src="../images/9.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
	  <li>
        <p><img src="../images/10.jpg" /><br />
           <a href="#" title="往届冬奥会图片欣赏">2018冬奥会图片a>p>
      li>
    ul>
  div>
 
  <div class="clear">div>
  <div class="bar"><strong class=" ">宣传片strong> div>
  <div class="v">
    <video width="100%" controls>
      <source src="../images/冬奥会宣传片.mp4" type="video/mp4">
      您的浏览器不支持 video 标签。 video>
  div>
div>
div>
<div class="end">
  <p>#xxx# p>
  
div>


body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识