刷题模式（附答案）：1+x证书Web前端开发初级实操考试样题（2019）试题⼀（每空 2 分，共 22 分）
阅读下列说明、效果图和 HTML 代码，进⾏静态⽹页开发，请在红线处补全代码。
1.【说明】
这是某电商类⽹站服装商品展⽰页⾯局部，该⽹站正在促销秋冬季⼥装。现在我们需要编写该⽹站效果图部分代码。
项⽬名称为 shopping，包含⾸页 index.html、css ⽂件夹、img ⽂件夹，其中，css ⽂件夹包含 index.css ⽂件；img ⽂件夹包含img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg 图⽚。
2.【效果图】
3. 【代码：⾸页 index.html】(提⽰： * 中间为填空答案 )
<!DOCTYPE html>
<html>
<head>
<title>商品展⽰</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="box">
<div class="con">
<!-- 根据上下⽂填⼊合适的标签 -->
< ***ul*** class="clear">
<li>
<img src="img/img1.jpg">
<p>微胖连⾐裙</p>
</li>
<li>
<img src="img/img2.jpg">
<p>2019⽹红初秋⼥装</p>
</li>
<li>
<img src="img/img3.jpg">
<p>⿊⾊休闲裤</p>
</li>
<li>
<img src="img/img4.jpg">
<p>韩版学⽣⼥装</p>
</li>
<li>
<img src="img/img5.jpg">
<p>原创设计⼥装</p>
</li>
</ ***ul***>
</div>
</div>
</body>
</html>
4.【代码：CSS ⽂件 index.css】(提⽰： * 中间为填空答案 )
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin: 0;
padding:0;
}
/*清理默认li样式*/
ul{
***list-style:none;***
}
/*显⽰为块级元素*/
img{
***display:block;***
}
/*清理左右浮动*/
.clear:after{
content:"";
display: block;
***clear:both;***
}
.box{
width: 100%;
}
.box .con{
width: 1375px;
margin:0 auto;
}
.box .con ul{
padding-top:30px;
}
/
*左浮动*/
.box .con ul li{
***float:left;***
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: ***hover***
{
border:1px solid red;
}
试题⼆（每空 2 分，共 26 分）
阅读下列说明、效果图，进⾏静态⽹页开发，请在红线处补全代码。
1.【说明】
现接到思极商务有限公司官⽹页⾯开发的项⽬，根据业务需求，需要将业务列表页⾯的每⼀个业务以卡⽚形式展⽰；同时为提升⽤户体验，要求实现每个卡⽚在⿏标经过有旋转和放⼤效果。
项⽬名称为 goods，包含⾸页 index.html、css ⽂件夹、img ⽂件夹，其中，css ⽂件夹包含 style.css ⽂件；img ⽂件夹包含 icon-img.jpg、icon-img2.jpg、icon-img3.jpg 图⽚。
请使⽤ html+css3 完成以下效果，并在对应代码处将空缺代码补全。
2. 【效果图】
（1）图 2-1 ⿏标经过
（2）图 2-2 ⿏标经过
3. 【代码：⾸页 index.html】 (提⽰： * 中间为填空答案 )
<!DOCTYPE html>
<html>
<head>
<title>第⼆题</title>
<meta charset="utf-8">
<!-- 根据说明正确导⼊当前⽬录下css⽂件夹中的style.css -->
<link rel="stylesheet" type="text/css" href="***css/style.css 或 ./css/style.css***"> </head>
<body>
<div class="box">
<div class="con">
<ul class="clear">
<li>
<img src="img/icon-img.jpg">
<p>优化速度</p>
<span>更多</span>
</li>
<li>
<img src="img/icon-img2.jpg">
<p>营销分析</p>
<span>更多</span>
</li>
<li>
<!-- 根据上下⽂填写正确的标签 -->
< ***img*** src="img/icon-img3.jpg" >
<***p***>SEO和导⼊链接</p>
<span>更多</span >
</li>
</ul>
</div>
</div>
</body>
</html>
4. 【代码：CSS ⽂件 style.css】 (提⽰： * 中间为填空答案 )
/* 注意：此处省略了部分和本题⽆关的css代码 */
.box .con ul li{
float:left;
background-color: #fff;
width: 380px;
/*设置li边框为圆⾓15px，⽂字对齐⽅式为居中。*/
***border-radius:15px;***
***text-align:center;***
overflow: hidden;
}
.box .con ul li:nth-child(2){
margin:0 30px;
}
.box .con ul li img{
margin:50px auto 0;
/*此处设置图⽚的过渡效果为0.8秒*/
***transition***：0.8s;
}
.box .con ul li p{
/*设置内边距上下为0，左右为15px*/
***padding:0 15px;***
line-height: 140px;
border-bottom:1px solid #ddd;
font-weight: 600;
color:#555;
}
.box .con ul li span{
display: block;
width: 100%;
height:60px;
line-height: 60px;
/*此处设置⽂字的过渡效果为0.8秒*/
***transition***：0.8s;
}
/*⽤CSS3的实现⿏标经过图⽚旋转360度，放⼤1.3倍，离开再旋转还原。*/
.box .con ul li:hover img{
web端登录***transition:rotate(360deg)scale(1.3);***
}
.box .con ul li:hover span{
background-color: #f7c324;
font-weight: 600;
}
试题三（每空 2 分，共 20 分）
阅读下列说明、效果图和代码，进⾏静态⽹页开发，请在红线处补全代码。
1.【说明】
现接到某电商⽹站注册、登录页⾯开发的项⽬，在注册页⾯需要做前端验证。具体要求：⽤户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码⼀致性验证。
项⽬名称为 verify，包含⾸页 index.html、css ⽂件夹、js ⽂件夹，其中，css ⽂件夹包含 style.css ⽂件，js ⽂件夹包含 index.js ⽂件。
2.【效果图】
3. 【代码：index.html】 (提⽰： * 中间为填空答案 )
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="box" id="box">
<h2>注册</h2>
<form action="" method="post">
<ul>
<li>
<label><span>*</span>⽤户名：</label>
<input type="text" name="username" placeholder="只能输⼊6-20个字母、数字、下划线" id="username">
</li>
<li>
<label><span>*</span>电⼦邮箱：</label>
<input type="text" name="email" placeholder="输⼊正确的电⼦邮箱地址" id="email">
</li>
<li>
<label><span>*</span>密码：</label>
<input type="password" name="pwd" placeholder="由字母开头，包含字母、数字、下划线,6-16位" id="pwd"> </li>
<li>
<label><span>*</span>确认密码：</label>
<input type="password" name="pwdOk" placeholder="确认密码必须与密码⼀致" id="pwdOK">
</li>
</ul>
<button name="submit">提交</button>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
4. 【代码：index.js】 (提⽰： * 中间为填空答案 )
//⾃定义验证⽤户名的⽅法
function validate_strLenght(str){
var regExp =/^(\w){6,20}$/;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论