Portal
Ministry of Education: Vocational Education will launch the "1 + X" certificate system reform
vocational education reform pilot X 1 + Certification Scheme started
1 + X grades / certificate query entry
Article Directory
A questions (2 points per space, a total of 22 points)
Read the following instructions, renderings and HTML code, static web page development, please complete your code at the red line.
1. [Description]
This is an electricity supplier websites apparel merchandise display partial page, the site is autumn and winter women's promotion. Now we need to write some code renderings of the site.
Project Name to shopping, contains Home index.html, css folder, img folder, which, css folder contains index.css file; img folder contains img1.jpg, img2.jpg, img3.jpg, img4.jpg, img5.jpg picture.
2. [rendering]
[Code: Home 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>
<div>
<!-- 根据上下文填入合适的标签 -->
< （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>
[Code: CSS file 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;
}
/*左浮动*/
.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;
}
[Question] (22 points, 2 points per space)
static web development, completion code in (1) to (11) filled in at the correct content.
The answer questions a
（1）ul
（2）ul
（3）list-style
（4）none
（5）display
（6）block
（7）clear
（8）both
（9）float
（10）left
（11）hover
Questions bis (2 points per space, a total of 26 points)
Read the following instructions, renderings, static web page development, fill in (1) to (13) code.
[Description]
now received the very thought of Commerce Co., Ltd. official web surface development projects, according to business needs, a business service list every page needs to be displayed in a form of a card; at the same time to enhance the user experience required to achieve each card in a rollover has rotation and amplification.
Project name goods, included Home index.html, css folder, img folder, which, css folder contains style.css file; img folder contains icon-img.jpg, icon-img2.jpg, icon-img3. jpg image.
Use html + css3 complete the following effects, and the code corresponding to the code at the completion of vacancies.
[Effect] FIG.
(1) through the front of the mouse of FIG. 2-1
(2) 2-2 rollover FIG
3. [Code: Home index.html]
<!DOCTYPE html>
<html>
<head>
<title>第二题</title>
<meta charset="utf-8">
<!-- 根据说明正确导入当前目录下css文件夹中的style.css -->
<link rel="stylesheet" type="text/css" href=" （1） " >
</head>
<body>
<div>
<div>
<ul>
<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>
4. [Code: CSS file style.css]
/* 注意：此处省略了部分和本题无关的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;
}
[Question] (26 points, 2 points per space)
static web development, completion code in (1) to (13) filled in at the correct content.
Answer two questions
（1）css/style.css 或者 ./css/style.css
（2）img
（3）p
（4）border-radius
（5）15px
（6）text-align
（7）center
（8）transition
（9）padding
（10）0 15px 或者 0px 15px 或者 0 15px 0 15px 或者 0px 15px 0px 15px
（11）transition
（12）transform
（13）rotate(360deg) scale(1.3) 或者scale(1.3) rotate(360deg)
Three questions (2 points per space, a total of 20 points)
First, multiple choice (2 points each, a total of 60 points)
Read the following instructions, renderings and code, static web page development, fill in (1) to (10) code.
[Description]
now received an electricity supplier registration website, landing page development projects, in the front end needs to be done to verify the registration page. Specific requirements: authentication user name length and format, email format, password length and format, password, and password repeated consistency verification.
Project Name to verify, included Home index.html, css folder, js folder, which, css folder contains files style.css, js folder contains index.js file.
[Effect] FIG
3. [Code: 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 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. [Code: index.js] (fill in the blank for the middle * prompt answer)
//自定义验证用户名的方法
function validate_strLenght(str) {
var regExp = /^(\w){6,20}$/;
return regExp.test(str);
}
//自定义的验证email方法
function validate_email(str) {
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return regExp.test(str);
}
//自定义验证密码的方法
function validate_pwd(str) {
var regExp = /^[a-zA-Z]\w{5,15}/;
return regExp.test(str);
}
//根据表单控件user的id填写
var username = document.getElementById(" （1） ");
//通过id获取元素
var email = document. （2） ("email");
//根据表单控件pwd的id填写
var pwd = document.getElementById(" （3） ");
//通过id获取元素
var pwdOK = document. （4） ("pwdOK");
//通过标签名获取元素
var form = document. （5） ("form")[0];
//表单提交
form. （6） = function () {
//使用自定义方法验证用户名、验证邮箱
if (validate_strLenght( （7） ) && （8） (email.value) && validate_pwd(pwd.value) && checkOk()) {
console.log(username.value)
console.log(email.value)
console.log(pwd.value)
return false;
} else {
//控制台输出
（9） .log("验证失败")
return false;
}
}
// 检查用户名
username.onblur = function () {
if (validate_strLenght(username.value)) {
console.log("用户名符合要求")
} else {
console.log("用户名不符合要求")
}
}
//检查meil
email.onblur = function () {
if (validate_email(email.value)) {
console.log("邮箱格式符合要求")
} else {
console.log("邮箱格式不符合要求")
}
}
// 密码框失去焦点的时候
pwd. （10） = function () {
if (validate_pwd(pwd.value)) {
console.log("密码符合要求")
} else {
console.log("密码不符合要求")
}
}
function checkOk() {
if (pwd.value == pwdOK.value) {
console.log("密码与重复密码一致")
return true
} else {
console.log("密码与重复密码不一致")
return false
}
}
pwdOK.onkeyup = checkOk
[Problem (20 points, 2 points per space)
The comments completion code in (1) to (10) filled in at the correct content.
The answer three questions
（1）username
（2）getElementById
（3）pwd
（4）getElementById
（5）getElementsByTagName
（6）onsubmit
（7）username.value
（8）validate_email
（9）console
（10）onblur
Questions four (4 points per space, a total of 16 points)
Read the following instructions, renderings and code, dynamic web development, please complete your code at the red line.
1. [note]
of a company to make its official website home page, through research, using the sidebar menu accordion effect. Now we need to write code for the site renderings part.
Project name accordion, contains Home index.html, css folder, js folder, which, css folder contains style.css file; js folder contains jquery.min.js and index.js.
2. [rendering]
[Code Home index.html]
<!DOCTYPE html>
<html>
<head>
<title>手风琴效果</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li>
<h2>要求<span></span></h2>
<div><p>要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求</p></div>
</li>
<li>
<h2>信念<span></span></h2>
<div><p>信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念</p></div>
</li>
<li>
<h2>接受<span></span></h2>
<div><p>接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受接受</p></div>
</li>
<li>
<h2>现实<span></span></h2>
<div><p>现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实</p></div>
</li>
</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
[Code] index.js
$(".box ul li h2").click(function(e){
e.stopPropagation();
//被点击的h2的next的div下拉展开，其余的li内部的div上拉收起，时间800毫秒。
$(this).next().stop(). (1) .parents("li").siblings().find("div")
.stop(). (2) ;
$(this).parent().stop().addClass("cur").siblings().stop().removeClass("cur");
})
//点击事件
$(document). (3) (function(){
//所有div上拉收起，时间800毫秒。
$(".box ul li").find("div"). (4) ;
})
[Problem (16 points, 4 points for each blank)
The comments completion code in (1) to (4) filled in at the correct content.
The answer four questions
（1）slideDown(800)
（2）slideUp(800)
（3）click
（4）slideDown(800)
Five questions (2 points per space, a total of 16 points)
Read the following instructions, renderings and code, static web page development, please complete your code at the red line.
1. [description]
a Internet company developed the official website home page, in order to adapt the mobile terminal to determine the menu using the bottom of a fixed form. Now we need to write code to achieve the effect.
Project Name menu, contains Home index.html, css folder, js folder, which, css folder contains style.css file; js folder contains jquery.min.js and index.js.
FIG 2. [Effect]
[Code] index.html
<!DOCTYPE html>
<html>
<head>
<title>底部菜单</title>
<meta charset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div>
<div>
<a href="">首页</a>
</div>
<div>
<div>
<div style="border-bottom: 1.5px solid #F2F2F2"><a>项目</a></div>
<div>项目</div>
</div>
<a>服务</a>
</div>
<div>
<div>
<div style="border-bottom: 1.5px solid #F2F2F2"><a>中心公告</a></div>
<div>中心资讯</div>
</div>
<a>资讯</a>
</div>
<div>
<a>我的账户</a>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
[Code] index.css
a {
text-decoration: none;
color: #333;
}
/*固定定位*/
.layout-footer {
position: (1) ;
z-index: 9999;
/*左边距离0px，底边距离0px*/
left: (2) ;
bottom: (3) ;
/*实现flex布局，主轴对齐方式是两端对齐，项目之间的间隔都相等。*/
display: (4) ;
justify-content: (5) ;
width: 100%;
height: 50px;
border-top: 1px solid gainsboro;
color: black;
text-align: center;
background-color: #f2f2f2;
}
/*此处省略部分与本题无关的css*/
[Code] index.js
$(".bottom_nav a").click(function (e) {
e.stopPropagation();
//被点击a的上一个div元素样式设置为block，其余项目的div的隐藏。
$(this).prev().stop(). (6) .parent().siblings()
.children(".layout-submenu").stop(). (7) ;
})
$(document).click(function () {
//点击页面的任意地方，二级菜单全部取消
$(".box ul li").find("div"). (8) ; })
[Problem (16 points, 2 points per space)
The comments completion code in (1) to (8) is filled at the correct content.
The answer five questions
（1）fixed
（2）0 或者 0px
（3）0 或者 0px
（4）flex
（5）space-between
（6）css("display", "block")
（7）css("display", "none")
（8）css("display", "block")
