Web前端开发职业技能考试初级Web前端开发初级实操考试.docx
- 文档编号：17830539
- 上传时间：2023-08-04
- 格式：DOCX
- 页数：21
- 大小：304.39KB
Web前端开发职业技能考试初级Web前端开发初级实操考试.docx
《Web前端开发职业技能考试初级Web前端开发初级实操考试.docx》由会员分享，可在线阅读，更多相关《Web前端开发职业技能考试初级Web前端开发初级实操考试.docx（21页珍藏版）》请在冰点文库上搜索。
Web前端开发职业技能考试初级Web前端开发初级实操考试
考生姓名准考证号
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>
--根据上下文填入合适的标签-->
<
（1）class="clear">
微胖连衣裙
2019网红初秋女装
黑色休闲裤
韩版学生女装
原创设计女装
（2）>
【代码：
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{
width:
100%;
}
.box.con{
width:
1375px;
margin:
0auto;
}
.box.conul{
padding-top:
30px;
}
/*左浮动*/
.box.conulli{
（9）:
（10）;
width:
250px;
margin:
022px22px0;
border:
1pxsolid#eee;
}
.box.conulliimg{
margin:
15pxauto0;
}
.box.conullip{
padding:
15px;
}
/*设置鼠标移入添加红色边框*/
.box.conulli:
（11）{
border:
1pxsolidred;
}
【问题】（22分，每空2分）
进行静态网页开发，补全代码，在
（1）至（11）处填入正确的内容。
试题二（26分）
阅读下列说明、效果图，进行静态网页开发，填写
（1）至（13）代码。
【说明】
现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和放大效果。
项目名称为goods，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含style.css文件；img文件夹包含icon-img.jpg、icon-img2.jpg、icon-img3.jpg图片。
请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。
【效果图】
（1）图2-1鼠标经过前
图2-1
（2）图2-2鼠标经过
图2-2
【代码：
】
DOCTYPEhtml>
--根据说明正确导入当前目录下css文件夹中的style.css-->
优化速度
更多
营销分析
更多
--根据上下文填写正确的标签-->
<
（2）src="img/icon-img3.jpg">
<（3）>SEO和导入链接
更多
【代码】
/*注意：
此处省略了部分和本题无关的css代码*/
.box.conulli{
float:
left;
background-color:
#fff;
width:
380px;
/*设置li边框为圆角15px，文字对齐方式为居中。
*/
（4）：
（5）;
（6）：
（7）;
overflow:
hidden;
}
.box.conulli:
nth-child
（2）{
margin:
030px;
}
.box.conulliimg{
margin:
50pxauto0;
/*此处设置图片的过渡效果为0.8秒*/
（8）：
0.8s;
}
.box.conullip{
/*设置内边距上下为0，左右为15px*/
（9）：
（10）;
line-height:
140px;
border-bottom:
1pxsolid#ddd;
font-weight:
600;
color:
#555;
}
.box.conullispan{
display:
block;
width:
100%;
height:
60px;
line-height:
60px;
/*此处设置文字的过渡效果为0.8秒*/
（11）：
0.8s;
}
/*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。
*/
.box.conulli:
hoverimg{
（12）：
（13）;
}
.box.conulli:
hoverspan{
background-color:
#f7c324;
font-weight:
600;
}
【问题】（26分，每空2分）
进行静态网页开发，补全代码，在
（1）至（13）处填入正确的内容。
试题三（20分）
阅读下列说明、效果图和代码，进行静态网页开发，填写
（1）至（10）代码。
【说明】
现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。
具体要求：
用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。
项目名称为verify，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件，js文件夹包含index.js文件。
【效果图】
图3-1
【代码：
index.html】
DOCTYPEhtml>
《财政学》期末习题.docx
