新闻列表案例

下面看一个新闻列表的案例，来总结一下目前所学的知识，最终效果如下：
新闻列表案例

首先第一步就是把盒子给绘制出来，经过测量知道盒子的宽度为410px,高度为283px

* {
    margin: 0;
    padding: 0;   /*设置内外边距为零*/
}
.article {
    width: 410px;
    height: 283px;
    border: 1px solid #CCC;
}

由图可见，盒子的大小和边框都绘制出来了，由于设置了外边距为零，所以盒子紧贴着网页边缘，我们可以通过设置margin让盒子不贴于网页，在.article中添加

margin: 100px;

这时边框离网页边缘有100px的距离。

接下来向盒子里添加内容，观察成品图，发现盒子里的内容由一个标题配合一个无序列表组成，而无序列表里面是链接，首先我们把标题给显示出来:

<div class="article">
    <h2>最新文章/New Articles</h2>
</div>

我们知道，标题与盒子的左右都有距离，有上部分也有一定距离，这个距离我们可以使用padding内边距来实现，经过测量，左右边距为15px,上边距为20px,所以在.article中加入

padding: 20px 15px 0px;

但是我们没有达到预期的效果，这是因为盒子的高度和宽度都改变了，我们知道盒子的高度和宽度是有加入padding的宽度和高度，所以我们现在要改变width和height让盒子的大小不变

width: 380px;
height: 263px;

然后我们修改一个标题，修改它的字体颜色以及字体大小，并为标题这个盒子加入下边框

.article h2 {
    font-size: 20px;
    color: #202026;
    border-bottom: 1px solid #CCCCCC;
}

又出现了一个新的问题，那就是标题与下边框距离太近了，我们可以设置标题盒子的下内边距实现，如下

padding-bottom: 5px;

下面加入下面的五个链接

<div class="article">
    <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>

下面将无序列表的小黑点去掉，然后设置列表的高度，让链接不挨在一起，并且设置链接的字体，去掉下划线。如下

li {
    list-style: none; /*去掉前面的小黑点*/
}
.article li a {
    text-decoration: none; /*去掉下划线*/
    font-size: 14px;
    color: #333333;
}
.article ul li {
    height: 38px;
    line-height: 38px; /*居中对齐*/
    border-bottom: 1px dashed #CCCCCC; /*下面的虚线*/
}

与成品相比，还有两个地方不同
新闻列表案例

对于缩进问题，我们可以设置li标签里的文本缩进

text-indent: 2em;

对于第一个链接与标题下边框的距离，我们可以设置ul盒子的上外边距，或者设置标题盒子的下外边距，这里我设置ul盒子的上外边距，如下

.article ul {
    margin-top: 12px;
}

还有最后一个效果就是，当鼠标放置在链接上时，会出现下划线，使用hover伪类实现

.article a:hover {
    text-decoration: underline;
}

最后改变一下body背景颜色，就大功告成了

body {
    background-color: #EEEEEE;
}

这里贴上所有的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻案例</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #EEEEEE;
            }

            .article {
                width: 380px;
                height: 263px;
                border: 1px solid #CCC;
                margin: 100px;
                padding: 20px 15px 0px;
            }

            .article h2 {
                font-size: 20px;
                color: #202026;
                border-bottom: 1px solid #CCCCCC;
                padding-bottom: 5px;
            }

            li {
                list-style: none; /*去掉前面的小黑点*/
            }

            .article li a {
                text-decoration: none; /*去掉下划线*/
                font-size: 14px;
                color: #333333;
            }

            .article ul li {
                height: 38px;
                line-height: 38px; /*居中对齐*/
                border-bottom: 1px dashed #CCCCCC; /*下面的虚线*/
                text-indent: 2em;
            }

            .article ul {
                margin-top: 12px;
            }

            .article a:hover {
                text-decoration: underline;
            }


        </style>

    </head>
    <body>
        <div class="article">
            <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>
    </body>
</html>