CSS列表与表格

news2024/12/24 20:45:17

目录

​编辑

HTML 列表和 CSS 列表属性

不同的列表项目标记

实例

图像作为列表项标记

实例

定位列表项标记

实例

删除默认设置

实例

列表 - 简写属性

实例

设置列表的颜色样式

实例

更多实例

所有 CSS 列表属性

表格边框

实例

全宽表格

实例

双边框

合并表格边框

实例

实例

表格宽度和高度

实例

实例

水平对齐

实例

实例

垂直对齐

实例

表格内边距

实例

水平分隔线

实例

可悬停表格

实例

条状表格

实例

表格颜色

实例

响应式表格

实例

更多实例

CSS 表格属性

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

  • 无序列表（<ul>）- 列表项用的是项目符号标记
  • 有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

实例

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

亲自试一试

注释：有些值用于无序列表，而有些值用于有序列表。

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

实例

ul {
  list-style-image: url('sqpurple.gif');
}

亲自试一试

定位列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

实例

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

亲自试一试

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

亲自试一试

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

实例

ul {
  list-style: square inside url("sqpurple.gif");
}

亲自试一试

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

实例

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

结果：

亲自试一试

更多实例

带红色左边框的自定义列表

本例演示如何创建带有红色左边框的列表。

全屏宽度的边框列表

本例演示如何创建没有项目符号的带边框列表。

列表的所有不同列表项标记

本例演示了 CSS 中所有不同的列表项标记。

所有 CSS 列表属性

属性描述
list-style简写属性。在一条声明中设置列表的所有属性。
list-style-image指定图像作为列表项标记。
list-style-position规定列表项标记（项目符号）的位置。
list-style-type规定列表项标记的类型。

使用 CSS 可以极大地改善 HTML 表格的外观：

CompanyContactAddressCity
AlibabaMa YunNo. 699, Wangshang Road, Binjiang DistrictHangzhou
APPLETim Cook1 Infinite Loop Cupertino, CA 95014Cupertino
BAIDULi YanHongLixiang guoji dasha,No 58, beisihuanxiluBeijing
CanonTsuneji UchidaOne Canon Plaza Lake Success, NY 11042New York
GoogleLarry Page1600 Amphitheatre Parkway Mountain View, CA 94043Mountain View
HUAWEIRen ZhengfeiPutian Huawei Base, Longgang DistrictShenzhen
MicrosoftBill Gates15700 NE 39th St Redmond, WA 98052Redmond
NokiaOlli-Pekka KallasvuoP.O. Box 226, FIN-00045 Nokia GroupHelsinki
SONYKazuo HiraiPark Ridge, NJ 07656Park Ridge
TencentMa HuatengTencent Building, High-tech Park, Nanshan DistrictShenzhen

亲自试一试

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

FirstnameLastname
BillGates
SteveJobs

实例

table, th, td {
  border: 1px solid black;
}

亲自试一试

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

实例

table {
  width: 100%;
}

亲自试一试

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

FirstnameLastname
BillGates
SteveJobs

实例

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

亲自试一试

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

FirstnameLastname
BillGates
SteveJobs

实例

table {
  border: 1px solid black;
}

亲自试一试

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

table {
  width: 100%;
}

th {
  height: 50px;
}

亲自试一试

要创建仅占页面一半的表，请使用 width: 50%：

实例

table {
  width: 50%;
}

th {
  height: 70px;
}

亲自试一试

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

th {
  text-align: center;
}

亲自试一试

下例使 <th> 元素中的文本左对齐：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

th {
  text-align: left;
}

亲自试一试

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。

下例将 <td> 元素的垂直文本对齐方式设置为下对齐：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

td {
  height: 50px;
  vertical-align: bottom;
}

亲自试一试

表格内边距

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

th, td {
  padding: 15px;
  text-align: left;
}

亲自试一试

水平分隔线

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

实例

th, td {
  border-bottom: 1px solid #ddd;
}

亲自试一试

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

tr:hover {background-color: #f5f5f5;}

亲自试一试

条状表格

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

实例

tr:nth-child(even) {background-color: #f2f2f2;}

亲自试一试

表格颜色

下例指定了 <th> 元素的背景颜色和文本颜色：

FirstnameLastnameSavings
BillGates$100
SteveJobs$150
ElonMusk$300

实例

th {
  background-color: #4CAF50;
  color: white;
}

亲自试一试

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

First NameLast NamePointsPointsPointsPointsPointsPointsPointsPointsPointsPoints
BillGates50505050505050505050
SteveJobs94949494949494949494
ElonMusk67676767676767676767

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

实例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

亲自试一试

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

更多实例

做一张花式表格

本例演示如何创建花式表格。

设置表格标题的位置

本例演示了如何放置表格标题。

CSS 表格属性

属性描述
border简写属性。在一条声明中设置所有边框属性。
border-collapse规定是否应折叠表格边框。
border-spacing规定相邻单元格之间的边框的距离。
caption-side规定表格标题的位置。
empty-cells规定是否在表格中的空白单元格上显示边框和背景。
table-layout设置用于表格的布局算法。

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数据结构与算法】最小生成树 | 最短路径

【数据结构与算法】最小生成树 | 最短路径

&#x1f320;作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《数据结构与算法要啸着学》 &#x1f387;座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;…
阅读更多...
【图】邻接表存储图

【图】邻接表存储图

目录 一、概念 图是什么 各种图的定义 二、图的存储结构 邻接矩阵 邻接表 代码实现邻接表存储图&#xff08;不含权重&#xff09; 一、概念 图是什么 图&#xff08;Graph)是由顶点的有穷非空集合和顶点之间边的集合组成&#xff0c;通常表示为:G(V,E)&#xff0c;其中…
阅读更多...
Hystrix断路器执行原理

Hystrix断路器执行原理

状态机 Hystrix断路器有三种状态，分别是关闭（Closed）、打开（Open）与半开（Half-Open），三种状态转化关系如下： Closed 断路器关闭：调用下游的请求正常通过Open 断路器打开：阻断对下游服务的调用，直接走 Fallback 逻辑Half-Open 断路器处于半开状态：SleepWindowInMi…
阅读更多...
第 14 章python学习知识记录（一）

第 14 章python学习知识记录（一）

文章目录前言14.1 numpy的使用14.1.1 数字运算14.1.2 N维数组14.1.3 矩阵运算与广播14.1.4 元素访问14.2 Matplotlib的使用14.2.1 绘制简单图形14.2.2 绘制复杂图形14.2.3 显示图片14.3 os函数14.3.1 获取文件路径14.3.2 路径的基本操作14.4 tqdm的使用14.4.1 tqdm的导入和使用…
阅读更多...
docker搭建hadoop和hive集群

docker搭建hadoop和hive集群

一、安装docker并生成相关的镜像&#xff08;1&#xff09;安装docker安装docker教程https://www.runoob.com/docker/centos-docker-install.html只要在终端输入&#xff1a;sudo docker run hello-world后出现如下图的内容就证明安装docker成功了&#xff08;2&#xff09;拉取…
阅读更多...
让HTTPS、SSH 共享端口的——工具SSLH

让HTTPS、SSH 共享端口的——工具SSLH

目录 安装 SSLH 配置 Apache 或 Nginx Web 服务器 配置 SSLH 测试 安装 SSLH sudo apt-get install sslh 配置 Apache 或 Nginx Web 服务器 编辑 Web 服务器&#xff08;nginx 或 apache&#xff09;配置文件并找到以下行&#xff1a; listen 443 ssl; 将其修改为&…
阅读更多...
Uni-App 如何实现消息推送功能？

Uni-App 如何实现消息推送功能？

原文链接&#xff1a;Uni-App 如何实现消息推送功能&#xff1f; 前言 这里用的是uni-app自带的UniPush1.0&#xff08;个推服务&#xff09;&#xff0c;所以只针对UniPush1.0介绍实现步骤。 建议查阅的文章&#xff1a; UniPush 1.0 使用指南Unipush 常见问题 当然现在已…
阅读更多...
Flink day01

Flink day01

Flink简介 Flink起源于Stratosphere项目&#xff0c;Stratosphere是在2010~2014年由3所地处柏林的大学和欧洲的一些其他的大学共同进行的研究项目&#xff0c;2014年4月Stratosphere的代码被复制并捐赠给了Apache软件基金会&#xff0c;参加这个孵化项目的初始成员是Stratosphe…
阅读更多...
Flutter项目实战

Flutter项目实战

1.Androidstudio 获取dart支持才会出现 下图&#xff0c;才可以单独运行 2.需要 flutter pub get 3.Android Studio 中使用 FlutterJsonBeanFactory 插件 注意点&#xff1a;需要保证该 Android Studio 窗口下是一个完整的Flutter项目&#xff08;窗口下有且仅有一个Flutter项目…
阅读更多...
录音软件哪个好用？推荐3款亲测好用的录音软件

录音软件哪个好用？推荐3款亲测好用的录音软件

很多小伙伴不知道电脑如何录制声音&#xff1f;其实电脑录制声音很简单&#xff0c;借助一款好用录音软件&#xff0c;就可以轻松录制。那你知道录音软件哪个好用吗&#xff1f;小编平常的工作经常需要使用到录音软件。今天就给大家推荐3款亲测好用的录音软件&#xff0c;感兴趣…
阅读更多...
k8s核心资源Service

k8s核心资源Service

1、介绍为一组pod&#xff08;一次部署&#xff09;统一暴露一个ip和端口&#xff0c;供外界访问。2、集群内对外统一暴露kubectl expose deploy <部署名> --port<对外暴露端口> --target-port<容器内部端口>kubectl expose deploy mynginx --port8000 --tar…
阅读更多...
torch_geometric--Convolutional Layers

torch_geometric--Convolutional Layers

torch_geometric–Convolutional Layers 卷积层 MessagePassing 式中口口口表示可微的排列不变函数&#xff0c;例如: sum, mean, min, max 或者 mul 和 γΘ\gamma_{\Theta}γΘ​和ϕΘ\phi_{\Theta}ϕΘ​表示可微函数&#xff0c;例如 MLPs. 请参见这里的附带教程。 参数…
阅读更多...
JDBC-BasicDAO

JDBC-BasicDAO

引入 之前的sql语句是固定的只能通过参数传入&#xff0c;要写那么多方法肯定不好弄 这就引出了DAO 这里是整个流程示意图 最下面开始说 就是mysql库的每一张表对应一个JavaBean 右边是我们获取和关闭连接的工具类 上面XXXDAO的意思是 每一个表&#xff0c;都有一个与之对应的D…
阅读更多...
高压放大器在镓基液态金属微型马达驱动实验研究中的应用

高压放大器在镓基液态金属微型马达驱动实验研究中的应用

实验名称&#xff1a;高压放大器在镓基液态金属微型马达驱动实验研究中的应用 研究方向&#xff1a;新型材料 测试目的&#xff1a; 微/纳马达虽然是一种以实际应用为基础的动力装置&#xff0c;但其在科学研究方面的价值也尤为重要。在微/纳米尺度下&#xff0c;它可以接受能量…
阅读更多...
【测试如何学代码？】学习代码的最佳实践经验分享

【测试如何学代码？】学习代码的最佳实践经验分享

为什么要写这篇&#xff1f; 经常在群里看到大家问&#xff1a;该选择哪门语言&#xff1f;哪门语言有钱途&#xff1f; 其实&#xff0c;不管哪门语言&#xff0c;只要深入学好了都不会差&#xff0c;当然&#xff0c;我们选择语言最好还是要和自己的技术方向及职业发展相匹配…
阅读更多...
基于php的高校社团信息管理系统

基于php的高校社团信息管理系统

摘 要社团是由高校用户依据兴趣爱好自愿组成&#xff0c;按照章程自主开展活动的用户组织。高校社团是实施素质教育的重要途径和有效方式&#xff0c;在加强校园文化建设、提高用户综合素质、引导用户适应社会、促进用户交流等方面发挥着重要作用&#xff0c;是新形势下有效凝聚…
阅读更多...
Android studio:Could not find method compile() for arguments 问题解决及两种解决方法探讨延伸

Android studio:Could not find method compile() for arguments 问题解决及两种解决方法探讨延伸

Could not find method compile() for arguments 问题全称 Could not find method compile() for arguments [org.tensorflow:tensorflow-lite:] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. 如图 解决方法1(简单) …
阅读更多...
[数据结构基础]排序算法第四弹 -- 归并排序和计数排序

[数据结构基础]排序算法第四弹 -- 归并排序和计数排序

目录 一. 归并排序 1.1 归并排序的实现思想 1.2 归并排序的递归实现 1.2.1 归并排序递归实现的思想 1.2.2 归并排序递归实现的代码 1.3 归并排序的非递归实现 1.3.1 归并排序非递归实现的思想 1.3.2 归并排序非递归实现的代码 1.4 归并排序的时间复杂度分析 二. 计数排…
阅读更多...
c++之模板【进阶版】

c++之模板【进阶版】

前言 对于泛型编程&#xff0c;学好模板这节内容是非常有必要的。在前面学习的STL中&#xff0c;由于模板的可重性和扩展性&#xff0c;几乎所有的代码都采用了模板类和模板函数的方式&#xff0c;这相比于传统的由函数和类组成的库来说提供了更好的代码重用机会。 模板初阶 …
阅读更多...
Hugging face教程-使用速查表-快速入门

Hugging face教程-使用速查表-快速入门

Hugging face笔记 course url&#xff1a;https://huggingface.co/course/chapter5/8?fwpt 函数详细情况&#xff1a;https://huggingface.co/docs/transformers/main_classes/pipelines#transformers.TokenClassificationPipeline 基础掌握transformers和datasets&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023