1+x 证书 Web 前端开发初级实操考试(试卷12)
PDF版点击查看Web前端开发初级模拟测试卷(四).pdf
共55道题 总分:200分 形考总分:0分
一、单选题共30题,60分
1.以下说法正确的是: D
- Atable的表单标签
- Btd的代表行
- Ctr代表列
- Dtable是表格标签
2.在javascript中,执行结果正确的是: B
- Atypeof(null)的结果为null
- Btypeof(typeof(5))的结果为"string"
- Ctypeof(5)的结果为Number
- Dtypeof(typeof(undefined))的结果为undefined
3.让一个动画名为fade的动画持续执行并且在第一次开始时延迟0.5s开始,每次动画执行1s,以下代码正确的是 A
- Aanimation:fade 1s 0.5s infinite
- Banimation:fade 0.5s 1s infinite
- Canimation:fade 1s 0.5s linear
- D以上都不正确
4.CSS3中可以用()关键词,自定义字体代表小图标 C
- Atransition
- Btransform
- Cfont-face
- Dfont-family
5.在javascript中,执行后输出的结果是: B
var name="zhaonan"; var obj1={ name:"miao", age:20, say:function(){ console.log(this.name); } } var obj2={ name:"xue", age:30, say:function(){ console.log(this.name); } } var f=obj2.say; console.log(f()); var e=f.bind(obj1); console.log(e()); var k=e.bind(obj2); console.log(k());
- Azhaonan zhaonan miao
- Bzhaonan miao miao
- Czhaonan miao xue
- Dmiao zhaonan xue
6.不是HTML5的新增的特性是: D
- A新增了很多语义化标签
- B新增了音频和视频
- C新增了本地存储
- D新增伪类
7.css样式初始化的原因描述错误的是: C
- A清除默认样式
- B由于浏览器的内核不同,对标签的默认样式解析不同,导致显示效果不同,所以需要初始化样式
- C和浏览器没有关系,只是规范而已
- D保证各个浏览器页面效果的一致性
8.在jquery中,常用的stop(),关于stop()的说法错误的是 D
- Astop()停止当前动画,后续动画继续执行
- Bstop(true)是停止当前动画,后续动画不执行
- Cstop(true,true)是停当前执行的动画,直接跳到当前动画的最终状态,后续动画不执行
- Dstop(true,true)是停当前执行的动画,直接跳到当前动画的最终状态,后续动画继续执行
9.在javascript中,关于数学对象说法正确的是: C
- AMath.round(4.5)的结果是4
- BMath.floor(4.5)的结果是5
- CMath.ceil(4.5)的结果是5
- DMath.min(3,4,5)的结果是5
10.对于addEventListener绑定事件的说法错误的是 C
- A可以给一元素绑定多个事件
- BaddEventListener中的this指绑定的元素
- Cdiv.addEventListener("click",function(),false)中的false代表捕获事件
- Ddiv.addEventListener("click",function(),false)中的false代表冒泡事件
11.对闭包的理解说法错误的是: A
- A闭包不能避免全局污染
- B闭包可以将内部函数保存到外部的时候
- C可以从外部访问内部变量
- D闭包把外部变量保存到内存中不被释放,导致内存泄漏。
12.设置一个div元素的外边距为上:20px,下:30px,左:40px,右:50px,下列书写正确的是:D
- Apadding:20px 30px 40px 50px;
- Bpadding:20px 50px 30px 40px;
- Cmargin:20px 30px 40px 50px
- Dmargin:20px 50px 30px 40px
13.块级元素说法正确的是: B
- A块级元素和其他元素在一行显示
- B块级元素对宽和高,边距生效
- C块级元素对宽和高生效,边距不生效
- D块级元素对宽,高,边距都不生效
14.关于jQuery中删除已有元素的方法说法正确的是() C
- Aremove()从被选元素中删除子元素
- Bremove()删除被选元素(不会删除其子元素)
- Cempty()从被选元素中删除子元素
- Dempty()删除被选元素及其子元素
15.在jquery中,下列哪一个是用来查找表单中所有隐藏元素的 B
- Avisible
- Bhidden
- Cvisible()
- Dhidden()
16.设置文字的大小为14px,加粗,行高为28px,字体是微软雅黑,字体是倾斜的,以下书写正确的是:D
- Afont:14px "微软雅黑" 28px 600 italic
- Bfont:"微软雅黑" 14px/28px 600 italic
- Cfont:14px/28px 600 "微软雅黑" italic
- Dfont:600 italic 14px/28px "微软雅黑"
17.在javascript中,数据类型转换正确的是: A
- ANumber("123abc")的值为NaN
- BparseInt("123abc")的值为NaN
- CparseInt("10",8)的值为10
- DparseFloat("abc123.3")的值为123.3
18.对于事件流说法错误的是:C
- A事件流分为三个阶段
- B事件流分捕获阶段、目标节点、冒泡阶段
- C捕获和冒泡同时存在先执行冒泡阶段
- D目标阶段存在捕获和冒泡,按顺序执行
19.在开发过程中,图片下面有1像素的小间隙,如何去除: B
- A给图片设置font-size:0
- B给图片设置display:block
- C给图片设置border:0
- D给图片设置border:none;
20.css3中的伪类div p:nth-of-type(3){color:red}的说法正确的是:B
- A给div元素的第三个子元素设置文字颜色为红色
- B给div元素的后代元素的第三个p元素设置文字颜色为红色
- C给div的后代元素p设置文字颜色为红色
- D以上说法都不正确
21.在jquery中,下列哪一个是用将$(“<p></p>”)来追加到指定元素末尾的()C
- AinsertAfter()
- Bappend()
- CappendTo()
- Dafter()
22.Jquery中,找到所有子元素的方法是: C
- Afind()
- Bsiblings()
- Cchildren()
- Dparent()
23.在javascript中,下列转Boolean后值为false的是: B
- ABoolean(" ")
- BBoolean(0)
- CBoolean([])
- DBoolean({})
24.设置背景颜色为green,背景图片垂直居中显示,背景图片充满整个区域,但是背景图片不能变形,图片只出现一次,以下书写正确的是: A
- *A*background:url("../img/img1.jpg") no-repeat center/cover green; - *B*background:url("../img/img1.jpg") repeat center/cover green; - *C*url("../img/img1.jpg") no-repeat center/100% green; - *D*url("../img/img1.jpg") no-repeat center/100% 100% green;
25.css3中用什么来定义过渡动画的时间 C
- Atransition-property
- Btransition-timing-function
- Ctransition-duration
- Dtransition-delay
26.在javascript中,获取今天是星期几的方法是: C
- Anew Date().getDate()
- Bnew Date().getTime()
- Cnew Date().getDay()
- Dnew Date().getFullYear()
27.在javascript中,执行下列代码后输出的结果是: if(function(){}){ console.log(1); }else{ console.log(2); } B
- A2
- B1
- C什么也不输出
- D报错
28.下列属于内联元素的是: B
- Adiv
- Ba
- Cp
- Dtable
29.在javascript中,执行下列代码输出的结果是: console.log(+"5"*2+"6"-"4"+true) B
- A13
- B103
- C104
- D12true
30.在javascript中,执行下列代码输出的结果是: for(var i=0;i<4;i++){ console.log(i) } console.log(i) A
- A0 1 2 3 4
- B0 1 2 3 4 5
- C0 1 2 3
D4 4 4 4
二、多选题共15题,30分
1.关于 @media书写正确的是: AB
- A@media screen and (max-width: 300px)
- B@media only screen and (max-width: 500px)
- C@media screen (max-width: 500px)
- D@media (max-width: 500px)
2.关于选择器优先级正确的是: AC
- Aid选择器>类选择器>标签选择器
- Bid选择器>!important>类选择器>标签选择器>通配符
- C!important>id选择器>类选择器>标签选择器
- Did选择器>类选择器>标签选择器>!important
3.关于doctype html说法正确的是: BC
- A区分大小写,只有<!DOCTYPE html>才是正确的
- B这句话的作用是告诉浏览器以什么标准去解析网页
- C这句话可以省略,省略后页面呈怪异模式
- D以上说法都正确
4.javascript中,关于parseInt()说法正确的是: AB
- A将其他类型的数据转成数值
- B可以将其他进制的数据转成十进制
- CparseInt()与Number()方法功能相同
- D以上说法都正确
5.下列属于jquery选择器的是: ABCD
- A基本选择器
- B层级选择器
- C属性选择器
- D位置选择器
6.下面哪几种是Jquery中表单的对象属性: ABD
- A:checked
- B:enabled
- C:hidden
- D:selected
7.引入样式的方法有哪几种 ABCD
- A内联样式
- B内部样式
- C外部样式
D以上都正确
8.在form标签中,属性method的值有哪些 BC
- Arequest
- Bget
- Cpost
- D以上都正确
9.以下关于标签的嵌套书写错误的是: ABCD
- *A*<p><p></p></p> - *B*<a href=""><a href=""></a></a> - *C*<ul><h2></h2><li></li><li></li></ul> - *D*以上都是错误的
10.javascript中,循环语句有哪些? BCD
- Aif
- Bwhile
- Cdo while
- Dfor
11.javascript中,下列结果为NaN的是: ABCD
- ANumber("adfa")
- BparseInt("undefined")
- CparseInt("null")
- DparseInt("")
12.javascript中,下列表达式结果为true的是: BCD
- A[]==[]
- B![]==false
- C[]==false
- D[0]==false
13.下列对于float属性的特点说法错误的是: ABC
- Afloat能向左和向右移动,也可以上下移动
- Bfloat会占据原有空间
- C清除浮动的作用不大,可以省略
- D给父级元素设置height可以清除浮动
14.jQuery中遍历节点的方法,正确的是 ABD
- Anext() 取得匹配元素后面紧邻的同辈元素
- Bprev() 取得匹配元素前面紧邻的同辈元素
- Csiblings() 取得匹配元素前的所有同辈元素
- Dparent() 取得元素的父级元素
15.以下属于HTML5新标签的是: BCD
- Atitle
- Bouput
- Cnav
- Daside
三、判断题共5题,10分
1.jquery中获取元素宽度包含padding的方法是innerwidth() 对
- A对
- B错
2.在javascript中,this都指向调用者 错
- A对
- B错
3.html是一种超文本标记语言 A
- A对
- B错
4.在javascript中,document.getElementById返回一组元素 错
- A对
- B错
5.CSS中设置字符间距的是word-spacing 错
- A对
- B错
四、客观填空题共5题,100分
1.阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(20)代码。
【说明】
这是资源管理平台,用html+css完成。
项目包含首页index.html、css文件夹、img文件夹,其中,css文件夹包含base.css文件;img文件夹包含用到的图片。
请根据效果图和已提供的代码,补全(1)-(20)中的代码。
【效果图】
index.html在PC端效果如图所示。

【素材】

【代码:首页index.html】
<!-- 声明 -->
1
<html>
<head>
<!-- 设置编码为utf-8 -->
<meta
2
="UTF-8">
<title>资源中心-首页</title>
<!-- 引入样式 -->
<
3
href="css/base.css" rel="
4
">
</head>
<body>
<!--公用头部导航开始-->
<div>
<div>
<div class="top_nav fl">
<ul>
<!-- 填写链接属性 -->
<li><a
5
="#">平台首页</a><span></span></li>
<li><a href="#">个人中心</a><span></span></li>
<li><a href="#">我的主页</a><span></span></li>
<li><a href="#">学习中心</a><span></span></li>
<li><a href="#">资源中心</a><span></span></li>
</ul>
</div>
<div class="top_secher fl">
<!-- 插入图片 -->
<
6
7
="img/xiaobiao_img3.jpg">
<input type="text">
</div>
<div class="top_info fr">
<ul>
<li>
<img src="img/xiaobiaio_tx.jpg" width="46" height="46">
</li>
<li>李凤鸣同学<span>1</span></li>
<li>
<div>
<img src="img/xiaobiao_img1.jpg">
</div>
</li>
<li>
<div>
<img src="img/xiaobiao_img2.jpg">
</div>
</li>
</ul>
</div>
</div>
</div>
<!--公用头部导航结束-->
</body>
</html>
【代码:CSS文件base.css】
@charset "utf-8";
/* CSS Document */
/*样式重置*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,hr,span,form,fieldset,table,td,img,div,dl,dt,dd,input{
margin:0;
padding:0;
8
;/*清除列表样式*/
}
body,html{
9
:"Microsoft YaHei";/*设置字体*/
font-size: 14px;
}
a{
10
;/*去掉下划线*/
}
img{
border:none;
display:block;
margin: 0 auto;
}
input,select,textarea{
outline:none;
border:none;
background-color:
11
;/*设置背景透明*/
}
input:focus {
outline: none;
}
textarea{
12
;/*阻止手动改变文本框大小*/
}
/*清除浮动*/
.clearfix:after{
content:"";
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}
/*头部样式*/
.top{
width:100%;
margin:0;
padding:0;
height:60px;
background-color:#FFCF4E;
13
;/*设置固定定位*/
14
: 9999;/*设置层级*/
}
.top_conten{
width:1200px;
margin:0 auto;
15
;/*设置相对定位*/
}
.top_nav ul{
margin-left: 0px;
}
.top_nav ul li{
position:relative;
float: left;
text-align: center;
color: #383337;
font-size: 16px;
16
: 40px; /*设置行高*/
padding-top: 7px;
margin: 0 15px;
}
.top_nav ul li a{
color: #383337;
}
.top_nav ul .cur{
border-bottom: 1px solid #383337;
}
.top_nav ul .cur a{
color:#383337;
}
.top_nav span{
display:inline-block;
position:absolute;
bottom:-1px;
left:50%;
margin-left:-35px;
width:70px;
height:1px;
background:#383337;
overflow:hidden;
17
:
18
(0);/*放大*/
}
.top_nav ul li:hover span{
transform:scale(1);
19
:all .5s ease;/*设置过渡时间*/
}
.top_secher{
margin-top:18px;
border:none;
width: 0;
line-height: 24px;
height: 24px;
border-radius: 13px;
text-align: left;
transition: all .5s ease;
}
.top_secher img{
margin-left: 4px;
margin-top: 3px;
width: 19px;
display:block;
float: left;
}
.top_secher input{
width: 120px;
float: left;
margin-left: 28px;
line-height: 24px;
position: absolute;
}
.top .open{
width: 158px;
border: 1px solid #343434;
transition: all .5s ease;
}
.top_info ul li{
float:left;
margin:0 10px;
height:46px;
margin-top:7px;
display:table;
line-height:46px;
position:relative;
}
.top_info ul li > div{
display:table-cell;
vertical-align:middle;
text-align: center;
cursor:pointer;
}
.top_info ul li span{
background-color: #FF4A1F;
border: 1px solid #fff;
color: #fff;
padding: 0 4px;
font-size: 12px;
line-height: 15px;
top:3px;
left: 68px;
position: absolute;
20
: 50%;/*设置圆角*/
}
打开解析
(1)<!DOCTYPE html>
(2)charset
(3)link
(4)stylesheet
(5)href
(6)img
(7)src
(8)list-style: none
(9)font-family
(10)text-decoration: none;
(11)transparent
(12)resize:none;
(13)position: fixed
(14)z-index
(15)position:relative
(16)line-height
(17)transform
(18)scale
(19)transition
(20)border-radius
- 阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码。
【说明】
这个某项目中的其中一部分,应用HTML5和css3技术完成页面的布局。项目包含主页index.html、style.css和img。要求鼠标经过翻转出现遮罩层,根据效果图和已有的代码补全(1)-(10)的代码
【效果图】

【素材】

【代码:主页index.html】此页代码在此省略,请在“实操代码”中第二题查看
【代码:style.css】
.clearfix:after{
display:block;
content:'';
1
;/*清除浮动*/
}
.clearfix{
zoom:1;
2
;/*文字居中*/
}
.fl{
float:left;
}
.fr{
float:right;
}
.part5 .tBox{
width: 1154px;
height: 430px;
margin: 30px auto 0;
position: relative;
}
.part5 .tBox .picBox{
width: 1000px;
margin: 0 auto;/*盒子居中*/
height: 100%;
3
;/*溢出隐藏*/
position: relative;
}
.part5 .tBox .picBox .roll{
position: relative;
margin-right: 24px;
perspective: 1000px;
4
;/*鼠标经过变小手状态*/
}
/*最后一个元素*/
.part5 .tBox .picBox .roll:last-child{
margin-right:0;
}
.part5 .tBox .picBox li .bg{
width: 100%;
height: 65px;
background:
5
; /*背景黑色透明80%*/
position: absolute;
left: 0;
bottom: 0;
}
.part5 .tBox .picBox li h3{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px;
text-align: left;
padding-left: 13px;
}
.part5 .tBox .picBox li .tName{
font-size: 18px;
color: #fff;
padding-top: 13px;
margin-bottom: 5px;
}
.part5 .tBox .picBox li .tTitle{
font-size: 12px;
color: #b4b4b4;
}
.roll .box-content{
width: 100%;
height: 480px;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.8);
transform:
6
;/*Y轴旋转90度*/
transition: all 0.50s ease-in-out 0s;/*过渡效果*/
overflow: hidden;
}
.roll .box-img{
transform: rotateY(0);
transition: all 0.50s ease-in-out 0s;/*过渡效果*/
}
.roll:hover .box-img{
transform:
7
;/*Y轴旋转-90度*/
}
.roll:hover .box-content{
transform:
8
;/*Y轴旋转0度*/;
}
.roll .box-content .t1{
font-size: 20px;
9
: bold;/*文字加粗*/
color: #fff;
padding-top: 50px;
}
.roll .box-content .t2{
font-size: 16px;
color: #fff;
padding-top: 12px;
}
.roll .box-content .t3{
width: 190px;
height: 1px ;
background: #fff;
margin: 20px auto 0;
}
.roll .box-content .t4{
font-size: 14px;
width: 182px;
10
;/*文字两端对齐*/
color: #fff;
margin: 20px auto 0;
}
打开解析
(1)clear:both
(2)text-align: center
(3)overflow: hidden
(4)cursor: pointer
(5)rgba(0,0,0,.8)
(6)rotateY(90deg)
(7)rotateY(-90deg)
(8)rotateY(0)
(9)font-weight
(10)text-align: justify
- 阅读下列说明、效果图和代码,用jquery完成指定功能。
【说明】
先要完成一个通讯录,在需要添加人员的时候,点击“添加行”,当点击删除的时候,序号需要重新排序。同时为了提高用户体验,需要用js实现隔行换色。请根据现有的代码和效果图补全代码(1)-(10)
【效果图】

【素材】

【index.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通讯录</title>
<link rel="stylesheet" href="css/style.css">
<!-- 引入jq库 -->
<script src="
1
"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="box">
<!-- 表格居中 -->
<table
2
="center">
<!-- 表格标题 -->
<
3
>通讯录</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>13754448888</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>13788889999</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<button class="add">添加一行</button>
</div>
</body>
</html>
【style.css】
.box{
width: 400px;
margin:30px auto;
text-align: center;
}
.box>button{
width: 100%;
height: 40px;
margin-top:20px;
border:none;
border-radius: 10px;
background-color: green;
color:#fff;
}
table{
width:400px;
text-align:center;
/*边框重叠*/
4
;
}
table caption{
height: 60px;
line-height: 60px;
font-weight: 600;
}
table th{
background-color: #f5f5f5;
}
table,td,th{
border:1px solid #ccc;
}
table tr{
height:50px;
}
【index.js】
$(function(){
// 添加行 绑定点击事件
$(".add").
5
(function(){
var newTr=$("<tr></tr>");
for(i=0;i<$("thead>tr>th").length;i++){
newTd=$("<td></td>");
if(i==0){
newTd.text($("tbody>tr").length+1);
}
if(i==$("thead>tr>th").length-1){
//设置标签内容
newTd.
6
("<button>删除</button>")
}
//追加节点
newTd.
7
(newTr);
};
$("tbody").append(newTr);
changeColor();
})
// 隔行换色
function changeColor(){
$("tbody tr:odd").css("background","#f5f5f5");
$("tbody tr:even").css("background","#fff");
}
changeColor();
// 删除行
$("tbody").
8
("click","button",function(){
$(this).parents("tr").remove();
changeColor();
order();
});
//重新排序
function order(){
$("tbody tr").
9
(function(index){
$(this).children().eq(0).text(
10
);
});
}
})
打开解析
(1)js/jquery.min.js
(2)align
(3)caption
(4)border-collapse: collapse
(5)click
(6)html
(7)appendTo
(8)on
(9)each
(10)index+1
4.阅读下列说明,用javascript编写程序。填写(1)至(10)代码。
【说明】
在某项目中,在首页需要实现左右轮播的效果图,要求用javascript完成,根据已经提供的代码,补全(1)-(10)位置上的代码。
【效果图】

【素材】

【index.html】
布局结构如下代码,并将样式引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>第三题-无缝轮播</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" type="text/css" href="css/lunbo.css">
</head>
<body>
<div class="banner" id="banner">
<ul class="clear" style="left:-100%">
<li><img src="img/index-banner3.jpg"></li>
<li><img src="img/index-banner1.jpg"></li>
<li><img src="img/index-banner2.jpg"></li>
<li><img src="img/index-banner3.jpg"></li>
<li><img src="img/index-banner1.jpg"></li>
</ul>
<div id="left"></div>
<div id="right"></div>
<div id="pageNav"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>
【style.css】
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
img{
display:block;
}
.clear:after{
content:"";
display:block;
clear:both;
}
.banner{
position:relative;
width:100%;
overflow:hidden;
}
.banner ul{
position:relative;
width:500%;
}
.banner ul li{
width:20%;
float:left;
}
.banner ul li img{
width:100%;
}
#left,#right{
position:absolute;
top:50%;
margin-top:-25px;
width: 50px;
height:50px;
cursor:pointer;
background-color: rgba(0,0,0,0.4);
}
#left{
left:0;
}
#right{
right:0;
}
#left:hover,#right:hover{
background-color: rgba(0,0,0,0.8);
}
#pageNav{
position: absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}
#pageNav a{
display:inline-block;
margin:0 5px;
width:15px;
height:15px;
background-color: #fff;
border-radius:50%;
}
#pageNav a.cur{
background-color: orange;
}
【index.js】
// 获取元素
//(1)根据标签获取元素
var banner=document.getElementById("banner"),
ul=banner.
1
("ul")[0],
li=ul.getElementsByTagName("li"),
leftBtn=document.getElementById("left"),
rightBtn=document.getElementById("right"),
pageNav=document.getElementById("pageNav"),
index=0,
timer=null,
animate=false;
// 追加小圆点
for(var i=0;i<li.length-2;i++){
//创建元素
var pageA=
2
("a");
if(i==0){
//设置类名
pageA.
3
="cur";
}
//追加节点
pageNav.
4
(pageA);
}
// 给小圆点绑定点击事件
var aBtn=pageNav.getElementsByTagName("a");
for(var j=0;j<aBtn.length;j++){
//记录索引值
5
;
aBtn[j].onclick=function(){
if(animate){
return
}
//计算偏移量
var offset=
6
;
//传参-当前点击对象的索引值
btnShow(
7
);
imgShow(offset);
index=this.index;
}
}
// 小圆点点亮
function btnShow(num){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className="";
}
aBtn[num].className="cur";
}
// 切换图
function imgShow(offset){
animate=true;
var speed=offset/10;
var newLeft=parseInt(ul.style.left)+offset;
var go=function(){
if(speed<0&&parseInt(ul.style.left)>newLeft || speed>0 && parseInt(ul.style.left)<newLeft){
ul.style.left=parseInt(ul.style.left)+speed+"%";
//延时计时器
8
(go,50);
}else{
ul.style.left=(index+1)*(-100)+"%";
animate=false;
}
}
go();
}
// 给左右箭头绑定点击事件
leftBtn.onclick=function(){
if(animate){
return
}
index--;
if(index<0){
index=aBtn.length-1;
}
btnShow(index);
imgShow(100);
}
rightBtn.onclick=function(){
if(animate){
return
}
index++;
if(index==aBtn.length){
index=0;
}
btnShow(index);
imgShow(-100);
}
// 自动轮播
function lunbo(){
rightBtn.onclick();
}
timer=setInterval(lunbo,3000);
// 鼠标经过Banner区域清除计时器
banner.onmouseover=function(){
9
;
}
// 鼠标离开继续自动轮播
banner.
10
=function(){
console.log(1);
timer=setInterval(lunbo,3000);
}
打开解析
(1)getElementsByTagName
(2)document.createElement
(3)className
(4)appendChild
(5)aBtn[j].index=j
(6)(this.index-index)*(-100)
(7)this.index
(8)setTimeout
(9)clearInterval(timer)
(10)onmouseout
5.阅读下列说明、效果图和代码,完成移动端布局。
【说明】
在某项目中,项目中的文件包含index.html、style.css和images文件夹。请根据现有的代码和效果图补全代码(1)-(5)
【效果图】

【素材】

【index.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在线公开课学习app</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div>
<div>
<i class="icon icon-search"></i>
<input type="text" placeholder="搜索课程">
</div>
</div>
</header>
<section>
<div>
<img src="images/banner.png" alt="">
</div>
<div>
<a href="javascript:;">
<div>
<img src="images/nav-001.png" alt="">
</div>
<div>
<h2>临床学院</h2>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/nav-002.png" alt="">
</div>
<div>
<h2>科研学院</h2>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/nav-003.png" alt="">
</div>
<div>
<h2>医考学院</h2>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/nav-004.png" alt="">
</div>
<div>
<h2>科员学院</h2>
</div>
</a>
</div>
<div>
<h1>精品推荐</h1>
</div>
<div>
<a href="javascript:;">
<div>
<img src="images/pd-001.png" alt="">
</div>
<div>
<h3>从基础到实战:全面讲解补液</h3>
<p>¥215.00 <i>新课特惠</i> <em>¥398</em> </p>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/pd-002.png" alt="">
</div>
<div>
<h3>Meta 分析零基础的实用教程</h3>
<p>¥215.00 <em>¥398</em> </p>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/pd-003.png" alt="">
</div>
<div>
<h3>脊柱MRI进阶指南 分析零基础的实用教程</h3>
<p>¥215.00 <i>新课特惠</i> <em>¥398</em> </p>
</div>
</a>
<a href="javascript:;">
<div>
<img src="images/pd-004.png" alt="">
</div>
<div>
<h3>从基础到实战:全面讲解补液</h3>
<p>¥215.00<em>¥398</em> </p>
</div>
</a>
</div>
</section>
</body>
</html>
【style.css】
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td {
margin: 0;
padding: 0;
}
html,body {
color: #333;
margin: 0;
height: 100%;
font-family: '微软雅黑';
font-weight: normal;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
height: auto;
display: block;
border: 0;
}
body {
background: #fff;
color: #666;
}
ul,ol{
list-style: none;
}
.clearfix::after {
clear: both;
content: "";
display: block;
}
.header{
height: 44px;
position: relative;
display: flex;
z-index: 102;
background:#fefefe;
}
.header .center{
-webkit-box-ordinal-group: 3;
1
;/*设置弹性盒子*/
justify-content: center;
align-items: center;
height: 44px;
width: 90%;
margin-left: 4%;
}
.search-box {
background: #ededed;
border-radius: 22px;
position: relative;
width: 100%;
margin: 0 auto;
height: 32px;
}
.icon-search {
position: absolute;
background-image: url("../images/index.png");
left: 8px;
top: 0.4rem;
background-size: 19px;
}
.search-box input {
width: 100%;
background: none;
border: none;
font-size: 0.85rem;
text-align: left;
height: 32px;
border-radius: 3px;
padding: 0.55rem 0 0.55rem 1.8rem;
}
.scrollView {
width: 100%;
height: 100%;
2
;/*剩余空间全部分给该盒子*/
overflow-y: auto;
overflow-x: hidden;
position: relative;
padding-bottom: 53px;
}
.slider-wrapper {
display: flex;
width: 96%;
margin:0 auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
z-index: 1;
padding:0.55rem;
}
.slider-wrapper img {
width: 100%;
height: auto;
display: block;
border: none;
}
.item {
width: 96%;
margin:0 auto;
padding: 0.5rem;
position: relative;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.palace-grid .palace-grid-icon{
width: 40px;
height: 40px;
margin:0 auto;
}
.palace-grid .palace-grid-text {
display: block;
text-align: center;
color: #333;
font-size: 0.85rem;
3
;/*阻止换行*/
4
;/*文字溢出显示省略号*/
overflow: hidden;
padding-top: 0.2rem;
}
.palace-grid .palace-grid-text h2 {
font-size: 0.8rem;
font-weight: normal;
color:
#666666;
}
.flex {
display: flex;
align-items: center;
padding: 15px;
position: relative;
}
.flex h1 {
flex: 1;
min-width: 0;
font-size: 14px;
color: #333;
}
.list-theme{
width: 96%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list-item {
width: 46%;
margin: 0 2% 2% 2%;
background: #fff;
display: block;
overflow: hidden;
}
.list-theme-message {
background:
#fff;
padding: 0.3rem 0;
}
.list-theme-title {
color: #333;
font-size: 0.92rem;
margin: 0.2rem 0;
overflow: hidden;
font-weight: normal;
white-space: nowrap;/*阻止换行*/
text-overflow: ellipsis;/*文字溢出显示省略号*/
}
.list-theme-message p {
color: #f68f40;
font-size: 0.99rem;
font-weight: 500;
height: 1.5rem;
}
.list-theme-message p i {
font-style: normal;
font-size: 0.7rem;
border: 1px solid
#f68f40;
border-radius: 2px;
padding: 0 0.2rem;
}
.list-theme-message p em {
font-style: normal;
font-size: 0.7rem;
padding: 0 0.2rem;
color: #999999;
5
;/*删除线*/
}
打开解析
(1)display: flex
(2)flex: 1
(3)white-space: nowrap
(4)text-overflow: ellipsis
(5)text-decoration: line-through
1+x 证书 web 前端开发初级对应课程分析
http://blog.zh66.club/index.php/archives/194/
1+X 证书 Web 前端开发中级对应课程分析
http://blog.zh66.club/index.php/archives/195/
1+x证书Web前端开发初级理论考试样题2019
http://blog.zh66.club/index.php/archives/149/
1+x证书Web前端开发初级实操考试样题2019
http://blog.zh66.club/index.php/archives/150/
1+x证书Web前端开发中级理论考试样题2019
http://blog.zh66.club/index.php/archives/151/
1+x证书Web前端开发中级实操考试样题2019
http://blog.zh66.club/index.php/archives/152/
1+x 证书 Web 前端开发初级理论教案
http://blog.zh66.club/index.php/archives/322/
1+x 证书 Web 前端开发中级理论教案
http://blog.zh66.club/index.php/archives/320/
1+x 证书 Web 前端开发中级理论考试(试卷 1)
http://blog.zh66.club/index.php/archives/153/
1+x 证书 Web 前端开发中级理论考试(试卷 2 )
http://blog.zh66.club/index.php/archives/154
1+x 证书 Web 前端开发中级理论考试(试卷 3 )
http://blog.zh66.club/index.php/archives/170/
1+x 证书 Web 前端开发中级理论考试(试卷 4 )
http://blog.zh66.club/index.php/archives/191/
1+x 证书 Web 前端开发中级理论考试(试卷 5 )
http://blog.zh66.club/index.php/archives/297/
1+x 证书 Web 前端开发中级理论考试(试卷 6)
http://blog.zh66.club/index.php/archives/319/
1+x 证书 Web 前端开发中级理论考试(试卷 7 )
http://blog.zh66.club/index.php/archives/436/
1+x 证书 Web 前端开发中级理论考试(试卷 7 ) 答案
http://blog.zh66.club/index.php/archives/437/
1+x 证书 Web 前端开发中级理论考试(试卷 8 )** 含答案
http://blog.zh66.club/index.php/archives/438/
1+x 证书 Web 前端开发中级理论考试(试卷 9 )含 PDF 高清版
http://blog.zh66.club/index.php/archives/439/
1+x 证书 Web 前端开发初级级理论考试(试卷 2 )
http://blog.zh66.club/index.php/archives/176/
1+x 证书 Web 前端开发初级级理论考试(试卷 3 )
http://blog.zh66.club/index.php/archives/299/
1+x 证书 Web 前端开发初级级理论考试(试卷 4 )
http://blog.zh66.club/index.php/archives/315/
1+x 证书 Web 前端开发初级理论考试(试卷5 )
http://blog.zh66.club/index.php/archives/406/
1+x 证书 Web 前端开发初级实操考试(试卷 5 )
http://blog.zh66.club/index.php/archives/408/
1+x 证书 Web 前端开发初级理论考试(试卷 6 )
http://blog.zh66.club/index.php/archives/410/
1+x 证书 Web 前端开发初级实操考试(试卷 6 )
http://blog.zh66.club/index.php/archives/411/
1+x 证书 Web 前端开发初级理论考试(试卷 7 )
http://blog.zh66.club/index.php/archives/412/
1+x 证书 Web 前端开发初级理论考试(试卷 8 )
http://blog.zh66.club/index.php/archives/414/
1+x 证书 Web 前端开发初级实操考试(试卷 8 )
http://blog.zh66.club/index.php/archives/422/
1+x 证书 Web 前端开发初级理论考试(试卷 9 )
http://blog.zh66.club/index.php/archives/424/
1+x 证书 Web 前端开发初级理论考试(试卷 10 )
http://blog.zh66.club/index.php/archives/430/
1+x 证书 Web 前端开发初级实操考试(试卷 10 )
http://blog.zh66.club/index.php/archives/431/
1+x 证书 Web 前端开发初级实操考试(试卷11 )
http://blog.zh66.club/index.php/archives/433/
1+x 证书 Web 前端开发入训能力水平测试初级一卷
http://blog.zh66.club/index.php/archives/409/
《Web 前端开发》等级考试样题~以国家 “1+X” 职业技能证书为标准,厚溥推出 Web 前端开发人才培养方案
http://blog.zh66.club/index.php/archives/156/
pdf版查看链接六套完整版
http://blog.zh66.club/usr/uploads/2019/12/4294434490.pdf
http://blog.zh66.club/usr/uploads/2019/12/2430725541.pdf
http://blog.zh66.club/usr/uploads/2019/12/761774577.pdf
http://blog.zh66.club/usr/uploads/2019/12/77517732.pdf
http://blog.zh66.club/usr/uploads/2019/12/733177909.pdf
http://blog.zh66.club/usr/uploads/2019/12/3679037667.pdf

1111
余帅 2019-12-26 19:58