CSS样式与HTML布局示例-优快云博客

本文通过一个具体的示例展示了如何使用CSS进行背景颜色、宽度、高度等基本样式设置，并利用HTML创建了一个包含列表的简单联系信息展示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background-color: #19242C;
            width: 300px;
            height: 300px;
            color: white;
            box-sizing: border-box;
        }
        ul{
            list-style: none;
            padding: 0px;
            margin: 0px;
            text-align: center;
            width: 100%;
            height: 100%;
            margin-left: 50px;
        }
        li{
            background-image: url("img/ico.png");
            background-repeat: no-repeat;
            width: 20px;
            height: 40px;
            white-space: nowrap;
            line-height: 40px;
            text-indent: 25px;
        }
        #l1{
            background-position: 2px 10px;
        }
        #l2{
            background-position: -20px 10px;
        }
        #l3{
            background-position: -40px 10px;
        }
        #l4{
            background-position: -60px 10px;
        }
        #l5{
            background-position: -80px 10px;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div>
    <h2>联系我们</h2>
    <ul>
        <li id="l1">总机：0427-3293318</li>
        <li id="l2">总机：0427-3293318</li>
        <li id="l3">总机：0427-3293318</li>
        <li id="l4">总机：0427-3293318</li>
        <li id="l5">总机：0427-3293318</li>
    </ul>
</div>

</body>
</html>

css练习2