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

news2025/1/8 5:06:50

源码获取 文末联系

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

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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 Region</a>
            </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>
    <!--以下为menu部分-->
    <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;与此同时,张家口市凭借与北京市共同申办
        <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/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>



学的反而越迷茫

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

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

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

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


学习更多

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


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/25407.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

让你全方位了解Shell终端,轻松学习

关于shell终端&#xff0c;本文将在以下几个方面做以总结和说明&#xff0c;希望对大家有所帮助。 1.什么是shell Shell是用户和Linux操作系统之间的接口。Linux中有多重shell&#xff0c;其中缺省使用的是Bash。如果把Linux内核想象成一个球体的中心&#xff0c;shell就是围绕…

[go学习笔记.第十六章.TCP编程] 3.项目-海量用户即时通讯系统-redis介入,用户登录,注册

1.实现功能-完成用户登录 在redis手动添加测试用户,并画出示意图以及说明注意事项(后续通过程序注册用户) 如:输入用户名和密码,如果在redis中存在并正确,则登录,否则退出系统,并给出相应提示: 提示信息: 1.用户不存在或者密码错误 2.重新注册并登录 redis手动添加测试用户 ser…

GitLab的使用

目录 一、腾讯云 / 阿里云 购买服务器 二、服务器上安装GitLab-ce 三、使用git 1、首先把服务器上的代码克隆下来 2、将所有有改动的全部添加到要提交的本地库中 3、将修改提交到本地库 4、将本地库的commit推送到远程服务器 5、拉取服务器上最新资源&#xff1a; 6、…

智创未来 · 引领5G价值,广和通携5G AIoT创新应用亮相2022德国慕尼黑电子展

11月15-18日&#xff0c;两年一届的全球电子行业盛会——德国慕尼黑电子展&#xff08;Electronica 2022&#xff09;于慕尼黑展览中心顺利举行。作为全球领先的物联网无线通信解决方案和无线模组供应商&#xff0c;广和通精彩亮相B5馆139展台&#xff0c;向全球物联网企业分享…

机器学习分类模型评价指标之ROC 曲线、 ROC 的 AUC 、 ROI 和 KS

前文回顾&#xff1a; 机器学习模型评价指标之混淆矩阵机器学习模型评价指标之Accuracy、Precision、Recall、F-Score、P-R Curve、AUC、AP 和 mAP 1. 基本指标 1.1 True Positive Rate(TPR) TPRTPTPFNTPR \frac{TP}{TPFN}TPRTPFNTP​ 中文&#xff1a;真正率、灵敏度、召…

一天快速掌握Mybaits[一]

一、搭环境 Spring Initializr的搭建 创建完毕后的项目结构 此时application的后缀更名为yml&#xff0c;因为这样&#xff0c;看起来更简洁明了&#xff0c;而作用上&#xff0c;无差别 数据库环境的搭建 新建数据库 执行SQL语句 use mybatis-demo; CREATE TABLE user (id…

珠海航展有图扑 | 数字孪生方案助力智慧航天

2022 年 11 月 8 日~11 月 15 日&#xff0c;在第十四届中国国际航空航天博览会&#xff08;简称中国航展&#xff09;中&#xff0c;图扑先进的数字孪生解决方案&#xff0c;支撑合作伙伴实现人机交互场景。 图扑助力航展数字化 在本届国际航空航天博览会中&#xff0c;图扑…

Word控件Spire.Doc 【图像形状】教程(2) ;在 C#、VB.NET 中从 Word 中提取图像

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

代码演示GC回收

JVM配置 -XX:NewSize5m 初始新生代大小 -XX:MaxNewSize5m 最大新生代大小 -XX:InitialHeapSize10m 初始堆大小 等同于Xms -XX:MaxHeapSize10m 最大堆大小 等同于Xmx -XX:SurvivorRatio8 Eden区占80% -XX:PretenureSizeThreshold10m 大对象阈值 -XX:UseParNewGC 新生代使用ParN…

最新最全面的Spring详解(五)——事务管理

前言 本文为 【Spring】事务管理 相关知识&#xff0c;下边将对Spring框架事务支持模型的优点&#xff0c;Spring框架的事务抽象的理解&#xff08;包含TransactionManager、TransactionDefinition、TransactionStatus&#xff0c;编程式事务管理&#xff08;包含使用 Transact…

(七)笔记.net core学习之反射、加载dll、读取moudle、类、方法、特性

1.反射加载dll、读取moudle、类、方法、特性 &#xff08;1&#xff09;模块信息获取 &#xff08;2&#xff09;方法调用 2.反射创建对象、反射简单工厂配置文件&#xff08;破坏单例&#xff0c;创建泛型&#xff09; &#xff08;1&#xff09;程序的可配置可扩展&#xf…

【MEIF:ℓ1-ℓ0混合分解】

Multimodal Medical Image Fusion Using Hybrid Layer Decomposition With CNN-Based Feature Mapping and Structural Clustering &#xff08;基于CNN的特征映射和结构聚类的混合层分解的多模态医学图像融合&#xff09; 本文提出了一种特征级多模态医学图像融合&#xff0c…

springboot获取不到客户端ip问题排查

一、现象 springboot从2.0.2升级到 2.5.7后线上环境无法通过request.getHeader("x-forwarded-for")获取客户端ip地址&#xff0c;测试环境正常&#xff0c;开发环境也异常 二、结论 springboot 2.5.7版本中CloudPlatform多了Kubernetes platform的类型识别&#x…

SpringCloud整合Nacos最全教程(简介及安装部署整合)

目录 一、Nacos简介 Nacos与eureka的共同点 Nacos与Eureka的区别 二、Nacos安装配置 在windows中的安装教程 1.首先将windows安装版本的zip解压&#xff1a; 2.如果8848端口被占用&#xff0c;可以修改端口 3.进入到bin目录下&#xff0c;在cmd中运行以下命令启动 4.启…

Webpack 5 超详细解读(二)

11.importLoaders 属性 问题&#xff1a; test.css的内容如下&#xff1a; .title {transition: all .5s;user-select: none; }login.css的内容如下&#xff1a; /* 导入test.css */ import ./test.css; .title {color: #12345678; }再次npm run build发现运行之后的test.c…

外汇天眼:想通过外汇交易在几个月内成为亿万富翁吗?你必须知道的七大交易法则

WikiFX 策略 -这里有七个交易规则&#xff0c;将在不同程度上让您受益。 1.交易不是儿戏 这是一项业务&#xff0c;如果没有适当的计划、战略和有效的运营&#xff0c;就不可能取得长期的成功。 2.损失不可避免 由于市场始终存在风险&#xff0c;因此在您的交易中从多头转为…

C++:项目相互依赖调用解决方法两种方法

Bmodel依赖于Amodel&#xff0c;但是Amodel又需要BModel的信息。这样就会导致相互依赖。 方法一&#xff1a;采用静态变量static 链接&#xff1a;C开发中一个解决方案里&#xff0c;两个项目的相互引用&#xff0c;相互依赖的实现方法&#xff08;解决方法&#xff09;_Capri…

P物质肽[DArg1, DTrp5, 7, 9, Leu11]

这种物质P类似物是一种非常有效的小细胞肺癌(SCLC)细胞体外生长的广谱神经肽抑制剂(IC₅₀ 5M)。此外&#xff0c;它在体外有效地抑制信号转导通路&#xff0c;并在体内显著延缓SCLC异种移植物的生长。因此&#xff0c;它可能对SCLC有治疗价值。 编号: 139994中文名称: P物质肽…

数据结构学习笔记(Ⅰ):绪论

课程链接:【旧版】1.0_开篇_数据结构在学什么_哔哩哔哩_bilibili 目录 1 数据结构的基本概念 2 算法 2.1 算法的基本概念 1.算法概念 2.算法的特性 3.好算法特质 2.2 算法的时间复杂度 2.3 算法的空间复杂度 1 数据结构的基本概念 数据&#xff1a;能输入到计算机中并…

Android StudioJNI开发之NDK环境的搭建以及添加JNI支持(图文解释 简单易懂)

有问题可以评论区留言讨论~~~ 一、NDK环境搭建 Android系统的所谓原生开发是在App中调用C/C代码&#xff0c;鉴于这两个语言具有跨平台的特性&#xff0c;如果某项功能使用C/C实现&#xff0c;就很容易在不同平台之间移植。 完整的Android环境包括三个开发工具。分别是JDK SD…