首页 > 其他分享 >html实现NBA总决赛统计表

html实现NBA总决赛统计表

时间:2023-10-10 23:04:27浏览次数:47  
标签:baidu https img image 193 html background NBA 统计表

案例注意事项:

1.注意背景图片不需要用img实现,因为img标签中的title是鼠标悬停在图片上的时候显示的内容。

实现效果图:

html实现NBA总决赛统计表_背景图片

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .bkmaci{

            width: 50px;

            background-image:url(https://t7.baidu.com/it/u=1092574912,855301095&fm=193&f=GIF) ;

        }

        .rehuo{

            background-size: auto;

            background-image:url(https://t7.baidu.com/it/u=1620952818,4218424235&fm=193&f=GIF);

        }

    </style>

</head>

<body>

    <table border="5px" align="center" cellspacing="2px" cellpadding="8px">

        <tr align="center">

            <td width="100px">球队</td>

            <td width="100px">球员</td>

            <td width="100px">夺冠次数</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td rowspan="3" class="bkmaci">马刺队</td>

            <td>邓肯</td>

            <td rowspan="3">5次</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td>帕克</td>

        </tr>

        <tr align="center" bgcolor="lightgray">

            <td>吉诺比利</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td rowspan="3" class="rehuo">烈火队</td>

            <td>詹姆斯</td>

            <td rowspan="3" >3次</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td>韦德</td>

        </tr>

        <tr align="center" bgcolor="lightpink">

            <td>波什</td>

        </tr>

        <tr>

            <td colspan="3">比赛解说:黄健翔、姚明</td>

        </tr>

    </table>

</body>

</html>


标签:baidu,https,img,image,193,html,background,NBA,统计表
From: https://blog.51cto.com/u_15937426/7800594

相关文章

  • html引用远程js脚本
    html引用远程js脚本varscript=document.createElement('script');script.src='https://example.com/remote-script.js';document.head.appendChild(script);script.addEventListener('load',function(){//远程脚本加载完成后执行的代码conso......
  • HTML中form表单隐藏input的两种方式
    以下是两种常用的隐藏元素的方法:第一种:使用内联样式:在input元素上添加style="display:none;"属性。html<formaction="/upload"method="post"enctype="multipart/form-data"><inputtype="file"name="file"class=&q......
  • HTML5的应用范围有哪些?
     HTML5的应用范围有哪些?HTML5开发作为前端开发的重要组成部分,一直备受关注。HTML5的应用范围也是越来越广。它可以用来构建跨平台移动应用、开发游戏、建立电子商务网站,甚至在智能家居和物联网领域也找到了一席之地。简直就是无所不能。 HTML5开发的一个重要方向是移动端应用开发......
  • HTML
    HTML链接由<a>标签定义。链接的地址在href属性中指定:eg:<ahref="http://www.w3school.com.cn">Thisisalink</a><hr/>标签在HTML页面中创建水平线<head>元素是所有头部元素的容器。以下标签都可以添加到head部分:<title>、<base>、<link>、<meta>、......
  • Application Cache HTML
    主要是加速离线存储,Web开发者可借助微信提供的资源存储能力,直接从地加载Web资源而不需要再从服务端拉取,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验使用方式example.appcacheCACHEMANIFEST#版本号或注释CACHE:index.htmlstyles.cssapp.jsNETWO......
  • 影刀引用Python模块实现html转为markdown
    比如,我获取了一段html的文本,想要转成markdown格式,可以参考下面用法1.引入一个html2text的包,右键可以看到python包管理器2.插入python代码,转换变量有疑问加站长微信联系(非本文作者)......
  • 初步了解HTML
    初步了解HTML一、html介绍html定义HTML的全称为:HyperTextMark-upLanguage,指的是超文本标记语言。标记就是标签,<标签名称></标签名称>,比如、等,大多数标签都是成对出现的所谓超文本,有两层含义:因为网页中还可以有图片、视频、音频等内容(超文本限制)它还可以从一个网页......
  • 认识HTML
    一什么是H5?1.HTML的第5个版本2.一门技术的总称二H5能做什么?1.网页开发2.小程序/公众号3.APP开发4.小游戏开发5.桌面应用......三网站建站流程1.注册域名2.购买服务器3.进行项目开发4.网站推广5.网站维护四项目开发流程1.产品经理确定需求,产出需求文档(prd......
  • 需编写html代码,快速搭建一个公司管理系统
    快速搭建一个公司管理系统MagicTable基于vue-admin-beautiful,elementui,vue-easytable等实现的网页快速生成框架,无需编写html和css代码,只需要编写js文件就能实现管理面板的表格页面。github链接https://github.com/YSASM/MagicTable特点轻量简洁缩短开发时间示例如......
  • VS下的Emmet技巧(HTML Coding 效率Kit)
    tag:技巧点VSCode的EmmetAbbreviation参考参考参考2生成4行p标签p*4   E.class E#id E[attr=foo] E{foo} E>N E+N E^N......