任务目标

通过CSS文本属性和背景属性美化新云课堂页面通用头部。

任务要求

（1）按照下图所示效果在2.2任务制作的页面通用头部基础上进行美化。

（2）设定网站Logo部分字体大小为20像素，字体加粗。

（3）设定导航部分的文字内容字体大小为16像素，颜色为#888888，鼠标悬浮时字体颜色更改为#ff0000，设定对应导航按钮（首页）的字体颜色为#000000。

（4）“登录”“注册”按钮具有4像素的圆角（border-radius: 4px;）、IE盒模型（box-sizing: border-box;），字体大小16像素，特性为行内块状元素。

（5）设定“登录”按钮：背景色为白色，字体颜色为#007bff；边框1像素宽，直线类型，颜色为#007bff；鼠标悬浮时，背景色为#007bff，字体颜色为#000000。

效果如下图：

任务实施

（1）使用之前任务已完成的页面通用头部代码作为HTML内容。

（2）从左至右分别对网站Logo、导航和“登录”“注册”按钮部分进行文字、背景色等样式进行设定。

教学微课

教学课件

经验分享

font属性方式的简写形式，必须按照font-style、font-weight、font-size/line-height、font-family的顺序书写，否则浏览器无法正确识别内容。当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前，如果中文字体设置于英文字体之前，英文字体设置将不起作用。在实际网页开发中，网页中的文本如果没有特殊要求，通常设置为”宋体”；宋体是Windows系统中默认的字体，如果需要其他比较炫的字体则使用图片来替代。

能量贴士

君子喻于义，小人喻于利。语出《论语》。