Web前端开发初级模拟测试卷(五)

官方QQ群

PDF版点击查看

共55道题 总分:200分

一、单选题共30题,60分

1.在弹性盒子中,以下不属于justify-content的值是()D

  • A flex-start
  • B center
  • C space-between
  • D end

2.alt和title属性的特点表述正确的是()B

  • A 不同的浏览器,表现一样
  • B alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字
  • C alt和title同时设置的时候,title作为图片的替代文字出现,alt是图片的解释文字
  • D 以上说法都不正确

3.分析下面的JavaScript代码段,输出的结果是() emp=new Array(4); emp[1]=1; emp[2]=2; document.write(emp.length); C

  • A 2
  • B 3
  • C 4
  • D 5

4.在JavaScript中,把字符串“789”转换为整型值789的正确方法是() C

  • Avar str="789"; var num=(int)str;
  • Bvar str="789";var num=str.parseInt(str);
  • Cvar str="789";var num=parseInt(str);
  • Dvar str="789";var num=Integer.parseInt(str);

5.下列选项关于标签默认样式说法正确的是() C

  • A标题标签只是默认加粗
  • B段落标签默认带有外边距和内边距
  • C无序列表默认带有外边距和内边距
  • Dinput无默认样式

6.JavaScript函数说法正确的是() B

  • A不可以传参
  • B可以接受参数
  • C没有返回类型
  • D没有return关键字

7.请问下面代码输出的是() var trees = ["aa","bb","cc","dd","apple"]; delete trees[3]; console.log(trees.length); A

  • A5
  • B4
  • C3
  • D以上都不对

8.在HTML中,CSS样式中文本属性的说法错误的是() D

  • Afont-weight用于设置字体的粗细
  • Bfont-family用于设置文本的字体类型
  • Ccolor用于设置文本的颜色
  • Dtext-align用于设置文本的字体形状

9.下面代码正确的结果是() var a = [0]; if ([0]) { console.log(a == true); } else { console.log("2"); } B

  • Atrue
  • Bfalse
  • C"2"
  • D报错

10.(“5.3” + 2.3 ) 的计算结果是() A

  • A7.6
  • B5.32.3
  • C5.32
  • D7.3

11.以下属于目标选择器的是() B

  • A:empty
  • B:target
  • C:nth-of-type()
  • Donly-child

12.关于html5说法错误的是() C

  • AHTML5新增了音频和视频标签
  • BHTML5只是对HTML4的一个简单升级
  • C所有主流浏览器都支持HTML5
  • DHTML5新增了离线缓存机制

13.给div盒子设置鼠标经过变圆角的属性是() C

  • Abox-sizing
  • Bbox-shadow
  • Cborder-radius
  • Dborder

14.下列哪个方法是对数组元素进行排序的() C

  • Aadd( )
  • Bjoin( )
  • Csort( )
  • Dlength( )

15.用jQuery,将服务端返回的JSON格式的字符串转为js对象,语法正确的是 A

  • A$.parseJSON(data)
  • B$.ParseJson(data)
  • C#.parseJSON(data)
  • D#.ParseJson(data)

16.以下关于HTML描述不正确的是() B

  • AHTML是描述网页的语言
  • BHTML是一种编程语言
  • CHTML是由标记标签组成的
  • DHTML是超文本标记语言

17.以下关于网页结构说法错误的是()D

  • AHTML文件是结构层
  • BCSS文件是表示层
  • CJS文件是行为层
  • DCSS文件是行为层

18.以下代码输出的结果是:() C

var length = 20; function fn() { console.log(this.length); } var obj = { length: 10, method: function(fn) { fn(); arguments[0](); } }; obj.method(fn, 1,"aa"); 
  • A20,10
  • B10,3
  • C20,3
  • D以上都不正确

19.关于边距的设置说法正确的是()。 D

  • Amargin:0 是设置内边距上下左右都为0;
  • Bmargin:20px 50px;是设置外边距左右为20px,上下为50px;
  • Cmargin:10px 20px 30px;是设置内边距上为10px,下为20px; 左为30px;
  • Dmargin:10px 20px 30px 40px;是设置外边距上为10px,右为20px,下为30px,左为40px

20.从下列选中中选出不同的一个? D

  • A<nav>
  • B<footer>
  • C<meta>
  • D<canvas>

21.以下不是HTML5新特性的是()A

  • A新的@font-face字体设置
  • B新的离线存储
  • C新的音频、视频API
  • D新的内容标签

22.以下不属于javascript中提供的常用数据类型的是() C

  • AUndefined
  • BNull
  • CConnection
  • DNumber

23.关于盒模型说法不正确的是() B

  • A盒模型由margin,border,padding,content四部分组成;
  • B标准盒模型是box-sizing:border-box;
  • CIE盒模型是box-sizing:border-box;
  • D标准盒模型是box-sizing:content-box;

24.JavaScript是运行在( )的脚本语言 D

  • A服务器端
  • B在服务器运行后,把结果返回到客户端
  • C在客户端运行后,把结果返回到服务端
  • D客户端

25.分析下面的JavaScript代码段,输出结果是() B

var str="I am a teacher"; a=str.charAt(9); document.write(a);
  • AI am a te
  • Ba
  • Cacher
  • De

26.在jQuery中,移除节点类名为"box"下的div元素的方法是() A

  • A$(".box div").remove();
  • B$(".box div").empty();
  • C$("div").innerhtml("");
  • D$("div").innerHTML = "";

27.在HTML中,通常要通过定位,Css属性中 ( )可以设置垂直叠放次序 C

  • Alist-style
  • Bpadding
  • Cz-index
  • DFloat

28.给以下代码中id名为con的元素设置样式正确的是() B

<div class="box"> <div class="main" id="con">祝您好运!</div> </div>
  • A.box>.main{font:16px;}
  • B.box .main{font:16px ‘微软雅黑’}
  • C#con{font-family:16px}
  • D.con{font:16px/32px ‘微软雅黑’}

29.实现背景图片不跟随鼠标滚动而滚动的属性是() A

  • Abackground-attachment:fixed;
  • BB.background-attachment:scroll;
  • Cbackground-origin: initial;
  • Dbackground-clip: initial;

30.下列选项关于jQuery中的淡入淡出动画效果描述错误的是() B

  • AfadeOut()方法是通过不透明度的变化来实现所匹配元素的淡出效果
  • BfadeOut()、fadeIn()、fadeToggle()的表示动画时长的参数只能为毫秒数
  • CfadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
  • DfadeOut()、fadeIn()可常用于制作淡入淡出的幻灯片效果

二、多选题共15题,30分

1.jquery ajax中都支持哪些返回类型 ABCD

  • Axml
  • Bhtml
  • Cjsonp
  • Djson

作答结果:正确

2.属于HTML5语法变化的是() ABCD

  • A标签不在区分大小写
  • B元素可以省略结束标签
  • C支持boolean值的属性
  • D允许属性值不适用引号

作答结果:正确

3.下列关于隐藏元素说法正确的是() AB

  • Adisplay: none;不为被隐藏的对象保留其物理空间;
  • Bvisibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明;
  • Cvisibility:hidden;产生reflow和repaint(回流与重绘);
  • Dvisibility:hidden;与display: none;两者没有本质上的区别;

4.在jQuery中,能够实现将div层隐藏的语句是( ) AD

  • A$("div").css("display","none")
  • B$("div").addClass ("display","none")
  • C$("div").show()
  • D$("div").hide()

5.以下关于javascript中DOM的说法正确的是() ACD

  • ADOM的全称为Document Object Model;
  • BBOM为文档对象模型;
  • CDOM的作用为可以对页面得内容进行增加删除替换;
  • DBOM为浏览器对象模型

6.下述有关border:none以及border:0的区别,描述错误的是()? BC

  • Aborder:0表示边框宽度为0
  • B当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0
  • C当定义边框时,仅设置边框宽度也可以达到显示的效果
  • Dborder:none表示边框样式无

7.关于Javascript中数组的说法中,正确的是() BCD

  • A数组的长度必须在创建时给定,之后便不能改变
  • B由于数组是对象,因此创建数组需要使用new运算符
  • C数组内元素的类型可以不同
  • D数组可以在声明的同时进行初始化

8.以下属于HTML5优势的是() ABCD

  • A解决跨平台问题
  • B部标签代替了原来的JavaScript
  • C更明确的语义支持
  • D增强了web应用程序和功能

9.以下属于行内块元素的是() AB

  • Aimg
  • Binput
  • Cspan
  • Ddiv

10.下列哪一个表达式返回为真() ACD

  • A!(3<=1)
  • B(4>=4)&&(5<=2)
  • C("a"=="a")&&("c"!="d")
  • D(2<3)||(3<2)

11.以下推荐使用清除浮动的方式有哪几种() ABD

  • A在浮动元素末尾添加一个空的标签例如

    <div style="clear:both"></div>
  • B通过设置父元素overflow值为hidden
  • C父元素也设置浮动
  • D给父元素添加clearfix类

12.属于HTML5新增的标签是() ABCD

  • Afigure
  • Bhgroup
  • Cdetails
  • Dprogress

13.以下是CSS3新增伪类的是() ABCD

  • A:nth-of-type(n)
  • B:empty
  • C:root
  • D:not()

14.关于不同内核的浏览器,对CSS的解释正确的有? CD

  • AFireFox的div的内嵌div可以把父级的高度撑大,而IE6.0不可以,要自己设置高度
  • B当设置为三列布局时,FireFox0的float宽度不能达到100%,而IE6.可以。当设置为两列布局时,两种浏览器都可以
  • C火狐浏览器中,非float的div前面有同一父级的float的div,此div若有背景图,要使用clear:both,才能显示背景图,而IE6.0中不用使用clear:both
  • D在[text-decoration:underline]的属性下,IE6.0显示的下划线会比FireFox低一点。在FireFox中,部分笔画会在下划线的下面1个象素左右

15.box-sizing的值有哪些() BC

  • Anone
  • Bborder-box
  • Ccontent-box
  • Dpadding-box

三、判断题共5题,10分

1."12">"2" 错

  • A
  • B

2.div占用的位置是一行,一行可显示多个span 对

  • A
  • B

3.DOM中,已知一个节点,并且知道他们得位置关系,就可以操作任何一个节点 对

  • A
  • B

4.定义列表的应该这样写 错

<dl><dt><dd></dd></dt></dl>
  • A
  • B

5.在HTML中,div+css可以用作排版布局,表格的也可以。 对

  • A
  • B

四、客观填空题共5题,100分

1.阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(10)代码。
【说明】

这个某项目中的其中一个活动页,应用HTML5和css3技术完成页面的布局。项目包含主页index.html、style.css和img,js文件夹。要求页面的文字随着屏幕的大小变化而变化,根据效果图和已有的代码补全(1)-(10)的代码
【效果图】

【素材】

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/21/6370994610985182637883210.zip

【代码:主页index.html】

<!DOCTYPE html>
<html>
<head>
    <title>花花个人赛</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=
1
,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/resetFont.js"></script>
</head>
<body>
<div class="wrap">
<!--头部结构标签-->
    
2

        <h2><span></span>花花个人赛</h2>
    <header></header>
    <section class="banner">
        <img src="img/banner.jpg">
    </section>
    <section class="main">
        <div class="prize">
            <p>我的奖品</p>
            <span>3</span>
        </div>
        <div class="description">
            所有电子券请在<span>10月31日</span>前使用,逾期作废
        </div>
        <div class="nameList">
            <h2><span>获奖名单</span></h2>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>中奖用户</th>
                    <th>RP排名</th>
                    <th>具体奖品</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>1</td>
                    <td>一年学费+<br><span>特别礼品</span></td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>23</td>
                    <td>4个月学费+<br><span>特别礼品</span></td>
                </tr>
                <tr>
                    <td>赵六</td>
                    <td>35</td>
                    <td>2个月学费+<br><span>特别礼品</span></td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>38</td>
                    <td>100元红包+<br><span>特别礼品</span></td>
                </tr>
                <tr>
                    <td>孙玖</td>
                    <td>42</td>
                    <td>50元红包+<br><span>特别礼品</span></td>
                </tr>
                <tr>
                    <td>刘一</td>
                    <td>48</td>
                    <td>30元红包+<br><span>特别礼品</span></td>
                </tr>
            </table>
        </div>
    </section>
    <footer></footer>
</div>
</body>
</html>

【代码:style.css】

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
    margin:0;
    padding:0;
}
img{
    display: block;
}
.wrap{
    
3
;/*设置最大宽度720px*/
    margin:0 auto;
    background:url("../img/bottomImg.jpg") no-repeat bottom/100% #AAEE99;
    padding-bottom:4rem;
}
header{
    width: 100%;
    height: 2rem;
    background-color: #46BC41;
}
header h2{
    position:relative;
    margin:0 .8rem;
    line-height: 2rem;
    font-size: .7rem;
    font-weight: normal;
    padding-left:1rem;
    color:#fff;
}
header h2 span{
    position:absolute;
    left:0;
    top:0.1rem;
    width: 0.8rem;
    height: 2rem;
    background: url("../img/back.jpg") no-repeat center/100%;
}
.banner{
    width: 100%;
}
.banner img{
    width: 100%;
}
.main{
    margin:0 .8rem;
    padding-top:0.7rem;
}
.main .prize{
    position: relative;
    width: 100%;
    height: 2rem;
    margin-bottom:0.33rem;
    line-height: 2rem;
    font-size: 0.5rem;
    background-color: #CCF4C2;
    
4
;/*设置5px的圆角*/
    color:#2C6C22;
}
.main .prize p{
    padding:0 2rem;
}
.main .prize span{
    display: block;
    position: absolute;
    top:50%;
    right: 2.5rem;
    color:#AB431C;
    font-size: .7rem;
    transform: translateY(-50%);
}
.main .prize:after{
    content: "";
    display: block;
    position: absolute;
    top:50%;
    right: 2rem;
    width: 0.3rem;
    height: 0.3rem;
    border-right:2px solid #2C6C22;
    border-top:2px solid #2C6C22;
    
5
;/*设置垂直位移一半,并旋转45deg,*/
    
6
;/*设置层级为2*/
}
.main .description{
    width: 100%;
    background-color: #fff;
    border:3px dashed #F8E42D;
    padding:.6rem 2rem;
    margin-bottom:0.33rem;
    line-height: 0.8rem;
    font-size: 0.6rem;
    color:#0E1B23;
    
7
;/*设置盒子大小始终为100%*/
}
.main .description span{
    color:#C83F2D;
}
.main .nameList{
    margin-bottom:0.33rem;
}
.main .nameList h2{
    position: relative;
    line-height: 2rem;
    height: 2rem;
    text-align: center;
    font-weight: normal;
    font-size: 0.7rem;
    color:#1D6911;
}
.main .nameList h2 span{
    position: relative;
    background-color:#AAEE99; 
    padding:0 10px;
    z-index: 1;
}
.main .nameList h2:after{
    content:"";
    display: block;
    position: absolute;
    top:50%;
    width: 100%;
    height: 1px;
    background-color: #8CD07B;
    z-index: 0;
}
.main .nameList table{
    width: 100%;
    background-color: #C4F4B8;
    text-align: center;
    font-size: .6rem;
    
8
;/*设置边框重叠*/
    color:#09331F;
}
.main .nameList table tr td{
    border:1px solid #AEDF9E;
}
.main .nameList table tr td span{
    color:#666;
}
/*设置td的第三列*/
.main .nameList table tr td:
9
{
    padding:.5rem .6rem;
    text-align: left;
}
.main .nameList table th{
    width: 33.33%;
    height: 2rem;
    background-color: #95E455;
    color:#fff;
    font-size: .7rem;
    font-weight: normal;
}

【代码:resetFont.js】

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
//在以下横线中填写,如何宽度大于720那就按720执行,否则按实际宽
    var clientWidth =
10
;
    if (!clientWidth) return;
    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };


    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

解析:

打开解析

(1)device-width  

(2)<header></header>  

(3)max-width: 720px

(4)border-radius: 5px

(5)transform: translateY(-50%) rotate(45deg)

(6)z-index:2

(7)box-sizing: border-box

(8)border-collapse:collapse

(9)nth-child(3)

(10)docEl.clientWidth>720?720:docEl.clientWidth

2.阅读下列说明、效果图和代码,完成一个动画,主要应用HTML和css3完成。
【说明】

在某项目中,项目中的文件包含index.html、style.css和img文件夹。要求鼠标经过盒子顶部半圆区域块从顶部慢慢滑下来,鼠标经过盒子人物图片是渐渐变小,鼠标经过盒子底部玫红色的区域块从底部慢慢升上来。请根据现有的代码和效果图补全代码(1)-(7)
【效果图】
如图所示。

【素材】

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/21/6370995403720987644903358.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="transition.css">
</head>
<body>
<div class="box clear">
    <div class="info">
        <div class="top"></div>


        <div class="thumb">
            <img src="img/img4.jpg">
        </div>
        <h1>Lucy</h1>
        <p>web前端</p>


        <div class="bottom"></div>
    </div>
    <div class="info">
        <div class="top"></div>


        <div class="thumb">
            <img src="img/img4.jpg">
        </div>
        <h1>Lucy</h1>
        <p>web前端</p>


        <div class="bottom"></div>
    </div>
    <div class="info">
        <div class="top"></div>


        <div class="thumb">
            <img src="img/img4.jpg">
        </div>
        <h1>Lucy</h1>
        <p>web前端</p>


        <div class="bottom"></div>
    </div>
    <div class="info">
        <div class="top"></div>


        <div class="thumb">
            <img src="img/img4.jpg">
        </div>
        <h1>Lucy</h1>
        <p>web前端</p>


        <div class="bottom"></div>
    </div>
     
</div>
<div class="main"></div>
</body>
</html>

【transition.css】

body,h1,p{
    margin:0;
}
.box{
    width: 800px;
    margin:30px auto;
   
1
;/*设置弹性盒子*/
   
2
;/*设置两端对齐*/
}


.box .info{
    position: relative;
    margin:10px;
    width:180px;
    height:280px;
    border:1px solid #ccc;
    text-align: center;
    font-size: 16px;
    overflow:hidden;
    box-sizing: border-box;
}
.box .info .thumb{
    width:120px;
    height:120px;
    border:1px solid #ccc;
    border-radius:50%;
    margin:20px auto;
    overflow:hidden;
    background-color: #f94a69;
}
.box .info img{
    width:100%;
    height:100%;
    border-radius:50%;
   
3
;/*过渡时间1s*/
}
.box .info h1{
    color:#333;
    line-height:50px;/*设置行高*/
}
.box .info p{
    color:#555;
}
.box .info .bottom{
    position:absolute;/*绝对定位*/
   
4
;/*将底部元素放到盒子外边31px*/
    width:100%;
    height:30px;
    background-color: #fd748c;/*背景颜色*/
    transition:1s;
}
.box .info:hover .bottom{
    bottom:0;
}
.box .info .top{
    position:absolute;
    top:-91px;
    z-index: -1;
    width:100%;
    height:90px;
 
5
/*设置半圆*/
    background-color:#fd748c;
    transition:1s;
}
.box .info:hover .top{
    top:0;
}
.box .info:hover img{
   
6
;/*缩放*/
   
7
: 0 0 0 15px #fff;/*盒子投影*/
    
}
.box .info:hover{
    box-shadow:0 0 15px #000;
}

解析:

打开解析

(1)display: flex

(2)justify-content: space-between

(3)transition:1s

(4)bottom:-31px

(5)border-radius:0 0 90px 90px

(6)transform:scale(0.65)

(7)box-shadow

3.阅读下列说明,用javascript编写程序。填写(1)至(10)代码。
【说明】

在某项目中,在首页需要实现左右轮播的效果图,要求用javascript完成,根据已经提供的代码,补全(1)-(10)位置上的代码。
效果图

【素材】

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/21/6370995298076946061122395.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="css/style.css">
</head>
<body>
<div class="header"></div>
<div class="center">
    <div class="box">
        <div class="thumb">
            <img src="img/lianyiqunSmall1.jpg">
            <div class="move"></div>
        </div>
        <div class="scale">
            <img src="img/lianyiqunBig1.jpg">
        </div>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>

【style.css】

body{
    margin: 0;
    padding: 0;
}
img{
    display: block;
}
.header{
    height:100px;
}
.center{
    width:800px;
    margin:0 auto;
}
.box{
    position:relative;
    width:400px;
}
.box .thumb{
    position:relative;
    width:400px;
    height:400px;
}
.box .thumb img{
    width:100%;
    height:100%;
}
.box .thumb .move{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    width:200px;
    height:200px;
    background-color: rgba(0,0,0,0.4);
}
.box .scale{
    display:none;
    position:absolute;
    right:-420px;
    top:0;
    width:400px;
    height:400px;
    border:1px solid #ccc;
    overflow:hidden;
}
.box .scale img{
    position:absolute;
    left:0;
    top:0;
}
.box .thumb:hover .move{
    display:block;
}
.box .thumb:hover+.scale{
    display:block;
}

【index.js】

var zmFdj=function(){
    var thumbElem=document.getElementsByClassName("thumb")[0],
    // 获取缩略图距离页面左边的距离
        thumbPosX=Math.round(thumbElem.getBoundingClientRect().left+document.documentElement.scrollLeft),
    // 获取缩略图距离页面顶部的距离
        thumbPosY=Math.round(thumbElem.getBoundingClientRect().top+document.documentElement.scrollTop);
    // 获取移动的元素
    var moveElem=document.getElementsByClassName("move")[0];


    thumbElem.onmousemove=function(e){
        // 获取移动的元素的宽和高
        var moveElemW=
1
;
        var moveElemH=
2
;
        // 计算移动元素距离缩略图左边和顶部的距离
        var x=
3
;
        var y=
4
;
        // 设置鼠标指针在移动元素的中间位置
        moveElem.style.left=
5
;
        moveElem.style.top=
6
;
        // 移动元素不能超出区域
        if(
7
){
            moveElem.style.left=0;
        }else if(parseInt(moveElem.style.left)>(thumbElem.offsetWidth-moveElemW)){
            moveElem.style.left=thumbElem.offsetWidth-moveElemW+"px";
        }
        if(
8
){
            moveElem.style.top=0;
        }else if(parseInt(moveElem.style.top)>(thumbElem.offsetHeight-moveElemH)){
            moveElem.style.top=thumbElem.offsetHeight-moveElemH+"px";
        }
        // 放大的倍数
        var sca=thumbElem.offsetWidth/moveElemW;
        var scaleEle=document.getElementsByClassName("scale")[0];
        // 放大图片的位置
        var img=scaleEle.getElementsByTagName("img")[0];
        img.style.left=
9
;
        img.style.top=
10
;
    }
}
zmFdj();

解析:

打开解析

moveElem.offsetWidth

moveElem.offsetWidth

e.pageX-thumbPosX

e.pageY-thumbPosY

x-moveElemW/2+"px"

y-moveElemH/2+"px"

parseInt(moveElem.style.left)<0

parseInt(moveElem.style.top)<0

-(sca*parseInt(moveElem.style.left))+"px"

-(sca*parseInt(moveElem.style.top))+"px"

4.阅读下列说明、效果图和HTML代码,进行静态网页开发,填写(1)至(20)代码。
【说明】

这是改革进展与成效管理平台,用html+css完成。

项目名称为“改革进展与成效管理平台”,包含首页index.html、css文件夹、img文件夹,其中,css文件夹包含normalize.css文件;img文件夹包含用到的图片。

请根据效果图和已提供的代码,补全(1)-(20)中的代码。
【效果图】
index.html在PC端效果如图所示。

【素材】

素材.zip http://www.x-academy.net/UploadFile/UploadFile/2019/11/21/6370994342757788133238896.zip

【代码:首页index.html】

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8 ">
        <meta name="Author" content="网页作者" />
        <meta name="Copyright" content="网站版权" />
        <meta name="keywords" content="网站关键字" />
        <meta name="description" content="网站描述" />
        <link rel="Shortcut Icon" href="网站.ico图标路径" />
        <title>改革进展与成效管理平台</title>
        <link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
        <link rel="stylesheet" href="css/normalize.css">
<!--请在以下横线中引入index.css样式 -->
        
1

    </head>
    <body>
        <div class="header">
            <div class="top">
                <div class="wrap clear">
                    <div class="logo fl">
                        <div class="logoimg fl">
<!-- 请在以下横线中插入/logo.png图片-->
                            
2

                        </div>
                        <div class="name fl">
                            <h1>改革进展与成效管理平台<span></span></h1>
                            <p>Datong Comprehensive Deepening Reform Progress And Effectiveness Management Platform</p>
                        </div>
                    </div>
                    <dov class="opt fr">
                        <div class="search fl">
<!--请在以下横线中填写form标签及提交属性和请求方式属性 -->
                            
3

                                <input class="fl" type="text">
                                <div class="searchBtn fl"><a href="javascript:;"></a></div>
                            
                          <form action="" method=""></from>
                        </div>
                        <div class="admin fl"><a href="javascript:;">工作平台</a></div>
                    </dov>
                </div>
            </div>
            <div class="nav">
                <div class="wrap">
                    <ul>
                        <li class="cur"><a href="index.html">首页</a></li>
                        <li>
                            <a href="resultlist.html">成果展示</a>
                            <span></span>
                            <div class="tri"></div>
                        </li>
                        <li>
                            <a href="bushu.html">改革部署</a>
                            <span></span>
                            <div class="tri"></div>
                        </li>
                        <li>
                            <a href="">改革动态</a>
                            <span></span>
                            <div class="tri"></div>
                        </li>
                        <li><a href="">督查动态</a></li>
                        <li class="block">
                            <a href="">区县党建</a>
                            <span></span>
                            <div class="tri"></div>
                        </li>
                        <li><a href="">信息刊物</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="banner">
            <img src="img/banner.jpg" >
        </div>
        
        <div class="footer">
            <div class="wrap clear">
                <div class="left fl">
                    <div class="contact">联系我们</div>
                    <div class="list">
                        <p><span class="iconfont"></span>+86 15326987452 15745698547</p>
                        <p><span class="iconfont"></span>+86 15326987452</p>
                        <p><span class="iconfont"></span><span>15326987452@163.com</span>5326987452@163.com</p>
                        <p><span class="iconfont"></span>山西省太原市小店区***街道***路458号***楼</p>
                    </div>
                </div>
                <div class="right fr">
                    <div class="footNav">
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li class="des">|</li>
                            <li><a href="bushu.html">决策部署</a></li>
                            <li class="des">|</li>
                            <li><a href="">主题教育</a></li>
                            <li class="des">|</li>
                            <li><a href="">政策汇编</a></li>
                            <li class="des">|</li>
                            <li><a href="resultlist.html">改革成果</a></li>
                        </ul>
                    </div>
                    <div class="others">
                        <a href=""><span class="iconfont icon-weixin"></span></a>
                        <a href=""><span class="iconfont icon-qq"></span></a>
                        <a href=""><span class="iconfont icon-qq"></span></a>
                    </div>
<!--请在以下横线出填写“版权”符号-->
                    <div class="copyright">Copyright
4
2019版权所有 Powered by TGTYv6.17.4©20163-2018</div>
                </div>
            </div>
        </div>
    </body>
</html>



【代码:CSS文件style.css】

body,h1,h2,h3,h4,h4,h6,p,ul,ol,dl,dd,input,textarea{
    
5
_;/*清除外边距*/
    
6
_;/*清除内边距*/
}
body{
    
7
;/*设置字体为微软雅黑*/
    font-size: 16px;
    background-color: #fff;
    overflow-x: hidden;
}
ul,ol,li{
    
8
;/*清除列表样式*/
}
img{
    
9
;/*清除图片下默认的小间隙*/
    border: 0;
}
a{
    margin: 0;
    padding: 0;
    border:0;
    
10
_;/*清除默认下划线*/
    color: inherit;
    background: transparent;
    cursor: pointer;
}
input{
    border: 0;
    outline: none;
}
.clear:after{
/*清除浮动*/
    display:
11
;
    content:
12
;
    clear:
13
;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

14
{
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/iconfont.woff2') format('woff2'),
      url('../fonts/iconfont.woff') format('woff'),
      url('../fonts/iconfont.ttf') format('truetype'),
      url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*公共样式--start*/
.wrap{
    width: 1200px;
    
15
;/*设置水平居中*/
}
/*顶部导航--start*/
.header{
    width: 100%;
    height: 178px;
}
.header .top{
    width: 100%;
    height: 126px;
    background-color: #0c549e;
}
.header .top .logo{
    padding-top: 40px;
}
.header .top .logo .name{
    padding-top: 6px;
    padding-left: 12px;
}
.header .top .logo .name h1{
    height: 28px;
    margin-bottom: 6px;
    font-weight:bold;
    font-size:24px;
    color:#fff;
    text-align: justify;
}
.header .top .logo .name h1 span{
    display: inline-block;
    padding-left: 100%;
}
.header .top .logo .name p{
    font-weight:bold;
    font-size:10px;
    word-spacing:1px;
    color:#fff;
}
.header .top .opt{
    padding-top: 50px;
}
.header .top .opt .search{
    height: 29px;
    margin-right: 39px;
    
16
;/*设置边框 边框宽1px 实心线 颜色为#aeb7be*/
}
.header .top .opt .search form{
    height: 29px;
}
.header .top .opt .search form input{
    display: block;
    width: 245px;
    height: 100%;
}
.header .top .opt .search form .searchBtn{
    width: 30px;
    height: 29px;
    
17
;/*设置背景图片为 search.png,背景图片不重复,而且居中,背景颜色为#0c549e*/
}
.header .top .opt .search form .searchBtn a{
    display: block;
    width: 100%;
    height: 100%;
}
.header .top .opt .admin{
    height: 31px;
    padding-left: 30px;
    line-height: 31px;
    color: #fff;

18
;/*设置背景图片为 admin.png,背景图片不重复,背景位置左右是0,距离上边是4px*/
}
.header .top .opt .admin a{
    display: block;
    width: 100%;
    height: 100%;
}
.header .nav{
    width: 100%;
    height: 53px;
}
.header .nav .wrap{
    box-shadow: 0 1px 6px #ccc;
}
.header .nav .wrap>ul{
    height: 53px;
    margin-left: -10px;
}
.header .nav .wrap>ul>li{
    position: relative;
    z-index: 99;
    float: left;
    width: 140px;
    height: 100%;
    margin-left: 10px;
    line-height: 53px;
    color: #636a72;
    text-align: center;
    
19
;/*将所有属性0.3s的过渡*/
}
.header .nav .wrap>ul>li.cur{
    color: #fff;
    background-color: #0c54a0;
}
.header .nav .wrap>ul>li.cur span{
    border-top-color: #fff;
}
.header .nav .wrap>ul>li:hover{
    color: #fff;
    background-color: #0c54a0;
}
.header .nav .wrap>ul>li span{
    display: inline-block;
    border: 5px solid transparent;
    border-top-color: #636a72;
}
.header .nav .wrap>ul>li:hover span{
    border-top-color: #fff;
}
.header .nav ul li .subNav{
    display: none;
    position: absolute;
    left: 18px;
    top: 54px;
    width: 86px;
    border-radius: 3px;
    background-color: #fff;
}
.header .nav ul li .subNav ul{
    width: 100%;
}
.header .nav ul li .subNav ul li{
    width: 100%;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
}
.header .nav ul li.block .subNav{
    left: 0;
}
.header .nav ul li.block .subNav ul li{
    width: 86px;
    float: left;
}
.header .nav ul li.block .subNav{
    width: 172px;
}
.header .nav ul li .subNav ul li:hover{
    background-color: #e7e7e7;
    color: #333;
}
.header .nav ul li .tri{
    display: none;
    position: absolute;
    left: 54px;
    top: 40px;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}
.header .nav .wrap>ul>li:hover .subNav{
    display: block;
    color: #333;
}
.header .nav .wrap>ul>li:hover .tri{
    display: block;
}
/*顶部导航--end*/
/*位置追踪*/
.main .pos{
    margin-top: 26px;
    margin-bottom: 16px;
}
.main .pos ul li{
    float: left;
    font-size: 12px;
    color: #84878c;
}
.main .pos ul li:hover a{
    color: #333;
}
.main .pos ul li.mid{
    margin: 0 10px;
}
/*焦点图--start*/
.banner{
    position: relative;
    width: 100%;
    height: 482px;
    overflow: hidden;
}
.banner img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1920px;
    
20
;/*用transform将元素居中*/
}
/*焦点图--end*/
/*底部*/
.footer{
    width: 100%;
    height: 280px;
    background-color: #15233d;
}
.footer .left{
    position: relative;
    padding-top: 88px;
}
.footer .left .contact{
    position: absolute;
    left: 0;
    top: -32px;
    width: 234px;
    height: 60px;
    padding-left: 66px;
    font-size: 22px;
    line-height: 60px;
    color: #fff;
    background-color: #0c54a0;
}
.footer .left .list p{
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    color: #fff;
}
.footer .left .list span{
    margin-right: 18px;
}
.footer .right{
    padding-top: 88px;
}
.footer .right .footNav{
    margin-bottom: 42px;
    padding-left: 60px;
}
.footer .right .footNav ul{
    height: 30px;
}
.footer .right .footNav ul li{
    float: left;
    height: 100%;
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
.footer .right .footNav ul li.des{
    margin: 0 18px;
    font-size: 14px;
    color: #737c8d;
}
.footer .right .footNav ul li:hover{
    color: #737c8d;
}
.footer .right .others{
    margin-bottom: 32px;
    padding-left: 316px;
    font-size: 0;
}
.footer .right .others span{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    border-radius: 15px;
    background-color: #fff;
}
.footer .right .others .iconfont{
    font-size: 30px;
    color: #444f63;
}
.footer .right .copyright{
    font-size: 14px;
    color: #fff;
}
打开解析

(1)<link rel="stylesheet" href="css/index.css">

(2)<img src="img/logo.png" >

(3)<form action="" method=""></from>

(4)©

(5)margin:0

(6)padding:0

(7)font-family: "微软雅黑"

(8)list-style: none

(9)display:block

(10)text-decoration: none

(11)block

(12)””

(13)both

(14)@font-face

(15)margin: 0 auto

(16)border:1px solid #aeb7be

(17)background: #0c549e url(../img/search.png) no-repeat center

(18)background: url(../img/admin.png) no-repeat 0 4px

(19)transition: all .3s

(20)transform: translate(-50%,-50%)

5.阅读下列说明、效果图和代码,用jquery完成指定功能。
【说明】

在购物模块中,需要加入评价功能,要求用jquery完成此功能,要求鼠标经过星星点亮并且文字发生变化。请根据现有的代码和效果图补全代码(1)-(8)
【效果图】
如图所示。

【素材】

素材.zip http://www.x-academy.net/UploadFile/UploadFile/2019/11/21/6370995369397431219450674.zip

【index.html】
<!DOCTYPE html>
<html>
<head>
    <title>星星评分</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
<!--引入jquery-->
    
1

</head>
<body>
<div class="box clear">
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="txt">非常好</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
【style.css】
body{
    margin: 0;
    padding:0;
}
.clear:after{
    content:"";
    display: block;
    clear:both;
}
.box{
    margin:30px; 
}
.box .list{
    float:left;
    position: relative;
    margin:0 5px;
    width: 44px;
    height: 42px;
}
.box .list .star1{
    position: absolute;
    left:0;
    top:0;
    width: 44px;
    height: 42px;
    background: url("../img/star1.png") no-repeat center;
    z-index: 0;
}
.box .list .star{
    position: absolute;
    left:0;
    top:0;
    width: 44px;
    height: 42px;
    background: url("../img/star.png") no-repeat center;
}
.box .txt{
    float:left;
    width: 100px;
    margin-left:20px;
    line-height: 42px;
}
【index.js】
$(function(){
//定义一个arr数组,值为:"非常差",'差',"一般","满意","非常满意"
    var arr=
2
;
//鼠标经过li
    
3
_(function(){
        $(this).
4
.find(".star1").css(
5
);
        $(this).find(".star1").css("z-index",1);
        $(this).)
6
.find(".star1").css(
7
);
        $(".txt").text(
8
);
    })
})
打开解析

(1)<script src="js/jquery.min.js"></script>

(2)["非常差",'差',"一般","满意","非常满意"]

(3)$(".box .list").hover

(4)prevAll()

(5)"z-index",1

(6)nextAll()

(7)"z-index",0

(8)arr[$(this).index()]

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/412/

1+x 证书 Web 前端开发初级理论考试(试卷 8 )http://blog.zh66.club/index.php/archives/414/

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/

《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