HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)

🎉不定期分享源码,关注不丢失哦

文章目录


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现图片轮播,共有3个页面

二、作品演示



三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	
	
	<div class="w">
		<div class="header">
			足球
		</div>
		<div class="nav">
			<a href="index.html" class="white">足球首页</a>
			<a href="mingxing.html">足球明星</a>
			<a href="register.html">注册页面</a>
		</div>
		
		<div class="banner" id="banner_img">
			<img id="banner_img1" src="./images/banner_1.jpg" alt="" class="banner_img active">
			<img id="banner_img2" src="./images/banner_2.jpeg" alt="" class="banner_img ">
			<img id="banner_img3" src="./images/banner_3.jpeg" alt="" class="banner_img ">
		</div>
		<div class="box">
			<h2>关于足球</h2>
			<div class="about ">
				<div class="about_img">
					<img src="./images/zq.jpeg" alt="">
				</div>
				<div class="about_txt">
					<div>
						<b>中文名:</b>足球
					</div>
					<div>
						<b>外文名:</b>Football
					</div>
					<div>
						<b>类别:</b>球类运动
					</div>
					<div>
						<b>主要赛事:</b>国际足联世界杯、欧洲冠军联赛等
					</div>
					<div>
						<b>起源日期:</b>
						1863年10月26日(现代足球)
					</div>
					<div>
						<b>简介:</b>
						足球是一项以脚为主,控制和支配球,两支球队按照一定规则在同一块长方形球场上互相进行进攻、防守对抗的体育运动项目。因足球运动对抗性强、战术多变、参与人数多等特点,故被称为"世界第一运动"。
					</div>
				</div>
			</div>
		</div>
		
		<div class="zq box">
			<h2>足球运动</h2>
			<div class="zq_main">
				<p>足球运动是一项古老的体育活动,源远流长。最早起源于我国古代的一种球类游戏"蹴鞠",后来经过阿拉伯人传到欧洲,发展成现代足球。现代足球运动正式确立于1863年10月26日,英国足球联合会成立,它是世界上第一个足球组织,此外它还统一了足球规则。英文:football,美国称为soccer,被誉为"世界第一运动",全球体育界最具影响力的单项体育运动。标准的11人制足球比赛由两队各派10名球员与1名守门员,总共22人,在长方形的草地球场上对抗、防守、进攻。比赛时尽量将足球射入对方的球门内,每射入一球就可以得到一分,当比赛完毕后,得分多的一队则胜出。如果在比赛规定时间内得分相同,则须看比赛规则而定,可以抽签、加时再赛或互射点球(十二码)等形式比赛分高下。</p>
				<div class="zq_img">
					<img src="./images/zq1.png" alt="">
				</div>
			</div>
		</div>
		
		<div class="footer">足球 版权所有</div>
		<script src="./js/lunbo.js"></script>
	</div>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

💙2.想要获取本文源码,点击前往吧

相关推荐
李少兄2 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1013 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19433 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧4 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台4 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1004 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc5 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃6 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
吃饺子不吃馅6 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅6 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby