HTML5+CSS3 Web前端开发技术（任务式）（微课版）（第2版） 课件6任务实施

06使用CSS3美化页面任务01.美化页面通用尾部02.03.04.美化页面通用头部美化课程资源表格制作课程推荐部分美化页面通用尾部1任务要求（1）按照下图所示效果在2.1任务制作的页面通用尾部的HTML文件基础上进行美化。（2）使用<footer></footer>包裹整体，将背景颜色设置为#002752。（3）要求实现版心宽度1080像素且水平居中，并将文字颜色设置为白色。版心居中的方式：设定要居中的元素宽度（width:1080px;）；设定上、下外边距为为0，左、右外边距为自动（margin:0auto）；设定上、下内边距为10像素。（4）使用超链接实现页面中的联系电话的拨号功能与详细邮箱的发信功能。（5）设定图片的垂直对齐为中线对齐。任务实施（1）设定footer标签的相关样式。（2）在footer标签中增加一个div标签，作为用来实现水平居中包裹层，并设定宽度与外边距。（3）设定图片垂直对齐方式。（4）清除超链接默认下画线。参考代码html参考代码css操作视频美化页面通用头部2任务要求（1）按照下图所示效果在2.2任务制作的页面通用头部基础上进行美化。（2）设定网站Logo部分字体大小为20像素，字体加粗。（3）设定导航部分的文字内容字体大小为16像素，颜色为#888888，设定当前页面对应的导航按钮（图6-20中为“首页”）的字体颜色为#000000。（4）“登录”“注册”按钮具有4像素的圆角（border-radius:4px;），字体大小16像素，特性为行内块状元素。（5）设定“登录”按钮：背景色为白色，字体颜色为#007bff；边框1像素宽，直线类型，颜色为#007bff；鼠标悬浮时，背景色为#007bff，字体颜色为#ffffff。（6）设定“注册”按钮：背景色为#2a8745，字体颜色为#ffffff；鼠标悬浮时，背景色为白色，字体颜色为#2a8745。任务实施（1）使用之前任务已完成的页面通用头部代码作为HTML内容。（2）从左至右分别对网站Logo、导航和“登录”“注册”按钮部分进行文字、背景色等样式进行设定。参考代码html参考代码css操作视频美化课程资源表格3任务要求（1）对5.2任务完成的课程播放页面中的“课程资料”表格部分进行美化，实现下图所示效果。（2）表格的宽度为900像素。（3）表格标题背景颜色为#eeeeee且标题字体加粗。（4）表头背景色为#aaaaaa。（5）表格主体、表格尾部背景色为粉色（pink）。（6）表格中的所有的超链接都设定为绿色（green），无下画线。（7）表格主体部分第2、3列内容和表格尾部内容水平居中。任务实施（1）将HTML代码中table标签的border属性与width属性去除，用CSS样式指定。（2）在CSS中将table标签的width属性设为900px。（3）依次完成对应样式修改。（4）对于表格主体部分第2、3列内容和表格尾部内容居中，通过结构伪类选择器进行选择和样式修改。参考代码操作视频制作课程推荐部分4任务要求（1）按照下图所示效果制作“新云课堂”课程推荐页面“更多好课”部分。（2）对应的CSS代码在css目录下的more.css文件中完成，并在index.html文件中引入。（3）设定整个区域的背景色为#f5f5f5。（4）图片以背景图方式加入，高度设置为60像素，宽度自动适配，水平居中，背景图大小自动，不重复。（5）文本内容设定颜色为#999999，字体加粗，字体大小16像素，行高16像素，水平居中。任务实施（1）根据效果完成HTML内容代码，新建more.css文件。（2）在index.html文件中引入more.css文件。（3）设定整体背景色。（4）