HTML中的列表ol ul

article/2025/9/18 13:56:48

<!DOCTYPE html>
<html lang="en">
<head><title>列表</title>
</head>
<body><h3 style="background-color: rgb(102, 165, 165);">畅销图书榜</h3><hr/><!-- 有序列表 ol --><ol><!-- 有序列表里的项 li --><li><!-- 不知道链接就填# --><a href="#" style="background-color:cornflowerblue; width: 6;" >钝感力</a><a href="#">生死疲劳</a><a href="#">尘埃落定</a></li><li><!-- 不知道链接就填# --><a href="#">生死疲劳</a></li><li><!-- 不知道链接就填# --><a href="#">尘埃落定</a></li></ol><!-- 无序列表 ul --><ul><li>钝感力</li></ul><ul><li>生死疲劳</li></ul><ul><li>尘埃落定</li></ul>
</body>
</html>

效果展示

<!DOCTYPE html>
<html>
<head><title>畅销图书榜</title>
</head>
<body><h3>畅销图书榜</h3><hr/><table style="text-decoration: none;"><ol><li><a href="#">钝感力</a><p style="text-align:left ;">[日]渡边淳一</p><span class="buy-button">去购买</span></li><hr style="border: 1px dotted #036;"/><li><a href="#">尘埃落定</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">生死疲劳</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">科普绘本</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">小聪明豆</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">张嘉骅少年读</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">苏东坡传</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/><li><a href="#">瓦尔登湖</a><p>[日]渡边淳一</p></li><hr style="border: 1px dotted #036;"/></ol></table>
</body>
</html>

效果展示