<!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; }