任务目标

按照效果图实现课程推荐部分。

任务要求

（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）对图片区域进行样式修改，并通过背景图定位方式使图片内容水平居中。

（5）对文本区域进行样式修改，并通过文本对齐方式使文字内容水平居中。

教学微课

教学课件

经验分享

对于CSS3样式的兼容性并不是不变的，CSS3是一个永远在更新的版本号，所以部分CSS3样式是否使用兼容性写法就好的方式是去"www.caniuse.com"网站查询当前的兼容性。

能量贴士

天下同归而殊途，一致而百虑。语出《周易》。