web学习过程2 静态网页实例3
今天继续完成上次的静态网页的制作
首先对照片下面的用户名进行一些设置,让它变得美观一些。
先添加一下间距,字体的大小。然后添加两条大小1px的虚线并设置虚线的颜色。设置padding的上下间距。因为span并不具备盒子模型属性,所以要设置将span转换成块元素。
设置完用户名样式,我们来设置活动地带模块。在这里我们可以将活动地带设置成标题,其他设置成带链接的列表。
为了使活力模块美观,我们先设置一下活力区域的大小与边距。
设置完成后,首先对标题进行美化。
设置标题区域字体的颜色,区域高度,加粗字体,设置字体的大小,区域的背景颜色,对区域设置两个圆角,设置行高,设置与padding的右边距。
现在对标签ul区域进行美化。
设置一下距离使之美观,去除各个标签前的原点。
接下来对各个标签设置
使标签左浮动排列,设置高度和各个标签间距。
设置字体大小颜色,删除下划线。
设置照片与字体的间距。
为链接添加一个属性,当鼠标移到到标签链接时添加一个颜色反应。
这样这个模块就完成了。
下面处理我的文章分类和最新文章列表区域,与上面活力地带区域类似的添加。
去掉标题前面的点,设置ul模块边距。
在各个标签下设置虚线,设置各个标签的左边距和下边距使它更美观。
设置字体大小,颜色,去掉下划线。
为链接添加一个属性,当鼠标移到到标签链接时添加一个颜色反应。