CSS——宠物demo

注意：ul中自带padding值，需要清除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body,ul,li{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    ul{
        background-color: #fff;
        height: 279px;
        width: 210px;
        margin-left: 10px;
        padding: 0 15px;
    }
    li{
        height: 30px;
        border-bottom: 1px dashed #666;
        line-height: 30px;
        background: url("tb.gif") no-repeat left center;
        padding-left: 16px;

    }
    li a{
        text-decoration: none;
    }
     .box{
         width: 260px;
         height: 327px;
         border: 1px solid #009900;
         margin: 10px auto;
         background: url("bg.gif");
     }
     .box .title{
         height: 23px;
         margin:10px 0 5px 10px ;
         border-left: 4px solid #C9E143;
         font: 16px/23px 微软雅黑;
         color: #fff;
         padding-left: 11px;

     }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">爱宠知识</div>
        <ul>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
            <li><a href="#">养狗比养猫更健康</a></li>
        </ul>
    </div>
</body>
</html>

效果：