实验2:电商网站前端页面 CSS 样式编写(24分)

【目标】根据素材中的设计图要求,在实验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样式。