Web前端开发初级 样题⼆答案（理论+实操）

2019年下半年 Web前端开发初级 理论考试 （考试时间9:00-11:00 共120分钟） 1. 本试卷共3道⼤题，满分100分。 2. 请在指定位置作答。

⼀、单选题（每⼩题2分，共30⼩题，共60分）

1. 在html中，下列哪些元素不是双标签元素的是（C）：

A、title B、html C、img D、p

2. 在html中，图⽚的下⽅有缝隙，去除这个缝隙的⽅法是（D）

： A、设置图⽚的border:0 B、设置图⽚的border:none C、设置图⽚的font-size:0 D、设置display:block

3. 以下说法错误的是（A）：

A、html是编程语⾔ B、html是描述⽹页的语⾔ C、html是超⽂本标记语⾔ D、html⽂件的扩展名可以是.html,也可以是.htm

4. 在表单中，实现输⼊的数字只显⽰⼩圆点的type类型是（B）： A、text B、password C、radio D、checkbox

5. 在css中，下列属于类选择器的是（B）： A、#box B、.box C、div>p D、div

6. 由于各个浏览器的内核不同，所以会⽤符号让浏览器识别，下列只有IE6才识别的符号是（B）： A、* B、_ C、*+ D、*:

7. 以下关于position的值说法正确的是（D）： A、position:absolute是绝对定位，占据原有空间 B、position:fixed是绝对定位，占据原有空间 C、position:relative是相对定位，是相对于⾃⾝位置移动，但是不占据原有空间 D、position:relative是相对定位，是相对于⾃⾝位置移动，但是占据原有空间

8. 让⿏标经过div元素后，元素放⼤2倍，下列代码正确是（A）： A、div:hover{transform:scale(2)} B、div:hover{transform:skey(2)} C、div:hover{transform:tansition(2)} D、div:hover{transform:rotale(2)}

9. 让⼀个类名为“con”元素的右上⾓和左下⾓显⽰10px的圆⾓，以下书写正确的是（B）： A、.con{border-radius:10px 0} B、.con{border-radius:0 10px 0 10px} C、.con{border-radius:10px 10px 0 0} D、.con{border-radius:0px 0px 10px 10px}

10. 在css3中，⽤来定义过渡动画的属性是（C）： A、transform B、keyframes C、transition D、@font-face

11. 关于css书写规范说法正确的是（）： A、在需要写0.5的时候可以省略0，直接写.5 B、margin后必须跟4个值 C、z-index在任何情况下都可以使⽤ D、以上说法都不正确 

12. 下⾯哪个符号是群组选择符（D）： A、> B、+ C、空格 D、,

13. 实现下拉框中多选的属性是（C）： A、pattern B、maxlength C、multiple D、autofocus

14. 在javascript中,关于运算符优先级正确的是（B）： A、算术运算符>逻辑运算符>⽐较运算符>赋值运算符 B、算术运算符>⽐较运算符>逻辑运算符>赋值运算符 C、⽐较运算符>算术运算符>逻辑运算符>赋值运算符 D、⽐较运算符>逻辑运算符>算术运算符>赋值运算符

15. 在javascript中，不属于⼀元运算符的是（C）： A、+ B、++ C、* D、--

16. 在javascript中,关于+的⽤法说法错误的是（D）： A、+可以⽤来做加法运算 B、+可以⽤来链接字符串 C、+是⽴即执⾏函数的符号 D、+号不能将字符串转数值

17. 在javascript中,下列表达式为真的是（A）： A、(3>2)&&true B、 ![]||("2">12) C、[0]==true D、Boolean("")

18. 在javascript中，下列代码执⾏的结果是（C）： var a; var b = a - 0; if (b == b) { console.log(b * 2 + "2" - 0 + 4); } else { console.log(!b * 2 + "2" - 0 + 8); } A、12 B、NaN C、30 D、报错

19. 在javascript中，以下代码执⾏的结果是（A）： function test1(){ return console.log(1) } function test2(){ return 0 } console.log(test1()); console.log(test2()); A、undefined,0 B、1,0 C、null,0 D、报错

20. 在html中嵌⼊以下代码，在控制台输出的是（B）： A、报错，报错 B、报错，8 C、报错，不输出任何内容 D、a,8

21. 在javascript中，var arr=[3,45,8,9,12]以下执⾏错误的是（C）： A、执⾏arr.push(4)后，arr的值为[3,45,8,9,12,4] B、执⾏arr.pop()返回12 C、执⾏arr.splice(1,2,"aa")后，arr的值为[3,"aa",8,9,12] D、执⾏arr.shift()后，arr的值为[45,8,9,12] 22. 在javascript中，⽇期对象⾥获取毫秒数的⽅法是（C）：

22. 在javascript中，⽇期对象⾥获取毫秒数的⽅法是（C）： A、getDay() B、getDate() C、getTime() D、getFullYear()

23. 在javascript中,数学对象说法正确的是（B）： A、Math.random()返回0-1之间的数，并包括0和1 B、Math.max()返回最⼤值 C、Math.ceil()是下取整 D、Math.round()是上取整

24. 在javascript中,阻⽌冒泡事件的⽅法是（C）： A、event.returnValue = false; B、event.preventDefault() C、event.stopPropagation() D、以上都不正确

25. 在javascript中,返回上⼀页的代码正确的是（A）： A、history.back() B、history.go(1) C、history.go(0) D、history.forward()

26. 在jquery中，下⾯哪⼀个是⽤来给指定元素末尾追加元素的（B）： A、inserAfter() B、append() C、appendTo() D、以上都不正确

27. 在jquery中，获取表单元素的值是⽅法是（C） A、text() B、html() C、val() D、value()

28. 在jquery的遍历中，要找到⼀个表格的指定⾏数的元素，⽤下⾯哪个⽅法（B）？ A、text() B、eq() C、get() D、contents()

29. 在jquery中想要实现通过http get请求载⼊信息功能的是（D）： A、$.ajax() B、$.post() C、load() D、$.get()

30. 在jquery中，选择id为box的元素，以下操作正确的是（B）： A、$(".box") B、$("#box") C、$("box") D、$(#box)

⼆、多选题（每⼩题2分，共15⼩题，共30分）

1. html⽂件扩展名可以是以下哪⼏种（BD）？

A、.php B、.html C、.asp D、.htm

2. 下列属于单标签的是（ABC）：

A、link B、img C、input D、form

3. 关于⽂件命名正确的是（CD）：

A、1list.html B、product&show.html C、product-list.html D、product_show.html

4. 给div元素设置background:url("../img/icon-sprite.png") no-repeat -420px -277px;以下说法正确的是（ABC）

A、div元素有背景图⽚，且背景图⽚放在img⽂件夹中 B、img⽂件夹在当前⽂件的上⼀层⽂件夹中 C、背景图⽚不重复 D、背景图⽚的位置是向上移动了420px，向右移动了277px

5. 关于link和import说法错误的是（CD）：

A、@import是 CSS 提供的语法规则，只有导⼊样式表的作⽤ B、link是HTML提供的标签，不仅可以加载 CSS ⽂件，还可以定义 RSS、rel 连接属性等 C、加载页⾯时，link标签引⼊的 CSS 在页⾯加载完才被加载 D、@import引⼊的 CSS 在加载结构的时候同时被加载。

6. css样式中的选择符说法正确的是（ABD）：

A、div>p 是选择div元素的⼦元素p标签 B、div p是选择div元素的所有后代元素 C、div+ul是选择div的所有兄弟元素ul C、div+ul是选择div的所有兄弟元素ul D、div~ul是选择div元素后⾯的所有兄弟元素ul

7. 需要设置div元素在可视窗⼝的右下⾓显⽰，需要定义哪些属性（BCD）

A、position:absolute B、position:fixed C、right:0 D、bottom:0

8. CSS3新增的功能是（ABCD）

A、盒⼦投影 B、⽂字投影 C、@media D、font-face

9. 在javascript中，以下表达式为真的是（AC）：

A、null==undefined B、null===undefined C、"2">"12" D、{}=={}

10. 在javascript中，关于构造函数说法正确的是（ABC）：

A、构造函数中会隐式的创建this对象 B、构造函数中的this指向实例对象 C、需要⽤new创建实例对象 D、构造函数和⼯⼚函数⽆区别

11. 在javascript中，将其他类型转为数值的⽅法是（ABCD）：

A、Number() B、parseInt() C、parseFloat() D、以上都正确

12. 在javascript中，关于NaN说法正确的是（AC）：

A、typeof(NaN)=="number" B、NaN==NaN C、NaN是特殊是数值 D、判断变量是不是数值⽤isNaN()⽅法 1

3. 在javascript中,关于数组说法正确的是（ACD）：

A、可以⽤new关键词定义 B、数组长度⼀旦定义就不能修改 C、数组中的unshift()⽅法⽤来给数组的前⾯添加值 D、数组中的shift()是删除数组中的第⼀个值，且返回删除的值

14. 在jquery中，下列哪⼀个⽅法是对添加移除类操作的（ABCD）：

A、addClass() B、removeClass() C、toggleClass() D、attr("class")

15. 在jquery中，下⾯哪⼏个属于jquery的事件（BCD）?

A、onclick() B、click() C、hover() D、mouseover()

三、判断题（每⼩题2分，共5⼩题，共10分。在每⼩题后对应括号内填⼊判断结果，正确的选项填写“√”，错误的选项填写“×”）

1、在table标签中，⽤colspan属性来实现跨⾏。（F ）

2、在javascript中，break是⽤来终⽌程序执⾏，常⽤于if语句。                                                                                （F ）

3、在javascript中,arguments是存储形参的。（F ）

4、CSS中设置阻⽌换⾏的属性是white-space:nowrap。（T ）

5、jquery和javascript没有关系。（F ）

实操部分 试题⼀（30分） 阅读下列说明、效果图和HTML代码，进⾏静态⽹页开发，填写（1）⾄（15）代码。 【说明】 这是⼀个公司的发展历程，⽤html+css完成。 项⽬包含⾸页index.html、css⽂件夹，其中，css⽂件夹包含style.css⽂件。 请根据效果图和已提供的代码，补全（1）-（15）中的代码。 【效果图】 （1）index.html在PC端效果如图1-1所⽰。

【代码：⾸页index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timeline</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="cont">
<div class="biz_title">
<h2>发展历程</h2>
<p>CONMPANY HISTORY</p>
</div>
<div class="biz_timtline-box">
<div class="biz_timeline">
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2012.12</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">公司成⽴</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2013.02</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">园区业务⽅向</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2014.03</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">获天使轮投资900万元</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2013.09</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">业务转型互联⽹营销</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2016.06</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">V1.0版本上线</div>
</div>
</div>
<div class="biz-timeline-box clearfix">
<div class="biz_timeline-time">2017.03</div>
<div class="biz_timeline-node"></div>
<div class="biz_timeline-eventbox">
<div class="biz_timeline-event">期待。。。。</div>
</div>
</div>
</div>
<div class="biz_longString"></div>
</div>
</div>
</body>
</html>

【代码：CSS⽂件style.css】

@charset "utf-8";
ul,li{
list-style: none;
}
body{
font-family: "microsoft yahei";
margin:0;
padding:0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
______(1)_visibility: hidden_____;/*溢出隐藏*/
clear: both;
}
.cont{
width:1000px;
margin:0 auto;
______(2)_padding:20px 0 50px_____;/*设置内边距上20px 左右为0,下为50px*/
}
.biz-timeline-box{
width:785px;
______(3)__margin: 0 auto 45px____;/*设置外边距上为0，左右⾃动，下为45px*/
}
/*选择类.biz-timeline-box的奇数个元素*/
.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-eventbox{
_____(6)_border-radius: 0 40px 40px 0_____;/*设置圆⾓，左上⾓为0，右上⾓为40px，右下⾓为40px,左下⾓为0*/
_____(7)_float:right_____;/*向右浮动*/
}
/*选择类.biz-timeline-box的偶数个元素*/
.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-eventbox{
border-radius: 40px 0 0 40px;
_____(8)_float:left_____;/*向左浮动*/
}
/*选择类.biz-timeline-box的奇数个元素*/
.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-event{
border-radius:0 30px 30px 0;
}
/*选择类.biz-timeline-box的偶数个元素*/
.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-event{
border-radius: 30px 0 0 30px;
}
/*选择类.biz-timeline-box的奇数个元素*/
.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-time{
_____(8)__float:left____;/*向左浮动*/
width:344px;
text-align: right;
}
/*选择类.biz-timeline-box的偶数个元素*/
.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-time{
_____(7)_float:right_____;/*向右浮动*/
width:344px;
text-align: left;
}
/*选择类.biz-timeline-box的偶数个元素*/
.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-node{
_____(7)_float:right_____;/*向右浮动*/
}
/*选择类.biz-timeline-box的奇数个元素*/
.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-node{
_____(8)__float:left____;/*向左浮动*/
}
.biz_timeline-time{
font-size:16px;
color:#d81919;
_____(9)__font-weight____: 600;/*设置⽂字加粗*/
_____(10)_line-height_____:73px;/*设置⾏⾼*/
}
.biz_timeline-eventbox{
width: 336px;
height: 69px;
_____(11)_border: 4px solid #d94646_____;/*设置边框宽为4px,边框线为实⼼线,颜⾊为#d94646*/
text-align: center;
}
.biz_timeline-event{
width:323px;
height:57px;
margin:6px;
color:#fff;
background:#d94646;
text-align: center;
font-size:16px;
line-height:57px;
}
.biz_timeline-node{
width:8px;
height:8px;
_____(12)_border-radius: 50%_____;/*设置圆⾓*/
background: #fff;
border:4px solid #b22b2b;
margin:29px 40px;
}
.biz_longString{
_____(13)__position:absolute____;/*设置绝对定位*/
left:50%;
width:8px;
height:700px;
background:#bfbfbf;
top:-57px;
_____(14)__z-index____:10;/*设置层级*/
margin-left:-4px;
}
.biz_timtline-box{
_____(15)__position: relative____;/*设置相对定位*/
margin-top:100px;
}
.biz_timeline{
_____(14)_z-index_____:20;/*设置层级*/
_____(15)_position: relative_____;/*设置相对定位*/
}
.biz_title{
text-align: center;
margin:0 auto 35px;
}
.biz_title h2{
font-size:28px;
color:#d81919;
}
.biz_title p{
color:#eca7a7;
margin-top:15px;
}
 

 试题⼆（20分）

阅读下列说明、效果图和HTML代码，进⾏静态⽹页开发，填写（1）⾄（10）代码。 【说明】 这个某项⽬中的其中⼀个活动页，应⽤HTML5和css3技术完成页⾯动画。⿏标没经过是图2-1，当⿏标经过是图2-2，当⿏标经过遮罩层 像翻书⼀样显⽰出来。项⽬包含主页index.html、style.css和img⽂件夹。要求页⾯的⽂字随着屏幕的⼤⼩变化⽽变化，根据效果图和已有 的代码补全（1）-（10）的代码 【效果图】

【代码：主页index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第⼆题--css3动画</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="one">
<div class="bba">
<div class="tu">
<img src="img/img.jpg">
</div>
<div class="di">
<h3>冬天</h3>
<span>冬天到了,万物开始收藏,朔风变得凛冽,⽔开始凝冰,⼏季的繁荣与欢腾在⼊冬后渐渐消逝,⼤⾃然⼜迎来了⼀轮的枯荣。</span>
<a href="">查看</a>
</div>
</div>
</div>
</body>
</html>

【代码：style.css】 

@charset "utf-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
ol,ul,li {
list-style:none;
}
a {
___(1)_text-decoration:none____;/*清除下划线*/
}
.one {
width:400px;
display:inline-block;
margin:20px 20px 40px;
}
.one .bba {
position:relative;
___(2)_transform-style____:preserve-3d;/*让转换的⼦元素保留3D转换*/
___(3)_perspective____:1000px;/*设置元素被查看位置的视图*/
}
.one .bba .tu {
overflow:hidden;
}
.one .bba .di {
height:260px;
width:40%;
opacity:0;
position:absolute;
top:0;
left:0;
padding:20px;
background:#2c3f52;
color:#ed4e6e;
___(4)_transform-origin____:left center;/*设置旋转元素的基点位置*/
transform:___(5)_rotateY(-90deg)____;/*设置沿着Y轴旋转-90度*/
transition:___(6)_transform 0.4s,opacity 0.1s____;/*设置过渡属性transform执⾏0.4s,透明的执⾏0.1s*/
}
.one .bba img {
width:400px;
height:300px;
display:block;
position:relative;
}
.one .bba .di h3 {
color:#fff;
line-height: 40px;
}
.one .bba .di a {
position:absolute;
bottom:20px;
right:20px;
text-align:center;
padding:5px 10px;
border-radius:6px;
display:inline-block;
background:#ed4e6e;
color:#fff;
}
.one .bba:hover img {
transform:___(7)__translateX(25%)___;/*设置该img向右位移宽度的四分之⼀*/
}
.one .bba:hover .di {
___(8)_perspective-origin;____:left center;/*设置 3D 元素的基点位置*/
___(9)_opacity____:1;/*设置透明度为1*/
transform:___(10)_rotateY(0deg)____;/*设置沿着Y轴旋转0度*/

【问题】（20分，每空2分） 进⾏动态⽹页开发，补全代码，在（1）⾄（10）处填⼊正确的内容。 试题三（20分） 阅读下列说明，⽤javascript编写程序。填写（1）⾄（10）代码。 【说明】 在某项⽬中，由于⾸页过长，考虑到⽤户的便捷性，需要在添加返回顶部功能，要求⽤javascript完成。 ⼀开始返回顶部不显⽰ 滚动⼀点之后再显⽰ 点击返回顶部 回到顶部；窗体滚动的时候 判断scrollTop如果⼤于0就显⽰返回顶部 否则就隐 藏。返回顶部按钮始终在版⼼的右下⾓ 根据已经提供的代码，补全（1）-（10）位置上的代码。 【效果图】 

【index.html】 布局结构如下代码，并将样式引⼊

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三题-返回顶部</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">版⼼</div>
<div id="backTop">返回顶部</div>
<script src="js/index.js"></script>
</body>
</html>

 【index.js】

//通过id获取元素backTop
var backTop = ______(1)__document.getElementById_____("backTop");
//需求：⼀开始返回顶部不显⽰ 滚动⼀点之后再显⽰ 点击返回顶部 回到顶部
window.onscroll = function () {
//窗体滚动的时候 判断scrollTop如果⼤于0就显⽰返回顶部 否则就隐藏
backTop.__(2)_style___.display =___(3)_scroll()__.top > 0 ? "__(4)_block___" : "__(5)__none___";
};
//点击按钮要回去
backTop.onclick = function () {
//渐渐的滚回去
var timer = ___(6)setInterval____(function () {
var target = 0;
//获取页⾯当前滚动的距离
var leader = ___(3)_scroll()__.top;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : ___(7)_Math.floor__(step);
leader = leader + step;
//滚动到leader位置
window.___(8)_scrollTo___(0, leader);
if (____(9)_leader === target 或者 leader == target____) {
//清除计时器
____(10)__clearInterval(timer)___;
}
}, 15);
};
//封装计算页⾯当前滚动的距离的函数
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}

【问题】（20分，每空2分）
⽹页交互，补全代码，在（1）⾄（10）处填⼊正确的内容 

试题四（16分） 阅读下列说明、效果图和代码，⽤jquery完成指定功能。 【说明】 页⾯布局，由于每个块所占据的空间不同，所以需要使⽤瀑布流的⽅式布局，因此要求⽤jquery完成此功能，请根据现有的代码和效果图补 全代码（1）-（8） 【效果图】

【index.html】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四题-瀑布流</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<ul>
<li><img src="img/jx1.jpg" alt="" /></li>
<li><img src="img/jx10.jpg" alt="" /></li>
<li><img src="img/jx2.jpg" alt="" /></li>
<li><img src="img/jx14.jpg" alt="" /></li>
<li><img src="img/jx16.jpg" alt="" /></li>
<li><img src="img/jx15.jpg" alt="" /></li>
<li><img src="img/jx2.jpg" alt="" /></li>
<li><img src="img/jx5.jpg" alt="" /></li>
<li><img src="img/jx6.jpg" alt="" /></li>
<li><img src="img/jx9.jpg" alt="" /></li>
</ul>
</div>
</body>
<script src="js/index.js"></script>
</html>

 【style.css】

body,ul {
padding: 0;
margin: 0;
}
.box {
width: 100%;
}
.box ul {
width: 100%;
}
.box ul li {
position: absolute;
list-style: none;
border: 1px solid #ccc;
padding: 1%;
margin: 1%;
width: 31%;
box-sizing: border-box;
}
.box ul li img {
display: block;
width: 100%;
}
 

【index.js】

 $(function(){
pubuliu();
//随着窗⼝的⼤⼩变化重新执⾏函数
____(1)_$(window).resize____(function() {
pubuliu();
});
})
function pubuliu(){
var li=$(".box ul li"),num=3,arr=[];
//获取每个li所占据的宽度
var liW=li.___(2)_outerWidth(true)___;
//遍历每个li
li.___(3)__each__(function(index,val){
var scrW=window.innerWidth
if(scrW<550){
num=2;
li.css("width","48%")
}else{
num=3;
li.css("width","31%")
}
if(index<num){
$(val).css({
top:0,
left:__(4)_liW*index___+"px"
})
liH=li.outerHeight(true)
arr[index]=$(this).outerHeight(true)
}else{
var minHeight=arr[0],mindex=0;
//遍历数组
arr.__(5)_forEach____(function(val,index){
if(minHeight>val){
minHeight=val;
mindex=index;
}
})
$(this).css({
top:__(6)_minHeight____,
left:__(7)_liW*mindex___+"px"
})
arr[___(8)mindex___]=minHeight+$(this).outerHeight(true)
}
})
}

试题五（14分） 阅读下列说明、效果图和代码，完成移动端布局。 【说明】 在某项⽬中，需要登录后才可以看到主页⾯，顾按照效果图完成移动端的登录页⾯布局。项⽬中的⽂件包含index.html、style.css和img⽂ 件夹。请根据现有的代码和效果图补全代码（1）-（7） 【效果图】 

 

【index.html】

<!DOCTYPE html>
<html>
<head>
<title>第三题</title>
<meta charset="utf-8">
<meta name="___(1)_viewport__" content="width=device-width, initial-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<header>
<div class="logol">
<img src="img/logol.jpg">
</div>
</header>
<section>
<div class="tabTitle">
<div class="title">注册</div>
<div class="title cur">登录</div>
</div>
<div class="form">
<form action="" ___(2)method___="post">
<ul>
<li><input type="text" name="username" __(3)_placeholder__="请输⼊⽤户名"></li>
<li><input type="text" name="username" __(3)_placeholder__="请输⼊密码"></li>
</ul>
<div><a href="">忘记密码</a></div>
<button type="submit">登录</button>
</form>
</div>
</section>
<section class="otherLogin">
<h2><a>第三⽅登录</a></h2>
<ul>
<li><img src="img/icon-img1.jpg"></li>
<li><img src="img/icon-img2.jpg"></li>
<li><img src="img/icon-img3.jpg"></li>
</ul>
</section>
<footer>
<p>登录表⽰你同意该软件<a href="">⽤户服务协议</a>和<a href="">隐私政策</a></p>
</footer>
</div>
</body>
</html>

【style.css】 

body,h1,h2,h3,h4,h5,h6,ul,p{
margin: 0;
padding:0;
}
body,html{
____(4)_height: 100%或者height:100vh___;/*设置⾼度为屏幕的⾼度*/
}
img{
display: block;
}
ul{
list-style: none;
}
input{
border:none;
}
.wrap{
position: relative;
width: 100%;
max-width: 760px;
margin:0 auto;
height: 100%;
}
header,section,footer{
width: 100%;
}
header{
display: flex;
_______(5)_____;/*⽔平居中对齐*/
_______(6)_____;/*垂直居中对齐*/
height: 31.8%;
background:url("../img/logol-bottomBj.jpg") no-repeat bottom/100% #7A9AD7;
}
header .logol{
display: flex;
_______(5)_justify-content: center____;/*⽔平居中对齐*/
_______(6)_align-items: center____;/*垂直居中对齐*/
width: 82px;
height: 82px;
____(7)__border-radius___: 50%;/*设置圆⾓*/
border:2px solid #B5C5E7;
background-color: #fff;
}
.tabTitle{
margin-top:1em;
display: flex;
text-align: center;
line-height: 40px;
}
.tabTitle .title{
width: 50%;
border-bottom: 1px solid #E9E9E9;
}
.tabTitle .title.cur{
border-bottom: 1px solid #7C8194;
}
.form{
display: flex;
_______(5)_justify-content: center____;/*⽔平居中对齐*/
}
.form form{
width: 80%;
margin-top:1em;
text-align: center;
}
.form ul li{
width: 100%;
height: 50px;
line-height: 50px;
display: flex;
_______(6)_align-items: center____;/*垂直居中对齐*/
border-bottom:1px solid #ABAFB2;
}
.form form div{
border-bottom:none;
line-height: 40px;
text-align: right;
}
.form form div a{
text-decoration: none;
color:#666;
font-size: 12px;
}
.form form button{
width: 60%;
height: 50px;
line-height: 50px;
background-color: #7A9AD7;
____(7)__border-radius___: 25px;
border:none;
color: #fff;
}
.otherLogin ul{
display: flex;
_______(5)_justify-content: center____;/*⽔平居中对齐*/
}
.otherLogin h2{
text-align: center;
font-weight: normal;
font-size: 18px;
line-height: 40px;
margin:1em 0;
color: #555;
}
.otherLogin h2:before{
position: relative;
top:23px;
left:50%;
transform: translateX(-50%);
z-index: -1;
content:"";
display: block;
width: 80%;
height:1px;
background-color: #E9E9E9;
}
.otherLogin h2 a{
padding:0 10px;
background-color: #fff;
}
.otherLogin ul li{
margin:0 10px;
}
footer p{
position: absolute;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 12px;
bottom:10px;
text-align: center;
}
footer p a{
text-decoration: none;
color:#506081;

}