CSS初级教程(图例-链接-列表-表格)【第八天 完】

news2025/1/13 7:35:54

文章目录

  • 【1】CSS 图标
  • 【2】CSS 链接
  • 【3】CSS 列表
  • 【4】所有 CSS 列表属性
  • 【5】CSS 表格
  • 【6】CSS 所有表格属性


CSS上回学习链接

CSS初级教程 颜色【第一天】
CSS初级教程 背景【第二天】
CSS初级教程 边框【第三天】
CSS初级教程 边距、高度、宽度【第四天】
CSS初级教程(轮廓)【第五天】
CSS初级教程(文本)【第六天】
CSS初级教程(字体)【第七天】


【1】CSS 图标

在这里插入图片描述
【1】如何添加图标
向 HTML 页面添加图标的最简单方法是使用图标库,比如 Font Awesome

将指定的图标类的名称添加到任何行内 HTML 元素(如 < i> 或 <span>)

下面的图标库中的所有图标都是可缩放矢量,可以使用 CSS进行自定义(大小、颜色、阴影等)。


【2】Font Awesome 图标
如需使用 Font Awesome 图标,请访问 fontawesome.com,登录并获取代码添加到 HTML 页面的 部分:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

请在我们的 Font Awesome 5 教程中,阅读有关如何开始使用 Font Awesome 的更多内容。

提示:无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

<p>一些 Font Awesome 图标:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

<p>有样式的 Font Awesome 图标(尺寸和颜色):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

在这里插入图片描述
在这里插入图片描述


【3】Bootstrap 图标
如需使用 Bootstrap glyphicons,请在 HTML 页面的 < head> 部分内添加这行:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示:无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">

<p>一些 Bootstrap 图标:</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>

<p>有样式的 Bootstrap 图标(尺寸和颜色):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

在这里插入图片描述


【4】Google 图标
如需使用 Google 图标,请在HTML页面的 < head> 部分中添加以下行:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

提示:无需下载或安装!

实例

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<p>一些 Google 图标:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>

<p>有样式的 Google 图标(尺寸和颜色):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

在这里插入图片描述


【2】CSS 链接

在这里插入图片描述
【1】设置链接样式
链接可以使用任何 CSS 属性(例如color、font-family、background等)来设置样式。
【< b>加粗< /b>】
实例

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;/*桃红色*/
}
</style>
</head>

<body>

<h1>CSS 链接</h1>

<p><b><a href="default.asp" target="_blank">这是一个链接</a></b>
</p>

</body>
</html>

在这里插入图片描述


此外,可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是:

a:link - 正常的,未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

实例

<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。</p>
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link 鼠标未点击链接*/
a:link {
  color: red;
}

/* visited link  鼠标已经点击了链接*/
a:visited {
  color: green;
}

/* mouse over link  鼠标移动到链接上*/
a:hover {
  color: hotpink;
}

/* selected link  鼠标点击长按*/
a:active {
  color: blue;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果为多个链接状态设置样式,请遵循如下顺序规则:

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

文本装饰
text-decoration 属性主要用于从链接中删除下划线:

实例

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>

<p><b><a href="default.asp" target="_blank">这是一个链接</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

在这里插入图片描述


背景色
background-color 属性可用于指定链接的背景色:

实例

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h1>CSS 链接</h1>

<p><b><a href="default.asp" target="_blank">这是一个链接</a></b></p>
<p><b>注释:</b>在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释:</b>在 CSS 定义中,a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

在这里插入图片描述


链接按钮
本例演示了一个更高级的例子,其中我们组合了多个 CSS 属性,将链接显示为框/按钮:

实例

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h1>链接按钮</h1>
<p>把链接样式设置为按钮:</p>
<a href="default.asp" target="_blank">这是一个链接</a>

</body>
</html>

在这里插入图片描述


【3】CSS 列表

在这里插入图片描述
HTML 列表和 CSS 列表属性
在 HTML 中,列表主要有两种类型:

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

CSS 列表属性使您可以:

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

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

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
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;/*小写字母*/
}
</style>
</head>
<body>

<h1>列表</h1>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

在这里插入图片描述
注释:有些值用于无序列表,而有些值用于有序列表。


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

实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('/i/photo/sqpurple.gif');
}
</style>
</head>
<body>

<h1>CSS 列表</h1>
<p>list-style-image 属性规定图像作为列表项标记:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

在这里插入图片描述


定位列表项标记
list-style-position 属性指定列表项标记(项目符号)的位置

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的:
在这里插入图片描述
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本:
实例

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>list-style-position 属性</h1>

<h2>list-style-position: outside(默认):</h2>
<ul class="a">
  <li>咖啡-用烘焙过的咖啡豆制成的冲泡饮料,烘焙过的咖啡豆是来自咖啡植物的浆果的种子</li>
  <li>茶-一种芳香饮料,通常通过将热水或沸水倒在茶树的固化叶子上而制得,茶树是一种原产于亚洲的常绿灌木(灌木)</li>
  <li>可口可乐-由可口可乐公司生产的碳酸软饮料。该饮料的名称指的是其两种原始成分,即可乐果(一种咖啡因)和古柯叶。</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>咖啡-用烘焙过的咖啡豆制成的冲泡饮料,烘焙过的咖啡豆是来自咖啡植物的浆果的种子</li>
  <li>茶-一种芳香饮料,通常通过将热水或沸水倒在茶树的固化叶子上而制得,茶树是一种原产于亚洲的常绿灌木(灌木)</li>
  <li>可口可乐-由可口可乐公司生产的碳酸软饮料。该饮料的名称指的是其两种原始成分,即可乐果(一种咖啡因)和古柯叶。</li>
</ul>

</body>
</html>

在这里插入图片描述


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

实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h1>CSS 列表</h1>
<p>list-style 属性是简写属性,用于在一条声明中设置所有列表属性。</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

在这里插入图片描述
在使用简写属性时,属性值的顺序为:

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

如果缺少上述属性值之一,则将插入缺失属性的默认值(如果有)。


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

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;/*内边距/
}

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

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 52px;/*外边距/
}

ul li {
  background: #cce5ff;
  margin: 30px;
}
</style>
</head>
<body>

<h1>设置列表的颜色样式:</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

在这里插入图片描述


【4】所有 CSS 列表属性

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

【5】CSS 表格

使用 CSS 可以极大地改善 HTML 表格的外观:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 5px solid #ddd;
  padding: 8px;
}

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

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
	<tr>
		<td>BAIDU</td>
		<td>Li YanHong</td>
		<td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
		<td>Beijing</td>
	</tr>
	<tr>
		<td>Canon</td>
		<td>Tsuneji Uchida</td>
		<td>One Canon Plaza Lake Success, NY 11042</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
		<td>Mountain View</td>
	</tr>
	<tr>
		<td>HUAWEI</td>
		<td>Ren Zhengfei</td>
		<td>Putian Huawei Base, Longgang District</td>
		<td>Shenzhen</td>
	</tr>
	<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>15700 NE 39th St Redmond, WA 98052</td>
		<td>Redmond</td>
	</tr>
	<tr>
		<td>Nokia</td>
		<td>Olli-Pekka Kallasvuo</td>
		<td>P.O. Box 226, FIN-00045 Nokia Group</td>
		<td>Helsinki</td>
	</tr>
	<tr>
		<td>SONY</td>
		<td>Kazuo Hirai</td>
		<td>Park Ridge, NJ 07656</td>
		<td>Park Ridge</td>
	</tr>
	<tr>
		<td>Tencent</td>
		<td>Ma Huateng</td>
		<td>Tencent Building, High-tech Park, Nanshan District</td>
		<td>Shenzhen</td>
	</tr>
</table>
</body>
</html>

在这里插入图片描述


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

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

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

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


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

实例

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

table {
  width: 100%;
}
</style>
</head>
<body>

<h1>全宽表格</h1>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

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

合并表格边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 5px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h1>Let the borders collapse</h1>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


如果只希望表格周围有边框,则仅需为 < table> 指定 border 属性:
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>单边框表格</h1>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

下例将表的宽度设置为 100%,将 < th> 元素的高度设置为 50px:
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h1>width 和 height 属性</h1>
<p>设置表格的宽度,以及表格标题行的高度:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

实例

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 50%;
}

th {
  height: 70px;
}
</style>
</head>
<body>

<h1>width 和 height 属性</h1>
<p>设置表格的宽度,以及表格标题行的高度:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center;
}
</style>
</head>
<body>

<h1>text-align 属性</h1>
<p>这个属性设置 th 或 td 中内容的水平对齐方式(左、右、或居中)。</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<h1>text-align 属性</h1>

<p>这个属性设置 th 或 td 中内容的水平对齐方式(比如左、右或居中对齐)。</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  height: 50px;
  vertical-align: bottom;
}
</style>
</head>
<body>

<h1>vertical-align 属性</h1>
<p>这个属性设置 th 或 td 中内容的垂直对齐方式(比如上、下或居中对齐)。</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 30px;
}
</style>
</head>
<body>

<h1>padding 属性</h1>
<p>这个属性在表格的内容与边框之间添加空间。</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

实例

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h1>表格分隔线</h1>

<p>为 th 和 td 添加 border-bottom,已实现水平分隔线:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


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

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>

<h1>可悬停表格</h1>
<p>将鼠标移到表格行上可以查看效果。</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


条状表格
为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加 background-color:
even 偶数
实例

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h1>条纹表格</h1>
<p>为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加背景色:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


表格颜色
下例指定了 < th> 元素的背景颜色和文本颜色:
实例

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

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

th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<h1>有颜色的表格标题</h1>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述


响应式表格
如果屏幕太小而无法显示全部内容,则响应式表格会显示水平滚动条:
在 < table> 元素周围添加带有 overflow-x:auto 的容器元素(例如 < div>),以实现响应式效果:

实例

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h1>响应式表格</h1>
<p>如果屏幕太小无法显示全部内容,响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果:</p>
<p>如需创建响应式表格,请用 <strong>overflow-x:auto</strong> 的容器元素(比如 div)包围表格元素:</p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Bill</td>
      <td>Gates</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Jobs</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Elon</td>
      <td>Musk</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

在这里插入图片描述
注释:在 OS X Lion(在 Mac 上)中,滚动条默认情况下是隐藏的,并且仅在使用时显示(即使设置了 "overflow:scroll")。


【6】CSS 所有表格属性

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

实例1
做一张花式表格

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

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

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	<tr>
		<td>Alibaba</td>
		<td>Ma Yun</td>
		<td>No. 699, Wangshang Road, Binjiang District</td>
		<td>Hangzhou</td>
	</tr>
	<tr>
		<td>APPLE</td>
		<td>Tim Cook</td>
		<td>1 Infinite Loop Cupertino, CA 95014</td>
		<td>Cupertino</td>
	</tr>
	<tr>
		<td>BAIDU</td>
		<td>Li YanHong</td>
		<td>Lixiang guoji dasha,No 58, beisihuanxilu</td>
		<td>Beijing</td>
	</tr>
	<tr>
		<td>Canon</td>
		<td>Tsuneji Uchida</td>
		<td>One Canon Plaza Lake Success, NY 11042</td>
		<td>New York</td>
	</tr>
	<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
		<td>Mountain View</td>
	</tr>
	<tr>
		<td>HUAWEI</td>
		<td>Ren Zhengfei</td>
		<td>Putian Huawei Base, Longgang District</td>
		<td>Shenzhen</td>
	</tr>
	<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>15700 NE 39th St Redmond, WA 98052</td>
		<td>Redmond</td>
	</tr>
	<tr>
		<td>Nokia</td>
		<td>Olli-Pekka Kallasvuo</td>
		<td>P.O. Box 226, FIN-00045 Nokia Group</td>
		<td>Helsinki</td>
	</tr>
	<tr>
		<td>SONY</td>
		<td>Kazuo Hirai</td>
		<td>Park Ridge, NJ 07656</td>
		<td>Park Ridge</td>
	</tr>
	<tr>
		<td>Tencent</td>
		<td>Ma Huateng</td>
		<td>Tencent Building, High-tech Park, Nanshan District</td>
		<td>Shenzhen</td>
	</tr>
</table>
</body>
</html>

在这里插入图片描述


设置表格标题的位置

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

caption {
  caption-side: bottom;
}
</style>
</head>
<body>

<table>
<caption>Table 1.1 Customers</caption>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alibaba</td>
    <td>Ma Yun</td>
    <td>Hangzhou</td>
  </tr>
  <tr class="alt">
    <td>Hangzhou</td>
    <td>Tim Cook</td>
    <td>Cupertino</td>
  </tr>
  <tr>
    <td>BAIDU</td>
    <td>Li YanHong</td>
    <td>Beijing</td>
  </tr>
  <tr class="alt">
    <td>HUAWEI</td>
    <td>Ren Zhengfei</td>
    <td>Shenzhen</td>
  </tr>
  <tr>
    <td>Tencent</td>
    <td>Ma Huateng</td>
    <td>Shenzhen</td>
  </tr>
</table>

</body>
</html>


在这里插入图片描述


在这里插入图片描述

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

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

相关文章

使用批处理文件和mkvtoolnix批量修改默认音轨和音轨属性并重新混流

工具和版本 windows10 x64 MkvToolNix v73 待输出的Mkv格式文件&#xff0c;要求是同类型的文件&#xff0c;比如从迅雷下载下来同一来源的连续剧 步骤 一、添加文件 打开MkvToolNix GUI&#xff0c;添加输入文件&#xff0c;选中一个待输出的文件A 二、编辑音轨 选中音…

IOC底层实现原理介绍,手动实现IOC容器

面试官特别爱问SpringIOC底层实现&#xff0c;Spring源码晦涩难懂怎么办呢? 跟着老师手动实现一个mini ioc容器吧&#xff0c;实现后再回头看Spring源码事半功倍哦&#xff0c;就算直接和面试官讲也完全可以哦&#xff0c;类名完全按照源码设计&#xff0c;话不多说开干~!手动…

葡聚糖-叶酸;Dextran-FA;Dextran-Folicacid 结构式;科研试剂简介

名称&#xff1a;Dextran-Folicacid 中文名&#xff1a;叶酸修饰的葡聚糖 别称&#xff1a;葡聚糖-FA,葡聚糖-叶酸 存储条件&#xff1a;-20C&#xff0c;避光&#xff0c;避湿 外观: 固体或类白色絮状&#xff0c;取决于分子量 溶剂&#xff1a;溶于大部分有机溶剂&#…

HTAP 能够取代 OLAP 吗?

HTAP是什么 HTAP(Hybrid Transaction and Analytical Processing)数据库&#xff0c;也称混合型关系数据库&#xff0c;是能同时提供OLTP和OLAP的混合关系型数据库。在互联网浪潮出现之前&#xff0c;企业的数据量普遍不大&#xff0c;特别是核心的业务数据&#xff0c;通常一个…

【深入理解JVM】垃圾收集器内存分配策略

目录 gc root对象有哪些 oopMap 安全点&#xff08;safe point&#xff09; 安全区域 卡表 伪共享问题 三色标记法 垃圾收集器 CMS G1 gc root对象有哪些 虚拟机栈中引用的对象&#xff08;虚拟机栈中的引用的对象可以作为GC Root。我们程序在虚拟机的栈中执行&…

Redis安装及常用配置详解

一般redis安装于linux服务器&#xff0c;故本例介绍的是Linux下的安装一. Redis下载1. 官网下载tar包可以到​​ ​redis的官网​​​找到各个Redis版本的下载地址,如: https://redis.io/download/#redis-downloads&#xff0c;最新稳定版是7.0版2. 使用wget 下载redis在官网中…

无桥PFC的家族推演

1. 组合法构建无桥PFC PFC是一种AC-DC变换器&#xff0c;将交流输入电压分成正负半周&#xff0c;输出电压是直流&#xff0c;因此AC-DC变换器可以当做是两个DC-DC变换器的组合。在PFC的拓扑推演中&#xff0c;就是设计两个DC-DC变换器的工作模式。以下内容是基于对陈正格博士发…

流程编辑器bpmnjs的改造3:加一个审批人的设置

默认的设计器有代理人、候选用户和候选组&#xff0c;但是并不能满足实际的业务需求&#xff0c;我们需要对它进行改造&#xff0c;使得我们能够按照自定义的规则来生成用户任务节点的审批人。1、在bpmnjs里面加一个审批人的输入部件打开resources/properties-panel/provider/a…

MD5算法全解析

前言 这段时间刚好正在做软件安全的实验和课设&#xff0c;学习了各种加密算法&#xff0c;比如对称加密算法的DES,AES&#xff1b;非对称加密算法的RSA&#xff1b;再如今天要讲的主角-单向加密算法的MD5。为什么这么多算法&#xff0c;MD5成为了今天的猪脚呢&#xff1f;&am…

nexus raw 仓库代理(node-sass 内网下载问题)

问题背景 内网环境中使用 node 构建项目&#xff0c;项目中依赖了 node-sass&#xff0c;环境自动下载 node-saas 失败&#xff08;内网&#xff09;。 下面是构建 node-sass 的错误代码&#xff1a; [5/5] Building fresh packages... error /workspace/node_modules/node-…

FreeRTOS-消息队列详解

✅作者简介&#xff1a;嵌入式入坑者&#xff0c;与大家一起加油&#xff0c;希望文章能够帮助各位&#xff01;&#xff01;&#xff01;&#xff01; &#x1f4c3;个人主页&#xff1a;rivencode的个人主页 &#x1f525;系列专栏&#xff1a;玩转FreeRTOS &#x1f4ac;保持…

burpsuite安装HTTPS证书

burpsuite安装HTTPS证书1.Burpsuite介绍1.1.Burpsuite安装2.https证书介绍2.1.证书下载步骤2.1.1.打开burp软件2.1.2.开启代理2.1.3.下载证书2.1.4.证书2.2.证书安装步骤2.2.1.打开证书页2.2.2.导入证书2.2.3.确认安装2.3.抓包测试1.Burpsuite介绍 Burp Suite 是用于攻击web 应…

OpenStack 扩容cpu、内存

创建要扩容的实例类型&#xff0c;也就是flavor获取要扩容的server id根据命令 nova list获取刚才创建好的实例类型id根据命令 nova flavor-list执行扩容的命令nova resize <server-id> <flavor-id>举例&#xff1a;nova resize 06be1c3d-bcfb-4038-ae28-f8e7ac0a2…

【AI奇技淫巧】使用Optuna进行机器学习模型调参

使用Optuna进行机器学习模型调参Optuna简介框架特点安装方式举个例子高级配置搜索方式分支&#xff08;Branches&#xff09;与循环&#xff08;Loops&#xff09;分布式优化命令行界面用户定义属性将用户定义属性添加到Study将用户属性添加到Trial中对无望的Trial进行剪枝&…

大前端—回顾2022年明星项目,展望2023发展前沿

导读 | 2022年是艰难的一年&#xff0c;不仅有互联网的寒冬、还有新冠疫情的洗礼。但是似乎这一切都阻挡不了JavaScript的内卷&#xff0c;一年不长不短的时间中&#xff0c;JavaScript从创新、性能、功能等多维度深度进化&#xff0c;给前端带来了诸多惊喜。本文基于github上流…

(十三)并发集合——ConcurrentSkipListMap/Set

ConcurrentSkipListMapConcurrentSkipListMap与TreeMap对应&#xff0c;相当于线程安全的TreeMap&#xff0c;key有序&#xff0c;TreeMap基于红黑树&#xff0c;ConcurrentSkipListMap基于跳表。无锁链表的问题用跳表而不用红黑树是因为目前计算机领域还未找到一种高效的、作用…

LabVIEW测试和调试Web服务

LabVIEW测试和调试Web服务发布Web服务至终端前&#xff0c;需要测试HTTP方法VI是否按照预期与客户端进行通信。可直接从LabVIEW项目将Web服务置于调试服务器上&#xff0c;从而允许客户端发送请求至HTTP方法VI。调试服务器提供类似沙盒的环境。1. (Windows) 右键单击我的电脑下…

JVM- 第二章-类加载子系统

类加载子系统 2. 类加载子系统 2.1. 内存结构概述2.2. 类加载器与类的加载过程 加载阶段链接阶段初始化阶段 2.3. 类加载器分类 2.3.1. 虚拟机自带的加载器2.3.2. 用户自定义类加载器 2.4. ClassLoader的使用说明2.5. 双亲委派机制2.6. 其他 2. 类加载子系统 2.1. 内存结构…

nacos

文章目录1、认识和安装nacos&#xff08;单机安装&#xff09;1.1、下载安装包1.2、解压1.3、端口配置1.4、启动1.5、访问2、nacos快速入门2.1、在父工程中添加依赖2.2、注释掉服务中原有的eureka依赖2.3、添加nacos的客户端依赖2.4、修改配置文件2.5、启动并测试2.6、总结3、n…

19、Java并发 Java wait() 和 notify() 方法

大家有没有发现&#xff0c;其实 「 一文秒懂 」 系列讲述的都是多线程并发开发的问题。这个话题太大了&#xff0c;估计没有上百篇文章都解释不清楚。 本文&#xff0c;我们来讲解下 Java 并发中的基础的基础&#xff0c;核心的核心&#xff0c;Java 并发编程中的最基本的机制…