国开电大《WEB开发基础》实验4：电商网站前端页面 LESS 编写

【目标】将实验2中三个页面的CSS代码用less重新组织

【时间】约3学时

【步骤】

1.使用Less语法重新组织三个页面中相同的颜色、字体等属性值，集中定义在一处

2.使用Less语法根据定义的基准值，定义部分修正的值。

3.使用Less语法简写复杂结构的选择器定义

4.使用Less语法重用部分相同的样式属性。

【实验要求】

需要提交的材料为实验报告。

实验报告由实验目标、实验环境、实验内容、实验结果、实验体会五个方面构成，其中，实验结果为本阶段编写的网页的运行效果截图。三个网页的HTML代码、CSS代码和less代码以及素材图片的压缩包作为实验报告附件。

需要提交的材料以WinRAR或WinZip等压缩包形式上传。本实验占形考成绩的12%。

【实验评价要点】

辅导教师对学员的实际操作进行评价，评价应该包括：

1.能够合理使用Less的变量，集中定义相同的CSS属性值

2.能够合理使用算数计算，根据Less变量的值，动态生成新的CSS属性值

3.能够利用Less语法最大限度的简化和重用复杂选择器的结构

4.能够利用Less中的混合和函数最大限度的重用CSS属性

5.将自己添加的部分页面的CSS代码一并转为Less