静态网页设计——BNA热火队介绍(HTML+CSS+JavaScript)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!

使用技术:HTML+CSS+JS
主要内容:对BNA的球队热火队进行介绍。

基本内容

1、首页

首页分为三部分,以html进行分割,最上方是一张热火队球员上场时加油打气的图片。中间用html+css设置了一个卡片菜单,点击某个卡片可以跳转到相应的页面。最下方注册网站会员,可以接收优惠信息。
在这里插入图片描述

代码:

<div id="photos"><ul><li><a href="html/赛程.html"><img src="image/640_playoffincentive_180312.jpg" width="337" height="337" /></a></li><li><a href="html/球队壁纸.html"><img src="image/640_june02_180611.jpg" width="337" height="337" /></a></li><li><a href="html/舞者试镜.html"><img src="image/640_dancers_180606.jpg" width="337" height="337" /></a></li><li><a href="html/球员列表.html"><img src="image/。。。。.jpg" width="337" height="337" /></a></li></ul>
</div>
<div class="clear"></div>
<div id="dibu"><div class="geceng"></div><div class="sousuo"><h1>注册接收迈阿密热火的新闻和优惠</h1><table><tr><td width="400"><font size="+1" color="#FFFFFF">名字</font><font color="#FF0000">*</font></td><td width="400"><font size="+1" color="#FFFFFF">姓氏</font><font color="#FF0000">*</font></td><td width="400"><font size="+1" color="#FFFFFF">电邮地址</font><font color="#FF0000">*</font></td></tr><tr><td><input id="tName" type="text" name="tName"></td><td><input id="wName" type="text" name="wName"></td><td><input id="email" type="text" name="email"></td></tr><tr><td colspan="3" height="100"><center><input type="submit" value="注册" id="btlogin" class="button" ></center></td></tr></table></div>
2、2017——2018赛程

使用table标签简单列举了该赛季各个球队的战绩情况。
在这里插入图片描述
代码:

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" align="left"><tr><td bgcolor="#ECECEC"> &nbsp;<font size="+2"><b>西南赛区</b></font></td></tr><tr><td height="58"><img src="../image/图标/b72de688b7833a63.png" width="40" height="40"> &nbsp;<font size="+1">休斯顿火箭</font></td></tr><tr><td height="58" ><img src="../image/图标/c5d7ee3d3999e1a3.png" width="40" height="40"> &nbsp;<font size="+1"></font>新奥尔良鹈鹕</td><tr><td height="58" ><img src="../image/图标/d61472f27405ef2f.png" width="40" height="40"> &nbsp;<font size="+1">圣安东尼奥马刺</font></td></tr><tr><td height="58" ><img src="../image/图标/e27275cb4a9cf56f.png" width="40" height="40"> &nbsp;<font size="+1">达拉斯独行侠</font></td></tr><tr><td height="58" ><img src="../image/图标/906d3cb1d084d39b.png" width="40" height="40"> &nbsp;<font size="+1">孟菲斯灰熊</font></td></tr><tr><td bgcolor="#ECECEC"> &nbsp;<font size="+2"><b>太平洋赛区</b></font></td></tr><tr><td height="58" ><img src="../image/图标/e6d876b019135540.png" width="40" height="40"> &nbsp;<font size="+1">金州勇士</font></td></tr><tr><td height="58" ><img src="../image/图标/0d6670544d67158b (1).png" width="40" height="40"> &nbsp;<font size="+1">洛杉矶快船</font></td></tr><tr><td height="58" ><img src="../image/图标/4f04d1b4f8a6548a.png" width="40" height="40"> &nbsp;<font size="+1">洛杉矶湖人</font></td></tr><tr><td height="58" ><img src="../image/图标/54b9b9a860d5000d.png" width="40" height="40"> &nbsp;<font size="+1">萨克拉门托国王</font></td></tr><tr><td height="58" ><img src="../image/图标/0e9dc75130b041bb.png"width="40" height="40"> &nbsp;<font size="+1">菲尼克斯太阳</font></td></tr><tr><td bgcolor="#ECECEC"><font size="+2"><b>西北赛区</b></font></td></tr><tr><td height="58" ><img src="../image/图标/079f9b6b4be966c1.png" width="40" height="40"> &nbsp;<font size="+1">波特兰开拓者</font></td></tr><tr><td height="58" ><img src="../image/图标/3d06df3d7207e41b.png" width="40" height="40"> &nbsp;<font size="+1">俄克拉荷马城雷霆</font></td></tr><tr><td height="58" ><img src="../image/图标/42e1e1f96e72c9e7.png" width="40" height="40"> &nbsp;<font size="+1">犹他爵士</font></td></tr><tr><td height="58" ><img src="../image/图标/171d8fbb81947872.png" width="40" height="40"> &nbsp;<font size="+1">明尼苏达森林狼</font></td></tr><tr><td height="58" ><img src="../image/图标/07eaaf35f02b3a43.png" width="40" height="40"> &nbsp;<font size="+1">丹佛掘金</font></td></tr><tr><td bgcolor="#ECECEC"><font size="+2"><b>大西洋赛区</b></font></td></tr><tr><td height="58" ><img src="../image/图标/8143ce5275f35b64.png" width="40" height="40"> &nbsp;<font size="+1">多伦多猛龙</font></td></tr><tr><td height="58" ><img src="../image/图标/58ad76e5013f88cd.png" width="40" height="40"> &nbsp;<font size="+1">波士顿凯尔特人</font></td></tr><tr><td height="58" ><img src="../image/图标/b4f0980fef76de22.png" width="40" height="40"> &nbsp;<font size="+1">费城76人</font></td></tr><tr><td height="58" ><img src="../image/图标/d1497fa2d3158da7.png" width="40" height="40"> &nbsp;<font size="+1">纽约尼克斯</font></td></tr><tr><td height="58" ><img src="../image/图标/8fb395595fe476f7.png" width="40" height="40"> &nbsp;<font size="+1">布鲁克斯篮网</font></td></tr><tr><td bgcolor="#ECECEC"><font size="+2"><b>东南赛区</b></font></td></tr><tr><td height="58" ><img src="../image/图标/584ff80b87a21cd8.png" width="40" height="40"> &nbsp;<font size="+1">迈阿密热火</font></td></tr><tr><td height="58" ><img src="../image/图标/a76937b225c20218.png" width="40" height="40"> &nbsp;<font size="+1">华盛顿奇才</font></td></tr><tr><td height="58" ><img src="../image/图标/30772edf038d248d.png" width="40" height="40"> &nbsp;<font size="+1">夏洛特黄蜂</font></td></tr><tr><td height="58" ><img src="../image/图标/6c8eb942322783b9.png" width="40" height="40"> &nbsp;<font size="+1">奥兰多魔术</font></td></tr><tr><td height="58" ><img src="../image/图标/19bd3ae56756823b.png" width="40" height="40"> &nbsp;<font size="+1">亚特兰大老鹰</font></td></tr><tr><td bgcolor="#ECECEC"><font size="+2"><b>中部赛区</b></font></td></tr><tr><td height="58" ><img src="../image/图标/b88b9d38a6685d3c.png" width="40" height="40"> &nbsp;<font size="+1">克利夫兰骑士</font></td></tr><tr><td height="58" ><img src="../image/图标/83b033b5c036f590.png"width="40" height="40"> &nbsp;<font size="+1">印第安纳步行者</font></td></tr><tr><td height="58" ><img src="../image/图标/9ed0197148520a9c.png" width="40" height="40"> &nbsp;<font size="+1">密尔沃基雄鹿</font></td></tr><tr><td height="58" ><img src="../image/图标/86e9f9cbf13706fb.png"width="40" height="40"> &nbsp;<font size="+1">底特律活塞</font></td></tr><tr><td height="58" ><img src="../image/图标/0d490533faca1986.png" width="40" height="40"> &nbsp;<font size="+1">芝加哥公牛</font></td></tr>
</table>
3、球队历史

使用P标签展示了球队的历史。
在这里插入图片描述
代码:

<table width="1200" height="600" border="0"><tr><td width="900"><h1>迈阿密热火</h1><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;迈阿密热火队(Miami Heat),于1988年成立并加入NBA,是一支属于美国佛罗里达州迈阿密市的职业篮球队,是美国男篮职业联赛(NBA)东部联盟东南赛区的一部分。迈阿密热火队热火主场设在迈阿密市中心的美航中心球馆。热火队与夏洛特黄蜂队同时成立于1988年NBA,是代表佛罗里达州的两支NBA球队之一(另一支为奥兰多魔术队)</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;球队位于四季温暖宜人的佛罗里达州迈阿密市,所以在众多候选队名名单中选择了“热”,既显示出了迈阿密的气候条件,又希望球队未来红红火火、蒸蒸日上。在最初的7个赛季,尽管热火拥有格伦·莱斯这样的超级得分手,但常规赛战绩从未超过50胜,期间只有两个赛季进入季后赛。1988至2013年的25个赛季里,迈阿密热火17次闯入季后赛,夺得了10次赛区冠军,并以4比2击败达拉斯小牛队赢得了2006年NBA总冠军。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2003年选秀大会他们在首轮第五顺位选择了来自马奎特大学的德怀恩·韦德。2004年热火与洛杉矶湖人交易得到沙奎尔·奥尼尔。2005-06赛季韦德率领热火首度杀入总决赛,在0-2落后的险境下翻盘达拉斯小牛队首捧总冠军。随着奥尼尔渐渐老去,热火的战斗力出现明显下滑。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在2010年夏季交易中,先后得到波什和詹姆斯的加盟,跟随韦德组成03届白金一代热火三巨头。带领球队杀入2010至2011NBA总决赛,但仍以2-4不敌达拉斯小牛队。2012年总决赛,以4-1战胜俄克拉荷马雷霆队,夺得总冠军。2013年6月21日经过抢七大战,以4-3险胜圣安东尼奥马刺队,夺得总冠军。</p></td><td width="300"><img src="../image/Heat  logo.jpg" height="500" width="300"></td></tr>
</table>
4、球员介绍

使用html+css设计成卡片的形式,展示每个球员信息。
在这里插入图片描述

点击球员名字,还能进入到该球员的详细信息介绍界面。
在这里插入图片描述

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1xk4y1X71e/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP打怪升级之路

新手村 上个世纪80年代末&#xff0c;有一天&#xff0c;Tim Berners-Lee正在工作&#xff0c;他需要与另一台计算机上的同事共享一个文件。他尝试使用电子邮件&#xff0c;但发现电子邮件不能发送二进制文件。Tim Berners-Lee意识到&#xff0c;他需要一种新的协议来共享二进制…

静态网页设计——喜羊羊与灰太狼(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV1Ta4y1B75m/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS 主要内容&a…

docker学习笔记04-可视化界面Portainer

1.Portainer简介 Portainer 是一款开源的容器管理工具&#xff0c;旨在帮助用户更轻松地管理 Docker 环境。无论您是 Docker 新手还是经验丰富的开发人员&#xff0c;Portainer 都提供了直观的用户界面&#xff0c;使您能够方便地创建、部署和监控容器。 安装 Portainer 非常…

Java项目:109SpringBoot超市仓管系统

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 一、项目介绍 超市仓管系统基于SpringBootMybatis开发&#xff0c;系统使用shiro框架做权限安全控制&#xff0c;超级管理员登录系统后可根据自己的实际需求配角色&…

PostgreSQL 分区

由于大量数据存储在数据库同一张表中&#xff0c;后期性能和扩展会受到影响。所以需要进行表分区&#xff0c;因为它可以将大表分成较小的表&#xff0c;从而减少内存交换问题和表扫描&#xff0c;最终提高性能。庞大的数据集被分成更小的分区&#xff0c;更易于访问和管理。 …

入门Python数据分析最好的实战项目

本篇将继续上一篇数据分析之后进行数据挖掘建模预测&#xff0c;这两部分构成了一个简单的完整项目。结合两篇文章通过数据分析和挖掘的方法可以达到二手房屋价格预测的效果。 下面从特征工程开始讲述。 特征工程 特征工程包括的内容很多&#xff0c;有特征清洗&#xff0c;…

DevOps(9)

目录 45.如何在Linux中将一个文件附加到另一个文件&#xff1f; 46.解释如何使用终端找到文件&#xff1f; 47.解释如何使用终端创建文件夹&#xff1f; 48.解释如何使用终端查看文本文件&#xff1f; 49.解释如何在Ubuntu LAMP堆栈上启用curl&#xff1f; 50.解释如何在…

Spring Cloud Gateway 缓存区异常

目录 1、问题背景 2、分析源码过程 3、解决办法 最近在测试环境spring cloud gateway突然出现了异常&#xff0c;在这里记录一下&#xff0c;直接上干货 1、问题背景 测试环境spring cloud gateway遇到以下异常 DataBufferLimitException: Exceeded limit on max bytes t…

YOLOv5独家原创改进:新颖的Shape IoU结合 Inner-IoU,基于辅助边框的IoU损失的同时关注边界框本身的形状和尺度,小目标实现高效涨点

💡💡💡本文改进:一种新的Shape IoU方法结合 Inner-IoU,基于辅助边框的IoU损失的同时,更加关注边界框本身的形状和尺度来计算损失 💡💡💡对小目标检测涨点明显,在VisDrone2019、PASCAL VOC均有涨点 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/ca…

图像处理中的DCT变换

图像处理中的DCT变换 Discrete Cosine Transform&#xff0c;离散余弦变换。 来源及公式推导&#xff0c;可以查看下面链接&#xff0c;介绍的比较详细&#xff0c;这里就不再重复说明了&#xff1a; 详解离散余弦变换&#xff08;DCT&#xff09; - 知乎 (zhihu.com)DCT变换…

Excel如何将单元格设为文本

文章目录 一、打开excel文件二、选中单元格三、右键设置单元格格式四、设置界面选择文本后点确定五、其他问题 在caa开发过程中遇到从CATUnicodeString转成CString时&#xff0c;通过SetItemText写入将ID号写入单元格&#xff0c;无法保存ID号中的数字0&#xff0c;故将单元格格…

03 decision tree(决策树)

一、decision tree&#xff08;决策树&#xff09; 1. classification problems&#xff08;纯度&#xff09; i . entropy &#xff08;熵&#xff09; ​ 作用&#xff1a;衡量一组数据的纯度是否很纯 &#xff0c;当五五开时他的熵都是最高的&#xff0c;当全是或者都不是…

【计算机算法设计与分析】棋盘覆盖问题(C++_分治法)

文章目录 题目描述测试样例算法原理算法实现参考资料 题目描述 在一个 2 k 2 k 2^k \times 2^k 2k2k个方格组成的棋盘中&#xff0c;若恰有一个方格与其他方格不同&#xff0c;则称该方格为一个特殊方格&#xff0c;且称该棋盘为一个特殊棋盘。显然&#xff0c;特殊方格在棋…

mysql之CRUD和常见函数和UNION 和 UNION ALL

mysql之CRUD和常见函数和UNION 和 UNION ALL 一.CRUD1.创建&#xff08;Create&#xff09; - 插入数据2.读取&#xff08;Read&#xff09; - 查询数据3.更新&#xff08;Update&#xff09; - 修改数据4.删除&#xff08;Delete&#xff09; - 删除数据 二.函数1.字符串函数&…

并发程序设计--D4GDB调试多进程程序

使用GDB调试此程序 start后 10行进入father进程&#xff0c;接下来会一直在父进程不断执行程序 那么如何进入子进程&#xff1f; 此时杀死此程序进程 重新gdb调试&#xff0c;使用以下命令&#xff0c;再使用n&#xff0c;可进入子进程 那么如何同时调试父进程和子进程 上图可…

年终护眼台灯哪个好用?适合学生备考的台灯推荐

最近临近寒假&#xff0c;就有好多家长们和高校学子们催我推荐护眼台灯&#xff0c;人眼对光是非常敏感的&#xff0c;特别是儿童青少年眼睛还在发育的状态来说&#xff0c;光线是至关重要的&#xff0c;于是这次选择的护眼台灯我都是经过亲自使用测试的。 但由于现在护眼台灯…

【kettle】pdi/data-integration 打开ktr文件报错“Unable to load step info from XML“

一、报错内容&#xff1a; Unable to load step info from XML step nodeorg.pentaho.di.core.exception.KettleXMLException: Unable to load step info from XMLat org.pentaho.commons.launcher.Launcher.main (Launcher.java:92)at java.lang.reflect.Method.invoke (Met…

FA2016AA (MHz范围晶体单元超小型低轮廓贴片) 汽车

随着科技的不断发展&#xff0c;智能汽车逐渐成为人们出行的首选。而其中&#xff0c;频率范围在19.2 MHz ~ 54 MHz的晶体单元超小型低轮廓贴片&#xff08;FA2016AA&#xff09;为汽车打造更智能、更舒适、更安全的出行体验。FA2016AA贴片的外形尺寸为2.0 1.6 0.5 mm&#x…

新手深入浅出理解PyTorch归一化层全解析

目录 torch.nn子模块normal层详解 nn.BatchNorm1d BatchNorm1d 函数简介 函数工作原理 参数详解 使用技巧与注意事项 示例代码 nn.BatchNorm2d BatchNorm2d 函数简介 函数工作原理 参数详解 使用技巧与注意事项 示例代码 nn.BatchNorm3d BatchNorm3d 函数简介 参…

防浪涌TVS:电子设备的保护盾?|深圳比创达电子

在电子设备日益普及的今天&#xff0c;我们经常会听到设备因电压波动或突发浪涌而损坏的情况。那么&#xff0c;有没有一种方式可以保护我们的设备免受这些意外伤害&#xff1f;答案就是“防浪涌TVS(Transient Voltage Suppressor)”。但它是什么&#xff1f;它如何工作&#x…