📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码)。
三、🔗网站效果
▶️1.视频演示
X10JP 校园运动会 4页 视频 无js
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!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:">
<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:">
<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>
🏠CSS样式代码
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;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
