CSS实战 模拟 新闻列表

总结：所使用的知识点:1.padding应用以及box-sizing: border-box自动内减撑大的盒子
                  2.ul>li 的使用，去除黑圆圈
                  3.a标签的使用，去除默认样式《下划线》

html结构

 <div class="box">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>

CSS样式：
          <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            padding: 41px 28px 0;

              box-sizing: border-box;

        }
        h2{
            height: 37px;
            border-bottom: 1px solid #ccc;
            line-height: 1;
            font-size: 30px;
        }
        ul li{
            list-style: none;
            height: 51px;
            border-bottom: 1px dashed #ccc;
            line-height: 51px;
            padding-left: 30px;
        }
        ul li a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }

    </style>