博客美化作业
第一步 下载作业资源
第二步 在文件夹内打开下载资源
单击后缀为HTML文件的网页文件,右击用编译器打开
这些软件都可以(除了紫色的)
第三步 准备工作
首先让我们重新看下作业要求:
必须使用“类选择器”来美化网页
1、导航部分:字体18号,加粗,颜色为#006843
2、您的位置:字号为12像素
3、标题(军训感言):加粗,字号为20像素
4、正文部分:字号为14像素,首行缩进2字符,行高30像素
5、给正文部分四周添加边框:实线边框、颜色为#FCEAAA、粗细为1像素
第四步 代码环节
在head标签内写 类选择器代码
要求:1、导航部分:字体18号,加粗,颜色为#006843
<style type="text/css">table .navigation/*导航*/{font-size: 18px;color: #006843;text-align: center;font-weight: bold;}
</style>
接下来在tr中的td表格把代码class进去
<tbody><tr><td class="navigation">首页</td><td class="navigation">日志</td><td class="navigation">相册</td><td class="navigation">留言板</td><td class="navigation">关于我</td></tr>
</tbody>
原样式:
align="center"属性由于我们在类选择器中已经设置了居中,删除此属性即可。
class引入即可。
要求 2、您的位置:字号为12像素
在内容处添加您的位置
之后创建完类选择器,class导入样式。
<td height="20" align="right" bgcolor="#FFFFDB" class="location">您的位置 : 首页>>日志>>大学生活 </td>
返回head标签内写
.location/*您的位置*/{font-size: 12px;}
在td内导入location类的样式
设置字体为12号
要求 3、标题(军训感言):加粗,字号为20像素
.a /*标题部分*/
{font-size: 20px;font-weight: bold;
}
在td里class引入样式
要求 4、正文部分:字号为14像素,首行缩进2字符,行高30像素
.article/*正文*/{text-indent: 2em;font-size: 14px;line-height: 30px;}
给p标签class=“article”
要求 5、给正文部分四周添加边框:实线边框、颜色为#FCEAAA、粗细为1像素(可以不做)
.bk{border:1px solid #FCEAAA; border-collapse: collapse;border-top:none;border-bottom:none;}
空格+bk让属性有多个类选择器
下面依次
然后就完成了!!
完成截图
对比作业效果图无异常。
作业完成
资源链接:https://download.csdn.net/download/qq_45088992/12430878
点击下载查看完整代码。