<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css_form_tables.css"/>
</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>
<!-- 响应式 表格 太长会出现滚动条 -->
<div style="overflow-x:auto;">
<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>
</div>
</body>
</html>
ul.a{
/* 设置元素前面的图标 */
list-style-type: square;
}
ul.b{
/* 图像做标记 */
list-style-image: url('');
}
ol.c{
/* 标记在外 */
list-style-position: inside;
}
table{
/* 合并表格 */
border-collapse: collapse;
padding: 10px;
text-align: center;
border-bottom: 1px solid black;
}
tr:hover{
/* 悬停颜色改变 */
background-color: antiquewhite;
}
浙公网安备 33010602011771号