html使用css为列表项添加边框

90次阅读
没有评论

在HTML中,我们可以使用CSS样式来为列表项添加边框。下面是一个示例HTML页面,其中包含一个有序列表和一个无序列表,并使用CSS样式为它们的每个列表项添加了边框:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>为列表项添加边框示例</title>
    <style>
        /* 添加无序列表项边框 */
        ul li {
            border: 1px solid black;
            padding: 5px;
        }

        /* 添加有序列表项边框 */
        ol li {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>为列表项添加边框示例</h1>

<h2>无序列表</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<h2>有序列表</h2>
<ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ol>
</body>
</html>

在上面的示例中,我们使用了CSS样式中的border属性为列表项添加边框,并使用padding属性为列表项添加内边距,以便让内容不会被边框遮盖。需要注意的是,这个样式会同时影响到所有的有序列表和无序列表。如果只想为特定的列表项添加边框,需要给这个列表单独添加一个类,并在CSS样式中指定这个类名来进行修改。

正文完
 
评论(没有评论)