web学习过程2 静态网页实例3

今天继续完成上次的静态网页的制作
首先对照片下面的用户名进行一些设置，让它变得美观一些。

先添加一下间距，字体的大小。然后添加两条大小1px的虚线并设置虚线的颜色。设置padding的上下间距。因为span并不具备盒子模型属性，所以要设置将span转换成块元素。

设置完用户名样式，我们来设置活动地带模块。在这里我们可以将活动地带设置成标题，其他设置成带链接的列表。

为了使活力模块美观，我们先设置一下活力区域的大小与边距。

设置完成后，首先对标题进行美化。

设置标题区域字体的颜色，区域高度，加粗字体，设置字体的大小，区域的背景颜色，对区域设置两个圆角，设置行高，设置与padding的右边距。

现在对标签ul区域进行美化。

设置一下距离使之美观，去除各个标签前的原点。

接下来对各个标签设置

使标签左浮动排列，设置高度和各个标签间距。

设置字体大小颜色，删除下划线。

设置照片与字体的间距。

为链接添加一个属性，当鼠标移到到标签链接时添加一个颜色反应。

这样这个模块就完成了。

下面处理我的文章分类和最新文章列表区域，与上面活力地带区域类似的添加。

去掉标题前面的点，设置ul模块边距。

在各个标签下设置虚线，设置各个标签的左边距和下边距使它更美观。

设置字体大小，颜色，去掉下划线。

为链接添加一个属性，当鼠标移到到标签链接时添加一个颜色反应。