Web前端大作业—里约热内卢奥运会(html+css+javascript)

news2025/1/10 18:02:02

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。


二、✍️网站描述

🏷️ 大学生校园运动静态HTML网页设计作品,采用DIV CSS布局制作,内容包括:校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局,学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

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

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
</head>
<body>
    <div class="header"></div>
    <div class="nav">
        <ul class="clearfix">
            <li><a href="index.html" target="_blank">首页</a></li>
            <li><a href="item01.html" target="_blank">新闻中心</a></li>
            <li><a href="item02.html" target="_blank">专题回顾</a></li>
            <li><a href="item03.html" target="_blank">里约热内卢</a></li>
            <li><a href="item04.html" target="_blank">奥运回顾</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="banner">
            <ul>
                <li style="display: block">
                    <img src="img/sbanner_a01.jpg"/>
                </li>
                <li>
                    <img src="img/sbanner_00.jpg"/>
                </li>
            </ul>
        </div>
        <h2 class="title">里约热内卢申奥路程</h2>
        <div class="content-text">
            <p>里约热内卢在于2007年初举办泛美运动会时,曾正式向国际奥委会递交专门信函申请申办2016年夏季奥运会。这是里约热内卢继2004年和2012年两次申办奥运会失败之后,第三次提出申办奥运会。最终确认七座城市申办2016年奥运会的其他城市还有:巴库(阿塞拜疆)、芝加哥(美国)、多哈(卡塔尔)、马德里(西班牙)、布拉格(捷克)、和东京(日本)。北京时间2009年10月3日凌晨,国际奥委会第121次全会在丹麦首都哥本哈根进行,里约热内卢通过三轮投票击败西班牙马德里、美国芝加哥和日本东京,最终获得2016年第31届夏季奥林匹克运动会的举办权,巴西成为第一个举办奥运会的南美洲国家。 2016申奥票数全记录</p>
            <p>2009年10月2日体育专电2016年奥运会和残奥会的举办权之争2日终于在丹麦哥本哈根尘埃落定。尽管马德里在首轮投票中势头强劲,获得票数最多,但是笑到最后的还是巴西的里约热内卢。本次共有四个城市竞争2016年奥运会的举办权,在首轮投票中共有94张有效选票,西班牙马德里获得28票,里约获得26票,日本东京获得22票,美国新闻发布会上喜极而泣的卢拉新闻发布会上喜极而泣的卢拉的芝加哥只获得18票,首轮出局。在第二轮投票中共有96张有效选票,里约获得最多的46张,马德里获得29张,东京获得20张,另有一张为弃权票,东京遭到淘汰。 在最终的投票对决中共有99张有效选票,里约获得66张最终胜出,马德里获得32张,另有一张弃权票。</p>
            <p>最终在2009年10月3日凌晨,经过三轮投票,巴西的里约热内卢击败马德里、东京、芝加哥,最终获得主办权,成为了第一个举办奥运会的南美洲国家。</p>
        </div>
        <div class="list clearfix">
            <dl>
                <dt>
                    <img src="img/t01536fb20c99d0e470.jpg"/>
                </dt>
                <dd>关于申办</dd>
                <dd>"今晚,我荣幸地宣布,被授予第31届奥林匹克运动会主办权的城市是,里约热内卢!"国际奥委会前任主席雅克.罗格于2009年10月2日傍晚6时30分在丹麦首都哥本哈根宣布赢得2016年夏季奥运会主办权的城市。</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/t01536fb20c99d0e470.jpg"/>
                </dt>
                <dd>关于申办</dd>
                <dd>"今晚,我荣幸地宣布,被授予第31届奥林匹克运动会主办权的城市是,里约热内卢!"国际奥委会前任主席雅克.罗格于2009年10月2日傍晚6时30分在丹麦首都哥本哈根宣布赢得2016年夏季奥运会主办权的城市。</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/t01536fb20c99d0e470.jpg"/>
                </dt>
                <dd>关于申办</dd>
                <dd>"今晚,我荣幸地宣布,被授予第31届奥林匹克运动会主办权的城市是,里约热内卢!"国际奥委会前任主席雅克.罗格于2009年10月2日傍晚6时30分在丹麦首都哥本哈根宣布赢得2016年夏季奥运会主办权的城市。</dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/t01536fb20c99d0e470.jpg"/>
                </dt>
                <dd>关于申办</dd>
                <dd>"今晚,我荣幸地宣布,被授予第31届奥林匹克运动会主办权的城市是,里约热内卢!"国际奥委会前任主席雅克.罗格于2009年10月2日傍晚6时30分在丹麦首都哥本哈根宣布赢得2016年夏季奥运会主办权的城市。</dd>
            </dl>
        </div>
        <div class="link">
            <p>
                <span>友情链接</span>
            </p>
            <ul class="clearfix">
                <li><a href=""><img src="img/links00.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links01.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links02.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links03.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links04.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links05.jpg" alt=""></a></li>
                <li><a href=""><img src="img/links06.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <p class="info">联系我们 | 网站地图 | 法律声明 版权所有:北京奥运城市发展促进会 未经授权 不得使用 京ICP备10016671号</p>
</body>
<script type="text/javascript">
    $(function(){
        var timer = null;
        var index = 0;
        timer = setInterval(function(){
            index ++;
            if(index % 2 ==0){
                $(".banner ul li").eq(0).fadeIn().siblings("li").hide();
            }else{
                $(".banner ul li").eq(1).fadeIn().siblings("li").hide();
            };
        },2000);
    });
</script>
</html>



💒CSS样式代码

@charset "UTF-8";
/*to*/
/* line 3, index.scss */
* {
  margin: 0;
  padding: 0;
}

/* line 7, index.scss */
li {
  list-style: none;
}

/* line 10, index.scss */
a {
  text-decoration: none;
}

/* line 13, index.scss */
img {
  border: none;
}

/* line 16, index.scss */
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

/* line 20, index.scss */
.clearfix:after {
  clear: both;
  overflow: hidden;
}

/* line 24, index.scss */
body, html {
  width: 100%;
  height: 100%;
}

/* line 28, index.scss */
body {
  background: #aacdf3 url("../img/bg1.jpg") no-repeat center 137px;
}

/* line 31, index.scss */
.header {
  width: 100%;
  height: 97px;
  background: #019bdb url("../img/oc_001.jpg") no-repeat center;
  margin: 0 auto;
}

/* line 37, index.scss */
.nav {
  width: 100%;
  height: 40px;
  background: #360;
}
/* line 41, index.scss */
.nav ul, .nav .content .banner ul li, .content .banner ul .nav li {
  width: 980px;
  height: 40px;
  margin: 0 auto;
}
/* line 45, index.scss */
.nav ul li, .nav .content .banner ul li li, .content .banner ul .nav li li {
  float: left;
  font: 14px/40px "微软雅黑";
  padding: 0 20px;
}
/* line 49, index.scss */
.nav ul li a, .nav .content .banner ul li li a, .content .banner ul .nav li li a {
  color: #fff;
  display: block;
}
/* line 52, index.scss */
.nav ul li a:hover, .content .banner ul .nav li li a:hover {
  color: #f00;
}

/* line 59, index.scss */
.content {
  width: 980px;
  height: auto;
  margin: 0 auto;
  background: #fff;
}
/* line 64, index.scss */
.content .banner {
  margin: 30px auto;
}
/* line 66, index.scss */
.content .banner ul, .content .banner ul li {
  width: 980px;
  height: 245px;
}
/* line 69, index.scss */
.content .banner ul li {
  display: none;
}
/* line 75, index.scss */
.content .title {
  text-align: center;
  height: 50px;
  width: 980px;
  font: 600 16px/50px "微软雅黑";
  border-bottom: 1px dashed #ccc;
}
/* line 82, index.scss */
.content .content-text {
  width: 800px;
  height: auto;
  margin: 20px auto;
}
/* line 86, index.scss */
.content .content-text p {
  text-indent: 2em;
  font: 16px/30px "微软雅黑";
}
/* line 89, index.scss */
.content .content-text p.text-align {
  text-align: center;
}
/* line 94, index.scss */
.content .list {
  width: 1000px;
  height: 315px;
}
/* line 97, index.scss */
.content .list dl {
  width: 230px;
  height: 315px;
  float: left;
  margin-right: 20px;
}
/* line 103, index.scss */
.content .list dl dt, .content .list dl dt img {
  width: 230px;
  height: 145px;
}
/* line 110, index.scss */
.content .list dl dd {
  width: 230px;
}
/* line 112, index.scss */
.content .list dl dd:nth-of-type(1) {
  height: 30px;
  text-indent: 10px;
  font: 500 16px/30px "微软雅黑";
}
/* line 117, index.scss */
.content .list dl dd:nth-of-type(2) {
  padding: 0 10px;
  width: 210px;
  font: 12px/25px "微软雅黑";
}
/* line 121, index.scss */
.content .list dl dd:nth-of-type(2):hover {
  color: #f00;
}
/* line 128, index.scss */
.content .link {
  width: 980px;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
/* line 133, index.scss */
.content .link p {
  height: 40px;
  font: 16px/40px "微软雅黑";
  border-bottom: 1px solid #ddd;
  text-indent: 2em;
  margin-bottom: 3px;
}
/* line 139, index.scss */
.content .link p span {
  border-bottom: solid 3px #105795;
  display: block;
  height: 40px;
  width: 100px;
}
/* line 147, index.scss */
.content .link ul li, .content .banner ul .link li li {
  float: left;
  width: 140px;
  text-align: center;
}

/* line 155, index.scss */
.info {
  width: 980px;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  font: 14px/30px "微软雅黑";
  color: #ffffff;
}





六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。


七、🎁更多干货

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

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

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

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

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

相关文章

产品经理 - 产品设计方法论需求分析部分

整体 – 产品设计方法论思维导图 个人整理&#xff0c;存在异议大家可以讨论下 需求分析方法论 需求分析为需求收集的延展&#xff0c;需求收集后即需进行需求分析&#xff0c;拆解需求后方可业务落地&#xff0c;此处我将其分为两步&#xff0c;一是主动发散型需求分析&am…

移动端项目(第十九课)Vite+Vant组件环境配置

常用到的环境配置时不我待(第十八课)项目环境搭建_星辰镜的博客-CSDN博客 在上面的环境的基础上加上下面的一下配置 Normalize.css: Make browsers render all elements more consistently. (necolas.github.io) 介绍 | Pinia 中文文档 (web3doc.top) Day.js 中文文档 - 2kB 大…

【Java版oj】day02排列子序列

目录 一、原题再现 二、问题分析 三、完整代码 一、原题再现 链接&#xff1a;排序子序列_牛客笔试题_牛客网 来源&#xff1a;牛客网 [编程题]排序子序列 热度指数&#xff1a;10105 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32M&…

水果店引流活动推荐_分享水果店微信小程序制作步骤

试试做个小程序拯救你的店&#xff01;让你做出有效果的活动&#xff0c;每笔钱都花在刀刃上&#xff01; 第一&#xff0c;提升水果销量&#xff0c;降低损耗 用水果店小程序做拼团、砍价、秒杀活动&#xff0c;并讲原本卖不完的水果&#xff0c;做成果盘吸引客人注册会员。上…

Manufactoria介绍及各关卡解法

Manufactoria解法Manufactoria基本介绍解法RobotoastRoboManufactoria基本介绍 Manufactoria是一个以制造工厂为背景的程序设计游戏。在游戏中&#xff0c;玩家需要在有限的平面空间中巧妙地排布传送带&#xff0c;打点器与分支器&#xff0c;完成识别或改写特定模式的字符串的…

6.AOP之转账案例

数据准备 CREATE TABLE account (id int(11) NOT NULL,name varchar(100) NOT NULL,money decimal(7,2) NOT NULL,create_time datetime(6) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8;insert into account values(1,"steven",10000,"2022…

循环程序设计 乘法口诀表

凡是写循环程序 必须满足两个条件 一是存在相同的操作 二是有规律 对于乘法口诀表 我们都很熟悉 如下图是左下角的 探求一下 规律&#xff1a; 1 多个乘法 2 规律性 第一1行 1个乘法运算 1*1 第二2行 2个乘法运算 1*2 2*2 第三3行 3个乘法运算 1*3 2*3 3*3 第四4行 4个…

关于Linux的基础总结

关于Linux的基础总结 文章目录关于Linux的基础总结前言一、为什么Linux如此流行&#xff1f;1.原因2.Linux系统的版本二、Linux的基础命令1.目录结构2.文件命令1.ls2.pwd3.cd4.touch、mkdir5.cat、tail、head、tail、od、tee、more、less6.rm、cp、mv7.find、grep、xargs8.tar、…

voc To yolov5-6.1数据集格式转换

voc To yolov5-6.1数据集格式转换 已有的数据集操作第一步:划分训练集、验证集、测试集通过脚本文件(createImageSet.py)生成训练集和验证集本代码需要修改的地方:结果:第二步:vocToyolo1、Head_classes.json文件:Head_classes.json文件对应的代码:3、操作技巧:2、第二…

用Python画一个足球

文章目录前情提要先画六边形再画五边形前情提要 如果想优雅地绘制一个足球&#xff0c;那首先需要绘制正二十面体&#xff1a;用Python绘制正二十面体 其核心代码为 import numpy as np from itertools import product G (np.sqrt(5)-1)/2 def getVertex():pt2 [(a,b) fo…

【Flask框架】——07 request请求和 get请求 post请求

request参数 指定请求方式 在Flask中&#xff0c;可以定义路由默认的请求方式&#xff1a; 利用 methods 参数可以自己指定一个接口的请求方式 get方式&#xff1a;把请求参数放到为url的&#xff1f;后面&#xff0c;每个请求参数格式为&#xff1a;参数名参数值。参数之间…

全梯度下降算法、随机梯度下降算法、小批量梯度下降算法、随机平均梯度下降算法、梯度下降算法总结

一、常见梯度下降算法 全梯度下降算法(Full gradient descent&#xff0c;FGD&#xff09;随机梯度下降算法&#xff08;Stochastic gradient descent&#xff0c;SGD&#xff09;随机平均梯度下降算法&#xff08;Stochastic average gradient descent&#xff0c;SAGD&#…

12.9工作学习记录 课程统计 Echarts表格插件 Stream.map

课程统计接口要做的是 统计各个日期的用户观看人数 生成报表 sql就是根据日期分组 查出开始时间到结束时间这个区间范围内 每天有多少人观看 SELECT DATE(join_time) AS joinTime, COUNT(*) AS userCount FROM video_visitor <…

基于ServiceStage的微服务开发与部署(二)

目录 2.微服务开发与部署 2.1. 组织管理 2.2. 仓库授权 2.3. 微服务接入CSE 2.4. 基于源码构建软件包 2.5. 创建环境 2.6. 应用部署 2.7. 外网访问 2.微服务开发与部署 2.1. 组织管理 步骤 1 打开应用管理与运维平台控制台&#xff0c;在"软件中心"-"组织管理&q…

【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.4 点、线

本节对应的视频讲解&#xff1a;B_站_视_频 https://www.bilibili.com/video/BV1x14y1J7rn 完成了界面布局&#xff0c;以及添加了初始化数据&#xff0c;就可以开始真正绘制图形了 本节讲解如何绘制点、线 1. 基本点线的绘制 1.1 为 cboShape 关联信号槽 首先&#xff0c;…

NR 多天线传输过程 2- Scrambling -1

参考 《5G 无线系统设计与国际标准》 于威廉斯托林斯的《数据与计算机通信》 《south western university--Scrambling》 《Prof. Hitesh Dholakiya-- Scrambling》 前言 最近一次答辩&#xff0c;有同事问了LDPC 和 线性分组码有什么区别&#xff0c;当时只说出了应用场景…

Presto(OpenLookeng)之BloomFilter索引优化代码走读

一. 前言 本文计划通过走读代码来理解Presto&#xff08;其实是OpenLookeng&#xff09;中BloomFilter索引的建立以及Presto中利用BloomFilter索引对查询进行优化的执行流程。OpenLookeng BloomFilter索引的基本资料可以参考官网介绍&#xff1a;openLooKeng documentation。 二…

MacOS安装PyAudio

brew install portaudio pip install pyaudio docs&#xff1a;https://people.csail.mit.edu/hubert/pyaudio/docs/ pyaudio对象的open()方法&#xff1a; rate&#xff1a;取样频率channels&#xff1a;声道数format&#xff1a;取样值的量化格式 (paFloat32, paInt32, pa…

Node.js Event Loop 的三大常见理解误区和正确概念辨析

Node.js Event loop 监控器。高的 frequency 和低的持续时间是最理想的 event loop 状态。 上图显示三点半到五点半之间&#xff0c;event loop 的 frequency 骤降&#xff0c;然后 duration 居高不下。 Node.js 是一个基于事件的平台。 这意味着在 Node 中发生的一切都是对…

Windows无法读取驱动器中的光盘

一. 问题 在网上搜索了很多方法来解决下图的问题&#xff0c;一直失败。浪费了很多时间。后来发现&#xff0c;网上的方案可能恰恰是相反的思路。所以&#xff0c;留下个笔记吧。 二. 方法 1.打开本地服务管理器。按键盘的”WinR"组合键 打开“运行”窗口。输入“Serv…