문
교육부: 직업 교육은 '1 + X "인증 시스템 개혁을 시작합니다
직업 교육 개혁 시범 X 1 개 + 인증 제도가 시작된
1 + X 등급 / 인증서 쿼리 항목
기사 디렉토리
질문 (공간 당 2 점, 22 점 총)
다음 지침, 렌더링 및 HTML 코드, 정적 웹 페이지 개발을 읽고, 빨간 선에서 코드를 작성해 주시기 바랍니다.
1. [설명]
이 전기 공급 업체 웹 사이트 의류 상품 표시 부분 페이지입니다 사이트는 가을과 겨울 여성의 프로모션이다. 이제 우리는 사이트의 일부 코드 렌더링을 작성해야합니다.
쇼핑에 프로젝트 이름은, 홈 index.html을, CSS 폴더, CSS 폴더 index.css 파일이 포함 IMG 폴더를 포함, IMG 폴더 img1.jpg, img2.jpg, img3.jpg, img4.jpg을 포함, img5.jpg 사진.
2. [렌더링]
[코드 : 홈 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>
[코드 : 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;
}
/*左浮动*/
.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 점)
(11)에 고정 된 웹 개발, (1)에서 종료 코드를 정확한 함량으로 채웠다.
대답 질문 a를
（1）ul
（2）ul
（3）list-style
（4）none
（5）display
（6）block
（7）clear
（8）both
（9）float
（10）left
（11）hover
질문 비스 (공간 당 2 점, 26 점 총)
(13) 코드 (1)에 다음과 같은 지침, 렌더링, 정적 웹 페이지 개발, 채우기를 참조하십시오.
[설명]
현재 비즈니스 요구, 모든 페이지의 요구가 카드의 형태로 표시 할 비즈니스 서비스 목록에 따르면, 매우 상업 유한 회사 공식 웹 표면 개발 프로젝트의 생각을 받아, 사용자 경험을 향상시키는 동시에 롤오버가 각 카드를 달성하는 데 필요한 회전 및 증폭.
프로젝트 이름 용품, 홈 index.html을, CSS 폴더, CSS 폴더에있는 style.css 파일을 포함, IMG 폴더를 포함, IMG 폴더 아이콘 - img.jpg, 아이콘 - img2.jpg 포함 아이콘-img3합니다. JPG 이미지.
사용 HTML + CSS3는 다음과 같은 효과를 완료하고 코드가 공석이 완료 코드에 해당.
[효과]도.
(1)도 2의 마우스의 앞쪽 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=" （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. [코드 : CSS 파일있는 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;
}
[질문 (26 점의 공간에 2 점)
(13)에 고정 된 웹 개발, (1)에서 종료 코드를 정확한 함량으로 채웠다.
이 질문에 답변
（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)
세 가지 질문 (공간 당 2 점, 20 점 총)
첫째, 객관식 (2 점 각 60 점 총)
(10) 코드 (1)에 다음과 같은 지침, 렌더링 및 코드, 정적 웹 페이지 개발, 채우기를 참조하십시오.
[설명]
이제 프론트 엔드의 요구에, 페이지 개발 프로젝트를 방문, 전기 공급 업체 등록 웹 사이트를 받았다은 등록 페이지를 확인 할 수 있습니다. 특정 요구 사항 : 인증 사용자 이름의 길이와 형식, 이메일 형식, 암호 길이 및 형식, 암호 및 암호 반복 일관성 검증.
프로젝트 이름은 CSS 폴더에 파일이있는 style.css 포함, JS 폴더 포함 홈 index.html을, CSS 폴더,하는 index.js 파일이 들어있는 폴더의 js를 확인합니다.
[효과]도
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 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}$/;
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
[문제 (20 점 공간에 2 점)
의 올바른 컨텐츠로 충전 (1)의 주석의 종료 코드 (10).
답 세 가지 질문
（1）username
（2）getElementById
（3）pwd
（4）getElementById
（5）getElementsByTagName
（6）onsubmit
（7）username.value
（8）validate_email
（9）console
（10）onblur
질문 사 (공간 당 4 점, 16 점 총)
다음 지침, 렌더링 및 코드, 동적 웹 개발을 읽고 빨간 선에서 코드를 작성해 주시기 바랍니다.
1. [참고]
기업의 사이드 바 메뉴 아코디언 효과를 사용하여, 연구를 통해, 자사의 공식 웹 사이트 홈 페이지를 확인합니다. 이제 우리는 사이트의 렌더링 부분에 대한 코드를 작성해야합니다.
jquery.min.js와하는 index.js이 들어있는 폴더의 js, 프로젝트 이름 아코디언, CSS 폴더에있는 style.css 파일을 포함 JS 폴더 홈 index.html을, CSS 폴더를 포함하고 있습니다.
2. [렌더링]
[코드 홈 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>
[코드]하는 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) ;
})
[문제 (16 점, 각 빈에 대한 4 점)
의 올바른 컨텐츠로 충전 (4) (1)의 주석의 종료 코드.
대답 네 가지 질문
（1）slideDown(800)
（2）slideUp(800)
（3）click
（4）slideDown(800)
다섯 개 질문 (공간 당 2 점, 16 점 총)
다음 지침, 렌더링 및 코드, 정적 웹 페이지 개발을 읽고, 빨간 선에서 코드를 작성해 주시기 바랍니다.
1. [설명]
인터넷 회사는 고정 된 형태의 바닥을 사용하여 메뉴를 결정하기 위해 모바일 단말에 적응하기 위해, 공식 웹 사이트 홈 페이지를 개발했다. 이제 우리는 효과를 달성하기 위해 코드를 작성해야합니다.
jquery.min.js와하는 index.js이 들어있는 폴더의 js, 프로젝트 이름 메뉴, CSS 폴더에있는 style.css 파일을 포함 JS 폴더 홈 index.html을, CSS 폴더를 포함하고 있습니다.
도 2 [효과]
[코드] 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>
[코드] 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*/
[코드]하는 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) ; })
[문제 (16 점 공간에 2 점)는
(8) (1)의 주석의 종료 코드가 올바른 컨텐츠로 채워진다.
대답 다섯 가지 질문
（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")
