Skip to content

Files

Latest commit

wizardforcelwizardforcel
2022-01-11 23:19:32
Jan 11, 2022
1987c0f · Jan 11, 2022

History

History
214 lines (138 loc) · 5.55 KB

09.md

File metadata and controls

214 lines (138 loc) · 5.55 KB

九、表格和列表

HTML 表格系统主要用于在行和列中显示表格数据。您的 HTML 代码必须创建基本的表结构，但是 W3 提供了一些类来轻松增强表的外观。

CSS 表格

一个基本的表格由<table>标签组成，后面是一些行的<tr>元素。在<tr> …每行应该有相同数量的元素；否则，表结构中将出现空格。

代码清单 42

  <table>
    <tr>
    <th>Player name</th> 
    <th>Team</th> 
    <th>Yards</th> 
    <th>TD</th> 
    </tr>
    <tr>
    <td>Nick Foles</td> 
    <td>Philadelphia Eagles</td> 
    <td>373</td> 
    <td>3</td> 
    </tr>
    <tr>
    <td>Tom Brady </td> 
    <td>New England Patriots </td> 
    <td>505</td> 
    <td>3</td> 
    </tr>
  </table>

每个可用的 W3 类都应用于<table>元素。

基本表

w3-table类提供了基本的表格结构，宽度为 100%。您可以将此类添加到站点内的任何表中。

代码清单 43

  <table class="w3-table"> 
  </table>

图 32 显示了示例表。

图 32:示例表

可以添加其他类来控制表的外观。

条纹桌子

w3-striped类增加了分条，所以交替行会有阴影效果，如图 33 所示。

图 33:分条表

分条行使表格更容易阅读。

边界

有两种向表格添加边框的方法。w3-border类在整个表格周围添加边框。w3-bordered类为表格中的每一行添加一个下边框。

w3-表格-全部

w3-table-all类将所有特征(边框和阴影)添加到表格中。图 34 显示了应用于示例表的类。

图 34:所有表格功能

悬停

有时表可以用作编辑列表，因此让用户知道当前选择了哪一行非常重要。W3CSS 通过向表中添加w3-hoverable类使这变得容易。图 35 显示了选中第一行的表格。

图 35:可悬停的桌子

我们添加了一个带有 HTML 实体&#270d的新列；产生“手写”编辑图标和实体&#2716；(带类w3-text-red)为红色删除图标。

您可以使用w3-hover-color类将悬停颜色更改为灰色背景以外的颜色。悬停颜色是在行级别设置的，如下面的代码片段所示。

代码清单 44

    <tr>
    <td class="w3-hover-green">Nick Foles</td> ...
    </tr>
    <tr>
    <td class="w3-hover-blue">Tom Brady</td> ...
    </tr>

悬停是您要编辑或删除哪一行的简单视觉指示器。

CSS 列表

HTML 允许你使用<ul>(无序列表)或<ol>(有序列表)标签创建列表，其中包含一组<li>标签。下面的代码片段显示了基本结构。

代码清单 45

   <ul>
    <li>Soccer</li>
    <li>Football</li>
   </ul>

该框架提供了一些类来设置列表的样式。

基本列表样式

w3-ul标签设置基本列表结构，处理列表元素的缩进。下面的代码生成了如图 36 所示的列表。

代码清单 46

  <ul class="w3-ul">
    <li>Soccer</li>
    <li>Football</li>
    <li>Baseball</li>
   </ul>

图 36:基本列表

调整列表

您可以使用许多类来调整基本列表设计的外观。其中包括:

  • w3-border:在整个列表框周围放置一个边框。
  • w3-card-4:将列表包装在阴影卡片中。
  • w3-center:将列表中的元素居中。
  • w3-color:为列表提供颜色。

请记住，基本列表类将列表宽度设置为其容器的 100%。如果您需要制作一个较小的宽度列表，您将需要使用 CSS 样式来设置宽度。

代码清单 47

  <ul class="w3-ul w3-border w3-margin" style="width:20%;" >

可悬停列表

可以将w3-hoverable类添加到<ul>元素中，以便在鼠标悬停在列表元素之一上时使用灰色背景。您可以通过在任何列表元素上设置w3-hoverable-color类来更改背景颜色。

可关闭的列表

您可以在列表项目中添加一个 X 图标，并通过一个小的 JavaScript 调用，让用户能够从列表中移除一个项目。例如，下面的代码片段将使用&times HTML 实体，并且当单击时，将隐藏列表项。

代码清单 48

  <li class="w3-display-container">Baseball
    <span
  onclick="this.parentElement.style.display='none'"
    class="w3-button
  w3-display-right">&times;</span>
  </li>

向列表项目添加图标

列表项不仅限于文本——您可以使用带有w3-bar-item类的<img>标签添加图像来显示图像，而不是文本。例如，下面的代码片段将在运动名称旁边添加运动图像。

代码清单 49

  <li><img src="soccer.jpg"
  class="w3-bar-item" width="32" height="32">
    &nbsp;Soccer</li>
  <li><img src="football.jpg"
  class="w3-bar-item" width="32" height="32">
    &nbsp;Football</li>
  <li><img src="baseball.jpg"
  class="w3-bar-item" width="32" height="32">
    &nbsp;Baseball</li>

结果将如图 37 所示。

图 37:带有图像的列表

| | 提示:使用图像时，如果您调整图像文件大小，而不是使用 HTML 高度和宽度属性来调整图像大小，您将获得更好的性能(更小的文件大小)。 |

总结

表格和列表类使您可以轻松地设置基本表格和列表的样式，总结如下:

  • w3-table:基本表类。
  • w3-striped:向表中的交替行添加条带。
  • w3-border:在整个表格周围添加边框。
  • w3-bordered:在表格行之间添加边框。
  • w3-table-all:为表格添加边框和分条。
  • w3-ul:基础列表类。