CSS基础：table的4个标签的样式详解（6000字长文！附案例）

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

276篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

之前在 HTML 基础部分，我们讲解了表格的结构和写法HTML 表格的使用，收藏这1篇就够了！。简单回顾下。

  • <table> 包含 <thead>、<tbody>、<tfoot> 等表格部分。

  • <thead> 和 <tbody> 分别包含多个 <tr> 行。

  • <tr> 行中可以包含 <th> 或 <td> 单元格，用来显示表格的标题或数据。

本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。

图片

ok，那我们一起来看看这些表格标签的样式属性吧。

一、表格的样式属性

1. 设置表格边框

通过 CSS 的 border 属性可以设置表格的边框样式、宽度和颜色。例如：

table {
  border-collapse: collapse; /* 合并表格边框 */
  border: 1px solid #ccc; /* 设置表格边框样式和颜色 */
}

2. 设置表格外边距

可以使用 margin 属性CSS基础：margin属性4种值类型，4个写法规则详解来设置表格的外边距。例如：

table {
  margin: 20px; /* 设置表格外边距 */
}
、

3. 设置表格背景

使用 background 属性可以设置表格或单元格的背景。例如，设置颜色。

table {
  background-color: #f8f8f8; /* 设置表格背景颜色 */
}

4. 设置表格文本

使用 color，text-align，line-height，可以统一设置表格内文本的颜色，文字位置，行高等。例如：

table {
  color: #fff; /* 设置表格文字颜色 */
  text-align: center; /* 设置表格文字居中 */
  line-height: 40px; /* 设置表格行高 */
}

5. 设置表格的宽高

通过 CSS 的 width，height 属性可以设置表格的宽，高。例如：

table {
  width: 500px; /* 设置表格宽度 */
  height: 300px; /* 设置表格高度 */
}

设置表格的高度（height）会影响表格在页面中的布局和显示效果，具体影响有以下几点。

  1. 固定高度： 设置表格的高度可以使表格在垂直方向上占据固定的空间，这在需要确保表格在页面中占据特定高度的情况下非常有用，比如需要将表格设置为固定的侧边栏或者特定高度的数据展示区域。

  2. 内容溢出： 如果表格的高度设置不足以容纳其中的内容，内容可能会溢出表格，导致显示不完整或者被隐藏。这时可以通过设置表格容器的滚动条或者调整表格高度来解决溢出问题。比如，垂直方向的表格可以设置：overflow-y: auto;。

  3. 自适应高度： 如果表格的高度未设置或者设置为自适应（比如默认的 auto 值），表格会根据内容自动调整高度，保证内容完整显示，这在表格内容高度不确定或者动态变化的情况下非常实用。

总的来说，设置表格的高度可以根据实际布局需求来调整表格在页面中的显示效果，保证内容的完整展示并且符合页面整体布局。

下面是一个综合应用上述样式的示例：

<!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>
      table {
        width: 80%;
        margin: 20px auto;
        border-collapse: collapse; /* 设置表格边框合并 */
        margin-top: 20px;
        border: 10px solid #1916e3;
        background: #c1c1df;
        color: #fff; /* 设置表格文字颜色 */
        text-align: center; /* 设置表格文字居中 */
        line-height: 40px; /* 设置表格行高 */
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>数学成绩</th>
          <th>语文成绩</th>
          <th>英语成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>张三</td>
          <td>85</td>
          <td>78</td>
          <td>92</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>李四</td>
          <td>92</td>
          <td>87</td>
          <td>88</td>
        </tr>
        <tr>
          <td>1003</td>
          <td>王五</td>
          <td>78</td>
          <td>80</td>
          <td>85</td>
        </tr>
        ...可以多复制几行 tr ...
      </tbody>
    </table>
  </body>
</html>

效果如图：

图片

二、表头的样式属性

很多时候呢，表头的样式是要区别于表格的其他部分的。当为表头单元格设置特殊样式时，可以使用以下 CSS 属性：

  1. 背景（background）： 可以设置表头单元格的背景颜色或者增加 icon 图标，使其与其他单元格区分开来。

  2. 字体样式（font-style）： 可以设置表头单元格的字体样式，如斜体、粗体等，以突出表头信息。

  3. 对齐方式（text-align）： 可以设置表头单元格中文本的对齐方式，如左对齐、右对齐、居中对齐等，使表头内容排版更加整齐。

下面是代码，来看一下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格样式演示</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th {
        background-color: #007bff; /* 蓝色背景 */
        color: #fff; /* 白色字体 */
        font-weight: bold; /* 粗体字 */
        text-align: center; /* 居中对齐 */
        padding: 10px; /* 设置内边距 */
      }
      td {
        border: 1px solid #ccc; /* 设置边框 */
        padding: 10px; /* 设置内边距 */
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果如图：

图片

三、表格行样式属性

为表格的行设置样式可以通过 CSS 的伪类选择器来实现，常用的包括：

  1. 奇偶行样式（:nth-child）： 这个也叫作，斑马表格。可以通过给奇偶行<tr> 增加 CSS 样式，或者 :nth-child 伪类选择器为表格的奇偶行设置不同的样式，以增加表格的可读性。

  2. 鼠标悬停样式（:hover）： 可以使用 :hover 伪类选择器为鼠标悬停在行上时添加特定的样式，以提高表格的交互性。

以下是一个示例的 CSS 代码，演示了如何为表格的行设置奇偶行样式和鼠标悬停样式：

<!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>
      /* 表格样式 */
      table {
        width: 100%;
        border-collapse: collapse; /* 合并边框 */
        border: 1px solid #333;
      }
      th,
      td {
        border: 1px solid #333;
      }

      /* 奇偶行样式 */
      tr:nth-child(even) {
        background-color: #f2f2f2; /* 偶数行背景色 */
      }

      tr:nth-child(odd) {
        background-color: #fff; /* 奇数行背景色 */
      }

      /* 鼠标悬停样式 */
      tr:hover {
        background-color: #29ec8b; /* 鼠标悬停时背景色 */
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="highlight">张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
        </tr>
        <tr>
          <td class="highlight">张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
        </tr>
        <tr>
          <td class="highlight">张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        ...(自己多复制几行 tr，不在这里写了，浪费空间。)
      </tbody>
    </table>
  </body>
</html>

效果如图：

图片

四、单元格的样式属性

  1. 背景（background）： 可以设置单元格的背景，使内容更加突出或与其他单元格区分开。但这个，通常会使用表格的背景或者表格行来设置单元格的背景，除非单元格样式和其他单元格的样式有不同，才会单独写样式。

  2. 边框样式（border）： 可以设置单元格的边框样式，如实线、虚线、点线等，用于区分单元格之间的边界。

  3. 文字样式（color、font-weight、font-style、text-align 等）： 可以设置单元格中文字的颜色、粗细、字体样式、对齐方式等，以使内容更加易读和美观。这个，通常不单独设置，通常会使用表格的文本样式或者表格行来设置单元格的文本样式，除非样式和其他单元格的样式有不同，才会单独写样式。

以下是代码。

<!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>
      /* 表格样式 */
      table {
        width: 100%;
        border-collapse: collapse; /* 合并边框 */
      }
      /* 单元格样式 */
      td {
        color: #333; /* 白色文字 */
        border: 1px solid #ccc; /* 边框样式 */
        padding: 8px; /* 内边距 */
        text-align: right; /* 文字居右对齐 */
      }
      td.highlight {
        background-color: #ec638a; /* 特殊的红色背景 */
        color: #fff; /* 文字变成白色 */
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="highlight">张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果如图：

图片

综合案例

那你可能会说，表格，表格行，和单元格都能设置背景，文字，行高，它们写在什么元素上最合理呢？我有以下 3 条建议，可做参考：

对于表格整体的样式，如背景色、边框等，可以直接在 table 元素上设置。

  1. 表格整体样式：

table {
  background-color: #f8f8f8; /* 设置表格背景色 */
  border-collapse: collapse; /* 合并表格边框 */
  border: 1px solid #ddd; /* 设置表格边框样式和颜色 */
  line-height: 30px; /* 设置表格行高 */
}

  1. 表头单元格样式：

    对于表格的表头单元格，可以使用 th 元素或指定的类选择器进行样式设置。

th {
  background-color: #333; /* 设置表头背景色 */
  color: #fff; /* 设置表头文字颜色 */
  text-align: center; /* 设置文字居中对齐 */
}

对于表格的行样式，如奇偶行背景色、鼠标悬停效果等，可以使用 tr 元素或指定的类选择器进行样式设置。

  1. 表格行样式：

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

tr:nth-child(odd) {
  background-color: #fff; /* 奇数行背景色 */
}

tr:hover {
  background-color: #ddd; /* 鼠标悬停时背景色 */
}

对于表格的单元格样式，如背景色、文字样式和行高等，可以使用 td 元素或指定的类选择器进行样式设置。

  1. 单元格样式：

td {
  padding: 10px; /* 设置单元格内边距 */
  text-align: center; /* 设置文字居中对齐 */
  line-height: 30px; /* 设置行高 */
}

/* 设置特定类的单元格样式 */
.highlight-cell {
  background-color: #ffc; /* 设置单元格背景色 */
  font-weight: bold; /* 设置文字加粗 */
  color: #f00; /* 设置文字颜色 */
}

最后，咱们来一个综合应用的案例。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生成绩单</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        width: 80%;
        margin: 30px auto; /* 让表格居中 */
        border-collapse: collapse;
        border: 2px solid #ddd; /* 整体边框颜色 */
      }
      th,
      td {
        line-height: 40px; /* 行高 */
        border: 1px solid #ddd; /* 每行边框 */
        text-align: center;
        font-size: 16px;
      }
      th {
        background-color: #007bff; /* 表头背景色 */
        color: #ffffff;
      }
      /* 这次奇偶行用 class 来写 */
      tr.even {
        background-color: #eee; /* 偶数行浅灰色 */
      }
      tr:hover {
        background-color: #ccc; /* 鼠标悬停时的背景色:蓝色 */
      }
      /* 把90分以上的要特殊标识绿色 */
      td.perfect {
        background-color: #00ff00; /* 绿色背景 */
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>数学成绩</th>
          <th>语文成绩</th>
          <th>英语成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>张三</td>
          <td>85</td>
          <td>78</td>
          <td class="perfect">98</td>
        </tr>
        <!-- 给2,4,6行数据，加上even(偶数)的class名称，做斑马条纹 -->
        <tr class="even">
          <td>1002</td>
          <td>李四</td>
          <td class="perfect">92</td>
          <td>87</td>
          <td>88</td>
        </tr>
        <tr>
          <td>1003</td>
          <td>王五</td>
          <td>78</td>
          <td>80</td>
          <td>85</td>
        </tr>
        <tr class="even">
          <td>1001</td>
          <td>张三</td>
          <td>85</td>
          <td>78</td>
          <td>92</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>李四</td>
          <td>89</td>
          <td>87</td>
          <td>88</td>
        </tr>
        <tr class="even">
          <td>1003</td>
          <td>王五</td>
          <td>78</td>
          <td>80</td>
          <td>85</td>
        </tr>
        <!-- 其他行以此类推 -->
      </tbody>
    </table>
  </body>
</html>

效果如下。

图片

OK，本文完。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Java】Comparable和Comparator的区别

【Java】Comparable和Comparator的区别

文章目录 区别Comparable示例Comparator示例参考资料 都可以用于排序。都是接口。 区别 Comparable示例 让被排序的类实现 Comparable 接口&#xff0c;重写 compareTo() 方法。 import java.util.*;public class Main {public static void main(String[] args){TreeSet<…
阅读更多...
端点安全时刻影响着网络安全，我们应该如何保护

端点安全时刻影响着网络安全，我们应该如何保护

端点&#xff08;Endpoint&#xff09;是网络通信中的一个重要概念&#xff0c;指的是网络通信中的发送或接收信息的设备或节点。在一个网络中&#xff0c;端点可以是硬件设备&#xff08;如计算机、服务器、手机、路由器等&#xff09;&#xff0c;也可以是软件应用或服务。端…
阅读更多...
PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出)

PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出)

文章目录 效果一览文章概述订阅专栏只能获取一份代码部分源码参考资料效果一览 文章概述 PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出) 订阅专栏只能获取一份代码 部分源码 %------
阅读更多...
ceph osd分组

ceph osd分组

一、前言 使用分组可以更好的管理osd&#xff0c;将不同类型的磁盘&#xff0c;分到不同的组中&#xff0c;例如hhd类型的osd分配到hhd组&#xff0c;ssd类型的osd分配到ssd组&#xff0c;将io要求不高的分配到hhd组做存储&#xff0c;io要求高的分配到ssd组做存储 二、配置 查…
阅读更多...
Linux驱动开发笔记（一）字符驱动

Linux驱动开发笔记（一）字符驱动

文章目录 前言一、字符设备驱动程序框架二、基本原理1. 设备号的申请与归还2. 保存file_operations接口3. 设备节点的创建和销毁4. 创建文件设备4.1 mknod4.2 init_special_incode( )函数 5. 查找file_operation接口函数速查表 三、程序编写1. 模块初始化及关闭2. 文件操作方式…
阅读更多...
墨子web3时事周报

墨子web3时事周报

蚂蚁集团Web3研发进展与布局 国内Web3赛道的领军企业——蚂蚁集团&#xff0c;凭借其在前沿科技领域的深耕不辍&#xff0c;已在Web3技术研发疆域缔造了卓越战绩。特别是在引领行业革新的关键时刻&#xff0c;集团于今年四月末震撼推出了颠覆性的Web3全套解决方案&#xff0c…
阅读更多...
【Godot4自学手册】第三十八节给游戏添加音效

【Godot4自学手册】第三十八节给游戏添加音效

今天&#xff0c;我的主要任务就是给游戏添加音效。在添加音效前&#xff0c;我们需要了解一个东西&#xff1a;音频总线。这个东西或许有些枯燥&#xff0c;如果你只为添加一个音效没必要了解太多&#xff0c;但如果你以后将要经常与音频播放打交道&#xff0c;还是要了解一下…
阅读更多...
ARM学习（26）链接库的依赖查看

ARM学习（26）链接库的依赖查看

笔者今天来聊一下查看链接库的依赖。 通常情况下&#xff0c;运行一个可执行文件的时候&#xff0c;可能会出现找不到依赖库的情况&#xff0c;比如图下这种情况&#xff0c;可以看到是缺少了license.dll或者libtest.so&#xff0c;所以无法运行。怎么知道它到底缺少什么dll呢&…
阅读更多...
论婚恋相亲交友软件的市场前景和开发方案H5小程序APP源码

论婚恋相亲交友软件的市场前景和开发方案H5小程序APP源码

随着移动互联网的快速发展和社交需求的日益增长&#xff0c;婚恋相亲交友软件小程序成为了越来越多单身人士的选择。本文将从市场前景、使用人群、盈利模式以及竞品分析等多个角度&#xff0c;综合论述这一领域的现状与发展趋势。 一、市场前景 在快节奏的现代生活中&#xf…
阅读更多...
矩阵混乱度（熵值）代码计算

矩阵混乱度（熵值）代码计算

1、先回顾下熵值的数据公式&#xff1a; 2、jax.numpy代码 注意的点&#xff1a;熵值计算的输入的必须是归一化的正值 import jax.numpy as jnp import jax def _entroy(probs):log_probs jnp.log2(jnp.maximum(1.0e-30, probs))mean_sum_plogp jnp.mean(- jnp.sum(log_pro…
阅读更多...
面试题：Redis如何防止缓存穿透 + 布隆过滤器原理

面试题：Redis如何防止缓存穿透 + 布隆过滤器原理

题目来源 招银网络-技术-1面 题目描述 缓存穿透是什么&#xff1f;如何防止缓存穿透布隆过滤器的原理是什么&#xff1f; 我的回答 缓存穿透是什么&#xff1f; 攻击者大量请求缓存和数据库中都不存在的key。如何防止缓存穿透 可以使用布隆过滤器布隆过滤器的原理是什么&a…
阅读更多...
mysql数据库连接工具（mysql数据库连接工具怎么备份数据不备份表结构）

mysql数据库连接工具（mysql数据库连接工具怎么备份数据不备份表结构）

MySQLWorkbench连接,导入和导出数据库? 1、导出&#xff1a;使用MySQL Workbench连接到MySQL服务器&#xff0c;选择要导出的数据库&#xff0c;右键单击数据库并选择“导出”。选择要导出的表和数据&#xff0c;将导出文件保存为.sql文件。 2、打开MySQL Workbench&#xf…
阅读更多...
【GlobalMapper精品教程】074：从Lidar点云创建3D地形模型

【GlobalMapper精品教程】074：从Lidar点云创建3D地形模型

本文基于地形点云数据，基于泊松方法、贪婪三角形测量方法和阿尔法形状创建3d地形模型。 文章目录 一、加载地形点云数据二、创建三维地形模型1. 泊松方法2. 贪婪三角形测量方法3. 阿尔法形状注意事项一、加载地形点云数据 加载配套案例数据包中的data074.rar中的地形点云数据…
阅读更多...
分类分析模型

分类分析模型

目录 1.目的 2.内容 2.1决策树分类模型 2.2K近邻分类模型 3.代码实现 3.1分类分析模型 3.2K近邻分类模型 1.目的 掌握利用Python语言及相关库编写决策树分类分析模型的方法&#xff0c;所构建的决策树能够对给定的数据集进行分类。掌握利用Python语言及相关库编写K近邻分…
阅读更多...
matlab学习003-绘制由差分方程表示的离散系统图像

matlab学习003-绘制由差分方程表示的离散系统图像

目录 1&#xff0c;题目 2&#xff0c;使用函数求解差分方程 1&#xff09;基础知识 ①filter函数和impz函数 ②zeros函数 ☀ 2&#xff09;绘制图像 ​☀ 3&#xff09;对应代码 如果连简单的信号都不会的&#xff0c;建议先看如下文章&#x1f447;&#xff0c;之…
阅读更多...
2024华中杯C题光纤传感器平面曲线重建原创论文分享

2024华中杯C题光纤传感器平面曲线重建原创论文分享

大家好&#xff0c;从昨天肝到现在&#xff0c;终于完成了2024华中杯数学建模C题的完整论文啦。 给大家看一下目录吧&#xff1a; 目录 摘 要&#xff1a; 10 一、问题重述 12 二&#xff0e;问题分析 13 2.1问题一 13 2.2问题二 14 2.3问题三 14 三、模型假设 15 四、…
阅读更多...
一文学会Amazon transit GateWay

一文学会Amazon transit GateWay

这是一个中转网关&#xff0c;使用时候需要在需要打通的VPC内创建一个挂载点&#xff0c;TGW会管理一张路由表来决定流量的转发到对应的挂载点上。本质上是EC2的请求路由到TGW&#xff0c;然后在查询TGW的路由表来再来决定下一跳&#xff0c;所以需要同时修改VPC 内子网的路由表…
阅读更多...
【深度学习实战（10）】图像推理之预处理

【深度学习实战（10）】图像推理之预处理

一、预处理流程 在把一张图像送入模型进行推理时&#xff0c;需要先进行预处理&#xff0c;预处理流程包括&#xff1a; &#xff08;1&#xff09;读取图像 &#xff08;2&#xff09;尺寸调整&#xff0c;letter_box&#xff08;不失真&#xff09; &#xff08;3&#xff0…
阅读更多...
从 Elastic 的 Go APM 代理迁移到 OpenTelemetry Go SDK

从 Elastic 的 Go APM 代理迁移到 OpenTelemetry Go SDK

作者&#xff1a;来自 Elastic Damien Mathieu 正如我们之前所分享的&#xff0c;Elastic 致力于帮助 OpenTelemetry&#xff08;OTel&#xff09;取得成功&#xff0c;这意味着在某些情况下构建语言 SDK 的分发版本。 Elastic 在观察性和安全数据收集方面战略性地选择了 OTel…
阅读更多...
【Win】怎么下载m3u8视频\怎么通过F12开发人员工具获取视频地址\怎么下载完整的.ts格式视频

【Win】怎么下载m3u8视频\怎么通过F12开发人员工具获取视频地址\怎么下载完整的.ts格式视频

怎么下载m3u8视频&#xff1f;首先通过浏览器本地的开发人员工具&#xff0c;获取m3u8的地址&#xff0c;然后再通过第三方下载工具下载&#xff0c;此处以N_m3u8DL-CLI_v3.0.2为例 如下图的步骤&#xff0c;即可获取到视频的m3u8地址 打开N_m3u8DL-CLI_v3.0.2&#xff0c;粘贴…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站