admin 管理员组文章数量: 1086019
2024年6月14日发(作者：k8s是干啥的)
考生姓名 准考证号
2019年下半年 Web前端开发初级 实操考试
（考试时间14:00-16:30 共150分钟）
1. 本试卷共5道题，满分100分。
2. 请在指定位置或开发环境下作答。
试题一（22分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。
【说明】
这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要
编写该网站效果图部分代码。
项目名称为shopping，包含首页、css文件夹、img文件夹，其中，css文件
夹包含文件；img文件夹包含、、、、
图片。
【效果图】
图1-1
【代码：首页】
< （1） class="clear">
第 1 页 共 14 页
微胖连衣裙
2019网红初秋女装
黑色休闲裤
韩版学生女装
原创设计女装
【代码：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{
width: 1375px;
margin:0 auto;
}
.box .con ul{
padding-top:30px;
}
/*左浮动*/
.box .con ul li{
（9） : （10） ;
width: 250px;
margin:0 22px 22px 0;
border:1px solid #eee;
}
.box .con ul li img{
margin:15px auto 0;
}
.box .con ul li p{
padding:15px;
}
/*设置鼠标移入添加红色边框*/
.box .con ul li: （11） {
border:1px solid red;
}
【问题】（22分，每空2分）
进行静态网页开发，补全代码，在（1）至（11）处填入正确的内容。
试题二（26分）
阅读下列说明、效果图，进行静态网页开发，填写（1）至（13）代码。
【说明】
现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的
每一个业务以卡片形式展示；同时为提升用户体验，要求实现每个卡片在鼠标经过有旋转和
放大效果。
项目名称为goods，包含首页、css文件夹、img文件夹，其中，css文件夹包
含文件；img文件夹包含、、图片。
请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。
【效果图】
（1）图2-1鼠标经过前
第 3 页 共 14 页
图2-1
（2）图2-2鼠标经过
图2-2
【代码：】
-
优化速度
更多
-
营销分析
第 4 页 共 14 页
更多
-
< （2） src="img/" >
< （3） >SEO和导入链接
更多
【代码】
/* 注意：此处省略了部分和本题无关的css代码 */
.box .con ul li{
float:left;
background-color: #fff;
width: 380px;
/*设置li边框为圆角15px，文字对齐方式为居中。*/
（4） ： （5） ;
（6） ： （7） ;
overflow: hidden;
}
.box .con ul li:nth-child(2){
margin:0 30px;
}
.box .con ul li img{
margin:50px auto 0;
/*此处设置图片的过渡效果为0.8秒*/
（8） ：0.8s;
}
.box .con ul li p{
/*设置内边距上下为0，左右为15px*/
（9） ： （10） ;
line-height: 140px;
border-bottom:1px solid #ddd;
font-weight: 600;
color:#555;
}
.box .con ul li span{
display: block;
第 5 页 共 14 页
width: 100%;
height:60px;
line-height: 60px;
/*此处设置文字的过渡效果为0.8秒*/
（11） ：0.8s;
}
/*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。*/
.box .con ul li:hover img{
（12） ： （13） ;
}
.box .con ul li:hover span{
background-color: #f7c324;
font-weight: 600;
}
【问题】（26分，每空2分）
进行静态网页开发，补全代码，在（1）至（13）处填入正确的内容。
试题三（20分）
阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（10）代码。
【说明】
现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。具体要求：
用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。
项目名称为verify，包含首页、css文件夹、js文件夹，其中，css文件夹包
含文件，js文件夹包含文件。
【效果图】
图3-1
第 6 页 共 14 页
【代码：】
注册
【代码：】
//自定义验证用户名的方法
function validate_strLenght(str) {
第 7 页 共 14 页
版权声明：本文标题：Web前端开发初级实操考试-1+X证书试点 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1718341769a720635.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论