考生姓名                                        准考证号                   
2019年下半年        Web前端开发初级        实操考试
（考试时间14:00-16:30 共150分钟）
1. 本试卷共5道题，满分100分。
2. 请在指定位置或开发环境下作答。
试题一（22分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。
【说明】
这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。
项目名称为shopping，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含i
ndex.css文件；img文件夹包含img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg图片。
【效果图】
图1-1
【代码：首页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">
   
<  （1）  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>
        </  （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{
    width: 100%;
}
.box .con{
    width: 1375px;
    margin:0 auto;
}
.box .con ul{
    padding-top:30px;
}
web前端开发笔试题库
/*左浮动*/
.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，包含首页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
【代码：】
<!DOCTYPE html>
<html>
<head>
    <title>第二题</title>
    <meta charset="utf-8">
<link rel="stylesheet" type="text/css"  href="    （1）        " >
</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>
                <    （2）    src="img/icon-img3.jpg" >
                <    （3）    >SEO和导入链接</p>
                <span>更多</span >
            </li>
        </ul>
    </div>
</div>
</body>
</html>
【代码】
/* 注意：此处省略了部分和本题无关的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;
    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，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件，js文件夹包含index.js文件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。