新闻列表案例

新闻列表案例

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

  首先第一步就是把盒子给绘制出来，经过测量知道盒子的宽度为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