时间：2023-09-15 20:18:01 | 来源：网站运营
时间：2023-09-15 20:18:01 来源：网站运营
使用HTML制作静态网站作业——我的校园运动会(HTML+CSS)：精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】 HTML+CSS+JS实例代码： 【 ️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中...】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <title>校园运动会</title> </head> <body> <!-- 头部 --> <header class="header"> <!-- 搜索 --> <div class="search"> <div class="search-content"> <!-- logo-左 --> <div class="content-l"> <img src="./pic/logo.png" /> <h3>校园运动会</h3> </div> <!-- search-右 --> <div class="content-r"> <input type="text" /> <button>搜索</button> </div> </div> </div> <!-- 导航栏 --> <div class="myNavbar"> <div class="myNavbar-content"> <ul> <li><a class="act" href="./index.html">首页</a></li> <li><a href="./page1.html">形式</a></li> <li><a href="./page2.html">高燃瞬间</a></li> <li><a href="./page3.html">趣味瞬间</a></li> </ul> </div> </div> </header> <!-- 主体 --> <main class="main"> <div class="main-content"> <!-- banner --> <div class="banner"> <img src="./pic/img (1).jpg"> </div> <!-- 文章 --> <div class="article"> <h1 class="article-title"> <span>校园运动会简介</span> </h1> <hr /> <p> 学校体育运动竞赛的一种重要形式，主要指每年春秋两季的田径运动会，简称校运会。学校运动会有多方面的教育意义，可以全面检阅学校田径运动开展情况，检查教学和训练成果，推动学校群众性体育活动的开展，促进运动技术水平的提高；同时，还可以培养学生奋发向上、遵守纪律、集体主义和荣誉感等品质，并具有振奋师生精神，活跃学校生活等作用。中国学校的运动会，始于1890年前后杭州圣约翰书院举办的以田径为主的运动会。以后逐渐发展到大城市的中等和高等学校。中华人民共和国成立后，学校运动会在城市和乡村各级各类学校中普遍开展，并日益成为学校的传统活动和学校教育生活中一项重要内容。 </p> <h3>精彩瞬间</h3> <div style="width: 100%; display: flex; "> <div class="img" style="width: 100%; height: 600px; flex-shrink: 0;"> <img src="./pic/img-1.jpg" /> </div> </div> <div style="width: 100%; display: flex; justify-content: space-around"> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-2.jpg" /> </div> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-3.jpg" /> </div> </div> <h3>目光中凝聚的是坚定与自信 动作中蕴藏的是斗志与决心</h3> <div style="width: 100%; display: flex; justify-content: space-around"> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img (24).jpg" /> </div> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-5.jpg" /> </div> </div> <h3>运动的积极意义</h3> <p> 体育运动具有强身健体、娱乐，另外还有教育、政治、经济等功能。也可以说所处的历史阶段不同，体育就具有不同的功能，但是自从体育产生以来，强身健体及其娱乐自始至终是体育的主要功能。体育是一种复杂的社会文化现象，以身体活动为基本手段，增强体质、增进健康及其培养人的各种心理品质为目的。尤其是随着社会经济的发展，人们的生活水平得到了提高，人们对精神方面的需要高于对物质方面的需要。人们对于体育的认识不只限于强身健体的方面，希望通过体育活动的参与得到更多的精神享受。例如，人们观看体育比赛，优美的体育动作，扣人心弦的竞赛等都给人们以美的享受，还有在比赛现场，随着比赛的进行，人们可以大声的叫喊，可以尽情的发泄自己的情感，使人们在精神上有一种轻松感。一次成功的射门，一个漂亮的投篮，随着快节奏的音乐跳健美操等，不只是健身，更重要的是给人们的一种精神与神经方面的释放感，愉快感、成就感和心情的舒畅感。这些都是体育带给人们精神方面的价值。生活水平越高，人们越是注重体育精神层面的价值。 </p> </div> </div> </main> <!-- 底部 --> <footer class="footer"> Copyright © 2022 xxx All rights reserved. </footer> </body></html>/* 清除默认样式 *//* #region */* { margin: 0; padding: 0;}/* 均匀滑动 */html { scroll-behavior: smooth;}body { padding-top: 90px; color: #000000;}li { list-style-type: none;}a { text-decoration: none;}/* #endregion *//* 头部样式 *//* #region */.header { width: 100%; position: fixed; top: 0; z-index: 10;}.header .search { background-color: #008ccc; width: 100%; height: 40px;}.header .myNavbar { background-color: #296073; width: 100%; height: 50px;}.search .search-content,.myNavbar .myNavbar-content { width: 1200px; height: 100%; margin: 0 auto;}.myNavbar .myNavbar-content{ position: relative;}.search-content { display: flex; justify-content: space-between;}.content-l { display: flex; align-items: center; height: 100%;}.content-l img { width: 30px; height: 30px; flex-shrink: 0;}.content-l h3 { color: white; margin-left: 10px; font-size: 24px; font-weight: 500; flex-shrink: 0;}.content-r { display: flex; align-items: center; height: 100%;}.content-r input { height: 23px; outline: none;}.content-r button { height: 25px; width: 35px; margin-left: 3px; border: none; color: white; background-color: #9b89b3;}.content-r button:hover { cursor: pointer; background-color: #7b6c8f;}.myNavbar-content > ul { display: flex; height: 100%;}.myNavbar-content a { color: white;}.myNavbar-content a:hover { cursor: pointer; background-color: #2e839e;}.myNavbar-content .act { background-color: #2e839e;}.myNavbar-content > ul > li { line-height: 50px;}.myNavbar-content > ul > li > a,.navbar-drop a { padding: 10px 20px; border-radius: 5px;}.navbar-drop { background-color: #296073; text-align: center; margin-top: -10px; border-radius: 0 0 5px 5px; display: none;}.more:hover + .navbar-drop { display: block;}.navbar-drop:hover { display: block;}/* #endregion *//* 主体样式 *//* #region */.main { width: 100%;}.main audio { height: 40px; margin-left: 10px; margin-bottom: 10px;}.main-content { width: 1200px; margin: 0 auto; border: 1px solid #b0a8b9; box-sizing: border-box;}.banner>img { width: 100%; height: 450px; object-fit: cover; object-position: center;}/* 轮播 *//* #region */.shell { width: 100%; height: 500px; position: relative; overflow: hidden; margin: 0 auto;}.images { width: 300%; height: 100%; display: flex; position: absolute; left: 0; transition: 0.2s;}.sw-img { width: 100%; height: 100%; background-size: 100%; background-position: center; background-repeat: no-repeat;}.sw-img:nth-child(1) { background-image: url('../images/swiper-1.jpg');}.sw-img:nth-child(2) { background-image: url('../images/swiper-2.jpg');}.sw-img:nth-child(3) { background-image: url('../images/swiper-3.jpg');}.min-images { display: flex; justify-content: space-evenly; position: absolute; bottom: 20px; width: 40%; z-index: 5; right: 10%;}.min { width: 60px; height: 60px; cursor: pointer; border-radius: 50%; background-size: cover; border: solid rgba(255, 255, 255, 0.5) 5px; background-position: -20px 0;}.min:nth-child(1) { background-image: url('../images/swiper-1.jpg');}.min:nth-child(2) { background-image: url('../images/swiper-2.jpg');}.min:nth-child(3) { background-image: url('../images/swiper-3.jpg');}.button { width: 100%; height: 100%; position: absolute; display: flex; justify-content: space-between; user-select: none;}.button-left,.button-right { font-size: 50px; background-color: #d2d2d261; padding: 0 20px; cursor: pointer; line-height: 500px;}/* #endregion *//* 文章 *//* #region */.article { width: 100%; margin-top: 50px; padding: 0 15px; box-sizing: border-box; margin-bottom: 40px;}.article p,.p p { text-indent: 2rem; line-height: 2; margin-bottom: 15px;}.article .str { color: #999; font-size: 18px;}.article h3 { margin-bottom: 5px; position: relative;}.article h3::before { content: ''; position: absolute; width: 5px; height: 20px; border-radius: 5px; background-color: #008ccc; left: -14px; top: 4px;}.article a:hover { text-decoration: underline;}.article hr { margin-bottom: 10px;}.article-title { text-align: center; font-size: 38px; font-weight: 400; line-height: 50px; margin-bottom: 30px; color: #f00102;}.article-title > span { padding: 10px 30px; border: double 5px #ee9c0e;}.img{ overflow: hidden; height: 400px; margin: 10px 0;}.img img{ object-fit: cover; object-position: center; transition: 0.3s; width: 100%; height: 100%;}.img:hover { box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}.img img:hover { transform: scale(1.1);}/* #endregion *//* #endregion *//* 卡片 *//* #region */.article-content{ display: flex; justify-content: space-around; flex-wrap: wrap;}.article-content .item{ width: 350px; padding: 4px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px;}.article-content .item img{ width: 100%; height: 250px; object-fit: cover; object-position: center;}.article-content .item .caption{ padding: 9px; color: #333;}.caption h4{ margin-top: 5px; margin-bottom: 5px; font-size: 18px;}.caption p{ margin: 0 0 10px; line-height: 1.5; text-indent: 0;}.article-video{ width: 100%; background-color: #b94047; border-radius: 6px; display: flex; justify-content: center; flex-wrap: wrap;}.article-video>video{ width: 1000px; height: 570px; margin-top: 20px;}.article-video .text{ width: 1000px; margin-top: 30px;}.text p{ color: white;;}/* #endregion *//* 底部 *//* #region */.footer { background-color: #008ccc; text-align: center; color: white; border-top: 1px solid rgb(87, 20, 20); height: 40px; line-height: 40px;}/* #endregion */请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：校园,作业,静态,使用
