国开电大《WEB开发基础》实验2：电商网站前端页面 CSS 样式编写

【目标】根据素材中的设计图要求，在实验1成果基础上，为网页添加CSS样式

【时间】约6学时

【步骤】

1.按图1所示，为实验1中的首页内容添加CSS样式，使其符合设计图的要求

2.按图2所示，为实验1中的租房列表页面添加CSS样式，使其符合设计图的要求

3.按图3所示，为实验1中的租房详情页添加CSS样式，使其符合设计图的要求

4.为自行添加的自定义页面内容区域，按照自己的设计，定义CSS样式。

【实验要求】

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

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

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

【实验评价要点】

辅导教师对提交的三个网页的HTML和CSS代码进行评价，评价应该包括：

1.能够使用CSS中定位属性，实现网页整体和局部的布局。

2.能够使用CSS中列表样式和浮动属性，定义各种列表和导航条的样式。

3.能够使用CSS中表格样式定义查询结果列表的样式

4.能够使用各种字体，背景，图片等样式，按照设计图要求，定义网页局部细节的样式

5.除完成设计效果图规定的样式外，还要对实验1中自行添加的部分内容，添加CSS样式。