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

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

    文章目录

    一、作品介绍

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

    二、作品演示

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

    三、代码目录

    在这里插入图片描述

    四、网站代码

    HTML部分代码

    
<!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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    五、源码获取

    🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
    🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
    💙2.想要获取本文源码，点击前往吧

  • 相关阅读:
    C#项目怎么在IIS发布—教程图解
    Linux C基础（5）
    HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
    除硅树脂-HP4500
    xcode15一直显示正在连接iOS17真机问题解决
    Espresso Test 7: Idling resource
    Docker
    uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个
    商家冷启难题，快手每天8亿流量能解决吗？
    Java基础：Java程序设计概述
  • 原文地址：https://blog.csdn.net/weixin_42283461/article/details/136697053