下载地址：【1+X Web前端开发初级 】样题二（理论+实操）.zip
理论部分
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）：
<script>
console.log(a);
</script>
<script>
var b=8;
console.log(b);
</script>
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）：
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
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()方法
13. 在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;
}
【问题】（30分，每空2分）
进行静态网页开发，补全代码，在（1）至（15）处填入正确的内容。
试题二（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>
【style.css】
body{
margin: 0;
padding: 0;
}
.main{
width: 1000px;
margin:0 auto;
background-color: pink;
height: 2000px;
font-size: 50px;
line-height: 500px;
text-align: center;
}
#backTop{
display: none;
position: fixed;
left:50%;
margin-left:500px;
bottom:0;
width: 45px;
padding:15px;
background: #000;
color:#fff;
text-align: center;
line-height: 32px;
font-size: 16px;
cursor: pointer;
transition: .5s;
}
【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;
}
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
