基于Html+Css+javascript的网页制作（体育主题）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于Html+Css+javascript的网页制作（体育主题），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12667字，纯文字阅读大概需要19分钟。
内容图文
加粗样式## 1.前端三门技术
学习Web前端技术需要掌握三门基本技术：HTML，CSS，JavaScript：
HTML：HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文件、图片、视频等
CSS：CSS样式是表现，就像网页的外衣比字体、颜色变化等
JavaScript：JavaScript用来实现网页上的特效效果。比如鼠标滑过弹出下拉菜单、鼠标滑过北京颜色改变等
本次项目主要是介绍体育主题，使用html+css+javascript来制作网站，实现项目的效果；
index主页面效果截图：
主页面实现代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>飓风体育报</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<div class="contianer">
<!--top begin-->
<div class="top"><div class="logo"><img src="images/biaoti.png"></div><div class="pic"><img src="images/5.jpg" alt="0" width="380" height="232"></div></div>
</div>
<!--top end-->
<!--nav begin-->
<div class="nav">
<div class="nav_con"><ul>
<li><a href="news.html">今日头条</a></li>
<li><a href="basketball.html">精彩瞬间</a></li>
<li><a href="paihang.html">球队排行榜</a></li>
<li><a href="about.html">个人排行榜</a></li>
<li><a href="player.html">球员专栏</a></li>
<li><a href="注册.html">会员登录订阅</a></li>
</ul></div>
</div>
</div>
<!--nav end-->
<div class="aaa">
<!--banner begin-->
<div class="banner">
<h1><font face="微软雅黑" size="6" color="#545454">一、《飓风体育报》概况</font></h1>
<p><font size="4" color="#515151">
《飓风体育报》（Hurricane Sports）是一份主要关注篮球与足球的相关报道，同时也涉及摩托车大奖赛和一级方程式赛车等其他运动项目报道的周报。</font></p>
<p><font size="3" color="#515151">
《飓风体育报》总部位于西班牙巴塞罗那，隶属戈蓝集团旗下，创立于1906年2月1日，拥有约36.6万读者。。</font></p>
<p><font size="4" color="#515151">
创立之初，该报纸是以周报的形式出版，每周发行一期，1929年改为日报，每天都发行。作为西班牙知名的体育报纸，《飓风体育报》的畅销范围遍及西班牙全国，同时，它也是现今存在的西班牙最古老、欧洲第二古老的体育类报纸，其在欧洲体育报坛历史悠久程度仅次于1896年创立的《米兰体育报》。</font></p>
<div class="center-photo"><img src="images/fengmian.jpg"></div>
<h2><font face="微软雅黑" size="5" color="#545454">二、《飓风体育报》中评论的特点</font></h2>
<p><font size="4" color="#515151">
王牌采编团队的优秀基因，足球资讯的“意见领袖”。?飓风体育报是第
一家长期西班牙采访各类的报纸媒体，多位专业记者常驻西甲，NBA赛场，是所有媒体中拥有官方采访证最多的媒体。</font></p>
<p><font size="4" color="#515151">
丰富资讯‘独家视角引领先锋文化焦点。囊括足球，篮球，世界一级方程式，一线记者实时动态报道‘全面准确的排行数据’专业人士精辟点评‘经典赛事独家回顾；深挖世界球星衣食住行‘花边新闻，透视明星成长和精神力程，球迷与球星面对面；每月更有篮球课堂，资深足球教练教你踢球。</font></p>
</div></div>
<!--banner end-->
<!--stages begin-->
<div class="stages"></div>
<!--stages end-->
<!--content begin-->
<div class="content"></div>
<!--content end-->
<!--footer begin-->
<div class="footer"></div>
<!--footer begin-->
</body>
</html>
basketball页面效果截图：
代码实现：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>今日十佳球</title>
<link href="css/mp4.css" rel="stylesheet" type="text/css">
</head>
<body background="images/6.PNG">
<h1 align="center"><font color="#000000" size="+6">今日NBA五佳球</font></h1>
<div class="nav">
<div class="nav_con"><ul>
<li><a href="https://nba.stats.qq.com/player/?id=5007">1.安东尼·戴维斯</a><span></span></li>
<li><a href="https://nba.stats.qq.com/player/?id=5197">2.戈贝尔</a><span></span></li>
<li><a href="https://nba.stats.qq.com/player/?id=5185">3.字母哥</a><span></span></li>
<li><a href="https://nba.stats.qq.com/player/?id=5556">4.穆迪埃</a><span></span></li>
<li><a href="https://nba.stats.qq.com/player/?id=1962937738">5.啊伦</a><span></span></li>
<li><a href="about.html">个人排行榜</a><span></span></li>
<li><a href="jvlebu.html">球队排行榜</a><span></span></li>
<li><a href="guojiadui.html">国家队排行榜</a><span></span></li>
<li><a href="index首页.html">返回首页</a><span></span></li>
</ul></div>
</div>
<p align="center"><embed src="images/video/top5.mp4" width="500" height="350"></p>
<p align="center"><font color="black" size="5" face="微软雅黑"><font face="微软雅黑" size="6" color="red">NBA（National Basketball Association）</font>是美国职业篮球联赛的简称，于1946年6月6日在纽约成立，由北美三十支队伍组成的男子职业篮球联盟，汇集了世界上最顶级的球员，是美国四大职业体育联盟之一。<br />诞生了：迈克尔·乔丹，比尔·拉塞尔，卡里姆·阿布杜尔-贾巴尔，威尔特·张伯伦，埃尔文·约翰逊，拉里·伯德，奥斯卡·罗伯特森，约翰·哈弗利切克，里克·巴里，约翰·斯托克顿，卡尔·马龙，埃尔金·贝勒，大卫-罗宾逊，朱利叶斯·欧文，查尔斯·巴克利，哈基姆·奥拉朱旺，沙奎尔·奥尼尔，阿伦·艾弗森，蒂姆·邓肯，马努·吉诺比利，科比·布莱恩特，文斯·卡特，麦克格雷迪，勒布朗·詹姆斯，凯文·杜兰特 ，斯蒂芬·库里，莱昂纳德，姚明等著名球员，是世界水平最高篮球赛事。<br />NBA共有30支球队，分为东部联盟和西部联盟，各联盟又被划分为3个赛区，各赛区由5支球队组成。<br />NBA每年赛季结束后，下赛季开始前会举行NBA选秀，选秀后有各球队新秀夏季联赛，每年10月份新赛季常规赛开始前举行若干场季前赛，（包括NBA海外赛和NBA中国赛）此外在2月中下旬有一项特殊的表演赛事NBA全明星赛，4月中下旬后常规赛结束后，东西部前八名的球队开始季后赛的争夺，决出东西部冠军，晋级NBA总决赛。<br />从2016-2017赛季开始，赛季奖项颁发改在在赛季结束后，为在该赛季中表现出色的球员进行颁奖如：最有价值球员，最佳防守球员，最佳新秀等。<br />NBA总决赛表现最优秀球员获总决赛MVP(FMVP)荣誉。<br />2018年12月，NBA入围2018世界品牌500强。</font></p>
</body>
</html>
about.html页面效果
实现代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NBA球员榜</title>
<link href="css/about-us.css" rel="stylesheet" type="text/css">
</head>
<body background="images/捕获.PNG">
<h1><font face="微软雅黑" size="6" color="black">NBA球员榜</font></h1>
<div class="nav">
<div class="nav_con"><ul>
<li><a href="#">球员</a></li>
<li><a href="#">球队</a></li>
<li><a href="#">得分榜</a></li>
<li><a href="#">助攻榜</a></li>
<li><a href="#">篮板榜</a></li>
<li><a href="#">抢断榜</a></li>
<li><a href="#">盖帽榜</a></li>
<li><a href="index首页.html">首页</a></li>
</ul></div>
</div>
<table class="table">
<tr>
<td>球员</td>
<td>球队</td>
<td>得分</td>
<td>助攻</td>
<td>篮板</td>
<td>抢断</td>
<td>盖帽</td>
<td>排名</td>
</tr>
<tr>
<td>阿德托昆博</td>
<td>雄鹿</td>
<td>32</td>
<td>8.4</td>
<td>5.7</td>
<td>2.1</td>
<td>0.45</td>
<td>1</td>
</tr>
<tr>
<td>勒布朗-詹姆斯</td>
<td>湖人</td>
<td>28.8</td>
<td>6.1</td>
<td>3.6</td>
<td>0.85</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>安东尼-戴维斯</td>
<td>湖人</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>3</td>
</tr>
<tr>
<td>詹姆斯-哈登</td>
<td>火箭队</td>
<td>27.8</td>
<td>7.2</td>
<td>8</td>
<td>1.3</td>
<td>0.72</td>
<td>4</td>
</tr>
<tr>
<td>利拉德</td>
<td>开拓者队</td>
<td>26.9</td>
<td>5.8</td>
<td>4.9</td>
<td>1</td>
<td>0.5</td>
<td>5</td>
</tr>
<tr>
<td>科怀-莱昂纳德</td>
<td>快船</td>
<td>26.8</td>
<td>3.1</td>
<td>8.4</td>
<td>1.8</td>
<td>0.6</td>
<td>6</td>
</tr>
<tr>
<td>保罗-乔治</td>
<td>快船</td>
<td>26.4</td>
<td>3.5</td>
<td>13.2</td>
<td>0.5</td>
<td>1.8</td>
<td>7</td>
</tr>
<tr>
<td>米德尔顿</td>
<td>雄鹿队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>8</td>
</tr>
<tr>
<td>吉安尼斯-安特托孔波</td>
<td>雄鹿</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>9</td>
</tr>
<tr>
<td>格里芬</td>
<td>活塞队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>10</td>
</tr>
<tr>
<td>肯巴-沃克</td>
<td>黄蜂队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>11</td>
</tr>
<tr>
<td>威斯布鲁克</td>
<td>火箭</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>12</td>
</tr>
<tr>
<td>拉文</td>
<td>公牛队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>13</td>
</tr>
<tr>
<td>德罗赞</td>
<td>马刺队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>14</td>
</tr>
<tr>
<td>凯里-欧文</td>
<td>篮网</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>15</td>
</tr>
<tr>
<td>路易斯威廉姆斯</td>
<td>快船</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>16</td>
</tr>
<tr>
<td>本-西蒙斯</td>
<td>76人</td>
<td>20.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>17</td>
</tr>
<tr>
<td>安德烈-德拉蒙德</td>
<td>活塞</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>18</td>
</tr>
<tr>
<td>哈里斯</td>
<td>快船队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>19</td>
</tr>
<tr>
<td>比尔</td>
<td>奇才</td>
<td>20.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>20</td>
</tr>
<tr>
<td>麦科勒姆</td>
<td>开拓者队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>21</td>
</tr>
<tr>
<td>沃尔</td>
<td>奇才队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>22</td>
</tr>
<tr>
<td>哈达威</td>
<td>尼克斯队</td>
<td>28.1</td>
<td>4.7</td>
<td>12.6</td>
<td>1.7</td>
<td>2.4</td>
<td>23</td>
</tr>
</table>
</body>
</html>
news页面：
实现代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>今日头条</title>
<link href= "css/today.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="today">
<!--banner begin-->
<div class="banner">
<h1> 今日体育新闻</h1>
<p><font size="4" color="#515151">
北京时间12月20日2时（西班牙当地时间19时），西班牙国王杯首轮继续进行，西班牙人客场2比0淘汰乙B队列达。武磊首发完成国王杯首秀，第53分钟打进中国球员国王杯首球，本赛季他代表西班牙人三项赛事均已取得进球。第90分钟，武磊再下一城，这是他在西班牙人首次梅开二度。在列达B队踢球的中国球员刘洋同样首发，上演一队首秀，第55分钟被换下。
</font></p>
<div class="center-photo"><img src="images/wulei.jpg"></div>
<p><font size="3" color="#515151">
武磊：“我为两粒进球和比赛的结果感到高兴，我们在上半场表现得并不好，我们还要在下一场比赛继续进步。”
“我在参加过的所有赛事都取得了进球，但我还没有达到去年的水平。每个人都知道第二年比第一年困难。” </font></p>
<h2><font face="微软雅黑" size="5" color="#545454">NBA方面雄鹿击败湖人</font></h2>
<p><font size="4" color="#515151">
12月20日NBA结束了一场巅峰对决，东部第一的雄鹿在主场迎战西部第一的湖人，这两支球队都是新赛季开始至今表现最出色的球队。最终双方经过近较量，雄鹿111-104击败湖人，避免自己连败的同时送给对手两连败。这场比赛湖人的詹姆斯、浓眉哥和丹尼格林发挥抢眼，雄鹿的字母哥、希尔都有相当出彩的表现，他们在主场成功拿下了胜利。
</font></p>
<div class="center-photo"><img src="images/xionglu.jpeg"></div>
<p><font size="4" color="#515151">
12月21日讯 猛龙坐镇主场迎战奇才。首节开战，洛瑞三分加中距离帮助猛龙获得主动，比至中段洛瑞和麦考联手拿下7分使优势来到10分，此后猛龙牢牢占据主动权，首节结束领先对手17分。次节开始，布朗2+1，小托马斯三分帮奇才追分，不过杰弗森立刻三分回应，再加一记中投帮助球队延续优势，两队之后互有得分，节末猛龙利用罚球打出一波6-2，带着16分领先进入下半场。易边再战，贝尔坦斯三分命中，奇才打出一波6-0追至10分落后，不过猛龙则利用罚球造成杀伤，奇才这边比尔一记中投和一个2+1尝试追分，最后阶段也是比尔突破之后打中加罚，他也单节砍下15分，不过奇才依旧85-96落后猛龙。末节开战，奇才逐渐进入状态，利用中距离缩小分差，又是比尔中投和三分开启一波8-0，在小史密斯三分命中后比分被扳平，但之后麦考三分得手，随后洛瑞的三分帮助猛龙再次获得6分的领先，最后时刻比尔三分命中，尽管布朗两分打中，不过范弗利特的两罚全中杀死比赛，但最终猛龙120-119战胜奇才。</font></p>
<div class="center-photo"><img src="images/11.jpg"></div>
<p><font size="4" color="#515151">
2月21日讯 76人今日坐镇主场迎战独行侠，独行侠这边东契奇因伤继续休战。首节开局恩比德联手西蒙斯拿下8分带队取得13-5的开局领先，然而这样的开局却没能抵挡住独行侠的猛烈反击，小哈达威手感手感热得发烫，首节12投7中，包括5记三分球在内，一人独砍19分掀翻对手，独行侠借此以35-28反超76人结束第一节。次节独行侠继续掌控局面，面对76人的追赶，独行侠用一波14-1的攻势再一次拉开比分，76人直到最后时刻才找回感觉，恩比德联手科尔克马兹命中三记三分，76人才将分差重新追至个位数。半场战罢，独行侠63-57领先76人。易边再战，恩比德撑起76人的进攻，但却没能带动起76人整体的反扑，独行侠在顶住76人开局三板斧后逐渐拉开比分，塞思-库里最后时刻连拿7分，独行侠重新取得11分的领先进入最后一节。末节之争独行侠一直掌控比赛，76人仅在节中依靠斯科特拿下5分的表现将分差迫近至在8分，但随着独行侠连拿6分的表现，分差很快回到两位数。此后局面没有再起波澜，最终，独行侠117-98轻取76人。</font></p>
<div class="center-photo"><img src="images/10.jpg"></div>
<h3><font face="微软雅黑" size="5" color="#545454">最新排行雄鹿稳坐联盟第一</font></h3>
<p><font size="4" color="#515151">
</font></p>
<div><img src="images/13.png"></div>
<h4><audio autoplay="autoplay" controls="controls" >
<source src="images/The Zeitgeists - Superheroes.mp3">
</audio></h4>
<hr />
<hr />
<h4><li><a href="index首页.html"><font face="微软雅黑" size="6" color="#545454">返回首页</font></a></li></h4>
</div></div>
</body>
</html>
由于项目较为过多 ，详细完整项目请私信博主
内容总结
以上是互联网集市为您收集整理的基于Html+Css+javascript的网页制作（体育主题）全部内容，希望文章能够帮你解决基于Html+Css+javascript的网页制作（体育主题）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】