样式化表格

您所在的位置:网站首页 表格的css样式大全图片怎么设置不了 样式化表格

样式化表格

2024-07-09 09:13| 来源: 网络整理| 查看: 265

现在轮到图形和颜色了!因为表格上充满“朋克“和“个性”,我们需要给它再搭配一些鲜艳的造型。别担心,你不必让你的表格“燥起来”,你可以选择一些更巧妙、更有品位的东西。

首先将下面的 CSS 添加到 style.css 文件中,在底部添加:

css/* 图形和颜色 */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%)); border: 3px solid purple; }

同样,对于表格这里没有什么特别的,但有几件事值得注意。

我们已经将一个background-image添加到和,并将页眉和页脚的所有文本颜色color更改为白色 (并给它一个text-shadow),这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比,使得它是可读的。

我们还为和 添加了一个线性渐变,在页眉和页脚中添加了一个漂亮的纹理,同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的,这样你就可以将样式层叠在一起。是的,我们可以通过设置多组背景图像属性值来在和 元素上同时使用背景图像和线性渐变,但是我们决定分开使用,因为考虑到不支持多个背景图像或线性渐变的老浏览器。

斑马条纹图案

我们想用一个单独的部分来展示如何实现斑马条纹(zebra stripes)——通过改变不同数据行的颜色,使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的 CSS 添加到你的 style.css 文件底部:

csstbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } 你在前面看到了:nth-child选择器用于选择特定的子元素。它也可以用一个公式作为参数,来选择一个元素序列。公式2n-1会选择所有奇数的子元素 (1、3、5 等),而公式2n会选择所有偶数的子元素 (2、4、6 等等)。我们在代码中使用了odd和even的关键字,这与前面提到的公式作用完全相同。在这里,我们给奇数行和偶数行不同的 (醒目的) 颜色。 我们还为所有的行添加了一个重复的噪点背景色块(一个半透明的.png,有一点视觉上的扭曲)来提供一些纹理。 最后,我们给整个表格提供了一个纯的背景颜色,这样浏览器不支持:nth-child选择器仍然有它们的正文行的背景。

这种颜色爆炸的结果如下:

现在,这可能有点过头不符合你的品味,但我们在这里想要指出的一点是,表格并非只能是枯燥无味的,学术性的。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3