| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 近期暂无比赛，请稍后再来查看。 | ||||
h1. 实时赛况速递 | 36px 赛事标题 |
h2. 近期赛程一览 | 30px 赛事名称 |
h3. 比赛详情速览 | 24px 赛况详情 |
h4. 热门赛事分类 | 18px 选手数据 |
h5. 游戏专区入口 | 14px 实时更新 |
h6. 赛事信息概览 | 12px 赛事讨论 |
資訊（含 progress-bar-info 類別。）
成功（含 progress-bar-success 類別。）
警告（含 progress-bar-warning 類別。）
危險（含 progress-bar-danger 類別。）
反向（含 progress-bar-inverse 類別。）
反向（含 progress-bar-inverse 類別。）
添加修饰类，优化赛况标签视觉效果。
| 直播状态 | 赛况标签 |
|---|---|
| 纯文本 | 42 |
.badge-primary | 1 |
.badge-success | 22 |
.badge-info | 30 |
.badge-warning | 412 |
.badge-danger | 999 |
运用 .badge 类，轻松标记新赛事或未读信息。
为表格添加基础类 .table，实现标准样式、轻量级内边距及水平滚动。
| # | 主队名称 | 客队名称 | 比分 |
|---|---|---|---|
| 1 | 标记 | 顶尖选手A | 直播员@douyu.com |
| 2 | 选手姓名 | 战队名称 | 用户@douyu |
| 3 | 比赛名称 | 比赛类型 | 官方频道 |
为 .table 基础类添加以下任意修饰类。
通过 :nth-child CSS 选择器，为 <tbody> 内的表格行添加斑马条纹效果。
| # | 主队名称 | 客队名称 | 比分 |
|---|---|---|---|
| 1 | 标记 | 明星选手A | 赛事解说@douyu.com |
| 2 | 选手代号 | 战队代号 | 玩家@douyu |
| 3 | 赛事名称 | 赛事分类 | 官方账号 |
为表格增添边框与圆角。
| # | 主队名称 | 客队名称 | 比分 |
|---|---|---|---|
| 1 | 标记 | 潜力选手A | 官方客服@douyu.com |
| 标记 | 热门选手A | 官方合作频道 | |
| 2 | 选手ID | 战队ID | 观众@douyu |
| 3 | 赛事精彩集锦 | 官方直播间 | |
为 <tbody> 内的表格行启用悬停状态。
| # | 主队名称 | 客队名称 | 比分 |
|---|---|---|---|
| 1 | 标记 | 新秀选手A | 技术支持@douyu.com |
| 2 | 选手昵称 | 战队昵称 | 粉丝@douyu |
| 3 | 赛事精彩集锦 | 官方媒体 | |