实验1：电商网站前端页面内容编写（16分）

【目标】根据素材中的设计图，编写网站首页，查询列表页和详情页三个网页的html内容（暂时不用编写CSS代码）

【时间】约4学时

【步骤】

1．根据素材中给定的网站首页设计图实现租房网首页HTML内容的定义

图1 网站首页设计图

包括：

（1）顶部主导航栏和登录状态按钮

　　①点击logo，可跳转回首页

　　②点击”租房”，可跳转到租房列表页面

（2）上部广告区域

（3）中部热链接按钮列表

（4）下部二维码广告区域

（5）底部页脚内容

2．根据素材中给定的房源查询页面设计图实现“租房”页面的HTML内容

图2 房源查询页面设计图

包括:

（1）新的顶部主导航栏和登录状态按钮

（2）上部搜索框和搜索条件区域

（3）下方租房信息列表及分页按钮，其中点击租房列表中的图片可跳转到详情页

3．根据素材中给定的房屋详情页面设计图实现租房详细信息页面的HTML内容

图3 房屋详情页面设计图

包括:

（1）标题

（2）左侧图片展示区域

（3）右侧租房主要信息项

（4）下方租房详细信息

说明：对页面内容和布局结构，根据自己的理解可以进行适当改造和修改加工，不可完全雷同

【实验要求】

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

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

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

【实验评价要点】

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

1．能够使用HTML5结构元素和div分区元素，划分页面整体结构

2．能够灵活使用列表元素定义导航

3．能够灵活使用a元素定义各种超链接

4．能够按照设计图要求，为网页添加图片

5．能够利用表单元素为网页添加信息收集的功能

6．能够利用表格元素定义查询结果列表

7．除完成设计效果图规定的内容外，还要模仿当前网页设计，自行添加一个自定义的网页内容区域，并用HTML实现其基础内容和结构

实验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样式。

实验3：电商网站前端页面动效实现（8分）

【目标】为首页添加规定的动画效果

【时间】约2学时

【步骤】

1.为首页上方广告区域添加动画效果：四张广告图片组成四面体形状，自动旋转。

2.中间三个热链接按钮，当鼠标悬停时，可添加旋转效果。

【实验要求】

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

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

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

【实验评价要点】

辅导教师对提交的企业网站站点进行评价，评价应该包括：

1.能够使用CSS3变换，将多个图片组成四面体

2.能够使用CSS3动画，定义四面体自动旋转，暂停等

3.能够使用过渡和变换，为普通按钮或图片添加动效

4.除完成设计效果图规定的动画效果外，还要对实验1和实验2中自行添加的部分内容，添加部分自行设计的动画效果。

实验4：电商网站前端页面 LESS 编写（12分）

【目标】将实验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

实验5：电商网站前端页面响应式设计（20分）

【目标】按照素材中设计图将实验1和实验2中的首页，改为响应式

【时间】约5学时

【步骤】

1．根据以下三张不同设备下的设计图，使用Bootstrap栅格系统，将首页转为响应式网页 PC下:

PC下: 

Pad下: 

手机下: 

【实验要求】

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

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

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

【实验评价要点】

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

1.使用Bootstrap栅格系统实现顶部响应式导航条

2.使用Bootstrap轮播组件修改上部广告为轮播方式

3.使用相对单位和弹性布局实现列表项在不同设备中的正常显示

4.除完成设计效果图规定的布局效果外，还要保证自行添加的自定义部分内容在不同设备下也能支持响应式

【必做】生命健康学院-终考任务

试卷总分:100  得分:100

1.Web服务端应用程序开发主要可以使用以下几种编程语言: PHP、ASP.NET等。（ ）

2.Web中采用HTML（HyperText Markup Language, 超文本标记语言）通信协议。（ ）

3.HTML规定元素标签可以嵌套，但不允许交叉。（ ）

4.默认情况下，单击旁边的文本，不会选中该单选按钮。（ ）

5.单位1px的显示大小不会随显示器分辨率改变而改变。（ ）

6.list-style:none和list-style-type:none均可清除列表项标识。（ ）

7.弹性布局中，项目的flex-order属性用于定义项目的排列顺序。（ ）

8.定义元素的scale属性，可让元素发生缩放。（ ）

9.import在引入多个less文件时，会增加请求次数。（ ）

10.物理设备宽比视口宽更能精准确定一个设备的种类。（ ）

11.Web程序要想顺利运行，就需要Web服务器、浏览器、（ ） 三者相互配合，共同发挥作用。

A.数据库

B.HTML

C.网页

D.通信协议

12.Bootstrap中颜色类名*-default的颜色为：（ ）。

A.白色

B.浅灰色

C.工业蓝

D.淡蓝色

13.表单中的每组输入项（label+input+span）都包含在class为（ ）的小容器元素中。

A.form-label

B.form-group

C.form-control

D.control-label

14.PC设备显示器下，让class为box的元素背景为红色，下列代码正确的是（ ）。

A.改答案

B.S

C.D

D.D

15.下列关于媒体查询说法正确的是：（ ）。

A.min-width：768px and max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围；

B.min-width：768px && max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围；

C.min-width：768px & max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围；

D.min-width：768px max-width: 991px，表示浏览器视口宽≥768px而且≤991px， 说明是平板电脑显示屏大小范围；

16.下列混入时传入参数的代码正确的是（ ）。

A.h1{ .m-p-0(10,10); … …}

B.h1{ .m-p-0: 10 10; … …}

C.h1{ .m-p-0(10px,10px); … …}

D.h1{ .m-p-0：(10px,10px); … …}

17.希望修改某个CSS属性值时平缓变化，可使用CSS的（ ）属性。

A.transform-property

B.translate-property

C.transform-float

D.transition-property

18.希望单击一个a元素，控制另一个元素的样式变化，可使用以下哪种选择器:（ ）。

A.:hover

B.:target

C.:active

D.:link

19.将列表项标识改为图片的属性是:（ ）。

A.list-style-type

B.list-image

C.list-style-image

D.list-type

20.默认的转换原点是：（ ）。

A.元素的左上角

B.元素的右上角

C.元素的顶部中心点

D.元素图形的中心点

21.如果包含框太窄，无法容纳水平排列的3个浮动元素，那么最后放不下的块会：（ ）

A.被挤压到下一行

B.默认隐藏

C.横向溢出

D.始终换行到下一行的开头

22.以下单位属于相对长度单位的是（ ）。

A.em

B.pt

C.cm

D.in

23.以下关于线性渐变描述正确的是:（ ）。

A.线性渐变就是延水平方向填充渐变色

B.线性渐变就是延垂直方向填充渐变色

C.线性渐变就是以直线的方向来填充渐变色

D.线性渐变就是以圆心为中心，延半径向外渐变

24.下列样式声明语法正确的是（ ）。

A.color=purple

B.color=”purple”

C.color:”purple”

D.color:purple

25.设置iframe的（ ）属性，可定义iframe要引入的另一个网页的URL地址。

A.src

B.href

C.rel

D.path

26.流式布局主要使用: （ ）。

A.使用table显示网页的各个区域

B.使用浮动定位显示网页的各个区域

C.使用行内块显示网页的各个区域

D.使用块元素显示网页的各个区域

27.以下关于表格样式描述正确的是：（ ）。

A.table是基础类

B.table-alt可设置表格各行变色

C.table-hover 可设置鼠标悬停在一行上，该行变色

D.table-bordered可设置表格边框

28.以下属于动态样式语言具备而静态样式语言不具备的特征有:（ ）。

A.变量

B.否定伪类

C.选择器

D.运算

29.已知连续四个元素，下列选择器中可选择后三个li的是：（ ）。

A.li>li

B.li+li

C.li~li

D.li li

30.上外边距溢出，有以下几种预防方法：（ ）。

A.为父元素增加上边框

B.为父元素设置上内边距

C.在父元素的第一个子元素位置处，增加空标记

D.设置父元素的overflow:hidden

31.请从右侧选择最合适的解释，拖入合适的答案。

(1).ul>li.active

(2).ul li.active

(3).ulli>.active

(4).ul li .active

(5).ul>li,.active

A.ul元素下的所有后代元素中class为active的li

B.ul元素下的所有后代li的所有后代中class为active的元素

C.ul元素下的所有后代li的直接子元素中class为active的元素

D.ul元素下的直接子元素li以及其他任意class为active的元素

E.ul元素下的直接子元素中class为active的li

32.请从右侧拖入合适的答案。

(1).行内元素

(2).块级元素

(3).行内块元素

(4).单标记元素

(5).双标记元素

A.必须成对出现的开始标记和结束标记的元素

B.元素内容有多少，空间就只能占用多少，且多个元素只能在一行中显示

C.默认独占一行的元素

D.只要一个开始标记即可实现功能的元素

E.多个元素可在一行中显示，但是可设置元素的大小