本文编写于 197 天前,最后修改于 138 天前,其中某些信息可能已经过时。

1+x 证书 Web 前端开发初级实操考试(试卷12)

官方QQ群

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端效果如图所示。

【素材】

素材.zip

【代码:首页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
  1. 阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码。
    【说明】

这个某项目中的其中一部分,应用HTML5和css3技术完成页面的布局。项目包含主页index.html、style.css和img。要求鼠标经过翻转出现遮罩层,根据效果图和已有的代码补全(1)-(10)的代码
【效果图】

【素材】

素材.zip
【代码:主页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
  1. 阅读下列说明、效果图和代码,用jquery完成指定功能。
    【说明】

先要完成一个通讯录,在需要添加人员的时候,点击“添加行”,当点击删除的时候,序号需要重新排序。同时为了提高用户体验,需要用js实现隔行换色。请根据现有的代码和效果图补全代码(1)-(10)
【效果图】

【素材】

素材.zip

【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)位置上的代码。

效果图

【素材】

素材.zip
【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)
【效果图】


【素材】

素材.zip
【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