CSS——行业动态demo

1、padding的运用:子div继承父div的宽，子div的padding-left值是不会撑大的。

2、背景图片的运用：不平铺、定位

3、ul本身就是一个盒子，它的高度是li中的字体的默认高度撑起来的。

4、li是ul中的子盒子，padding-left可以控制他们的左边距离。

5、li与li之间的距离可以用字体的行高来控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     .news{
         width: 238px;
         height: 166px;
         border:1px solid #D9E0EE;
         border-top: 3px solid #FF8400;
         margin: 0 auto;

     }
     .news-title{
         height: 35px;
         border-bottom: 1px solid #D9E0EE;
         line-height: 35px;
         padding-left: 12px;
     }
     ul,li{
         list-style:none;
         margin: 0;
         padding: 0;

     }
     ul{
         margin-top: 14px;
     }
     li{
         padding-left:19px;
         height: 23px;
         background: url("li_bg.jpg") no-repeat 9px 7px;
         font-size:14px;

     }
    </style>
</head>
<body>
    <div class="news">
        <div class="news-title">行业动态</div>
        <ul>
            <li>气质不错气质不错</li>
            <li>气质不错气质不错</li>
            <li>气质不错气质不错</li>
            <li>气质不错气质不错</li>
            <li>气质不错气质不错</li>
        </ul>
    </div>
</body>
</html>

效果：

posted @ 2017-11-06 10:36  var_obj  阅读(182)  评论(0)    收藏  举报