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

今天继续完成上次的静态网页的制作web学习过程2 静态网页实例3
首先对照片下面的用户名进行一些设置,让它变得美观一些。
web学习过程2 静态网页实例3
先添加一下间距,字体的大小。然后添加两条大小1px的虚线并设置虚线的颜色。设置padding的上下间距。因为span并不具备盒子模型属性,所以要设置将span转换成块元素。
web学习过程2 静态网页实例3

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

web学习过程2 静态网页实例3
为了使活力模块美观,我们先设置一下活力区域的大小与边距。
web学习过程2 静态网页实例3
设置完成后,首先对标题进行美化。
web学习过程2 静态网页实例3
设置标题区域字体的颜色,区域高度,加粗字体,设置字体的大小,区域的背景颜色,对区域设置两个圆角,设置行高,设置与padding的右边距。
web学习过程2 静态网页实例3

现在对标签ul区域进行美化。
web学习过程2 静态网页实例3
设置一下距离使之美观,去除各个标签前的原点。

接下来对各个标签设置
web学习过程2 静态网页实例3
使标签左浮动排列,设置高度和各个标签间距。
web学习过程2 静态网页实例3
设置字体大小颜色,删除下划线。
web学习过程2 静态网页实例3
设置照片与字体的间距。

web学习过程2 静态网页实例3
为链接添加一个属性,当鼠标移到到标签链接时添加一个颜色反应。
web学习过程2 静态网页实例3
这样这个模块就完成了。

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

web学习过程2 静态网页实例3
web学习过程2 静态网页实例3
去掉标题前面的点,设置ul模块边距。
web学习过程2 静态网页实例3
在各个标签下设置虚线,设置各个标签的左边距和下边距使它更美观。
web学习过程2 静态网页实例3
设置字体大小,颜色,去掉下划线。
web学习过程2 静态网页实例3
为链接添加一个属性,当鼠标移到到标签链接时添加一个颜色反应。

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