Web前端开发初级实操考试-1+X证书试点 .pdf

考生姓名准考证号

2019年下半年Web前端开发初级实操考试

（考试时间14:00-16:30共150分钟）

1.本试卷共5道题，满分100分。

2.请在指定位置或开发环境下作答。

试题一（22分）

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。

【说明】

这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要

编写该网站效果图部分代码。

项目名称为shopping，包含首页index.html、css文件夹、img文件夹，其中，css文件

夹包含index.css文件；img文件夹包含img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg

图片。

【效果图】

图1-1

【代码：首页index.html】

!DOCTYPEhtml

html

head

title商品展示/title

metacharset=utf-8

linkrel=stylesheettype=text/csshref=css/index.css/

/head

body

divclass=box

divclass=con

!--根据上下文填入合适的标签--

（1）class=clear

li

imgsrc=img/img1.jpg

第1页共14页

p微胖连衣裙/p

/li

li

imgsrc=img/img2.jpg

p2019网红初秋女装/p

/li

li

imgsrc=img/img3.jpg

p黑色休闲裤/p

/li

li

imgsrc=img/img4.jpg

p韩版学生女装/p

/li

li

imgsrc=img/img5.jpg

p原创设计女装/p

/li

/（2）

/div

/div

/body

/html

【代码：CSS文件index.css】

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{

margin:0;

padding:0;

}

/*清理默认li样式*/

ul{

（3）:（4）;

}

/*显示为块级元素*/

img{

(5):(6);

}

/*清理左右浮动*/

.clear:after{

content:;

display:block;

（7）:（8）;

}

.box{

第2页共14页

width:100%;

}

.box.con