任务目标

利用HTML无序列表标签制作新云课堂网站课程播放页面中的推荐列表。

任务要求

(1) 使用a、img、p、ul、li元素实现如图所示侧边栏的课程推荐列表。

(2) 图片宽度均为400px，高度自适应。

效果如下图：

任务实施

（1）将相关图片放置项目根目录的src/imges路径下。

（2）使用一个div元素包裹ul、li组成的三个排行结构。

（3）在li中用a元素包裹img与p元素。

（4）补充img元素的宽高与资源地址。

（5）补充p元素中的文本内容。

教学微课

教学课件

经验分享

当表格行列增多，内容相对复杂之后，我们很难一次性写对相应的单元格个数、行列个数与合并关系。如何解决呢？

一种简单的思路，操作起来会比较繁琐：开始做表格的时候不要考虑最终的效果，把表格看成没有进行合并的状态，由一个个标准的单元格组成样子。这样先按照表格的n行M列的方式，使用n个tr标签包裹m个td或th，实现一个n行m列的空表格，再根据最终效果最合并单元并删除多余的单元格即可。

另一种思路：根据表格的最终效果，从上向下逐行书写，在每一行中从左向右书写单元格并根据实际效果，直接设定跨列单元格的colspan属性值。这里每行中的单元格指的是单元格的上沿与该行上沿重合的单元格。这样在行内从左向右书写时，跳过了被跨行合并的单元格，并且在书写一行的过程中也解决的了跨列的问题。对表格结构与合并熟练掌握之后，这种方式效率更高。

能量贴士

“笃信好学，守死善道。危邦不入，乱邦不居。天下有道则见，无道则隐。邦有道，贫且贱焉，耻也；邦无道，富且贵焉，耻也”是说: 坚定地相信我们的道，努力学习它，誓死守卫保全它。不进入危险的国家，不居住在动乱的国家。天下有道，就出来从政；天下无道，就隐居不仕。国家有道，而自己贫穷鄙贱，是耻辱；国家无道，而自己富有显贵，也是耻辱。语出《论语·泰伯篇》。