题目要求
html代码
<!DOCTYPE html>
<html>
<head>
<title>第三题</title>
<meta charset="utf-8">
<!-- <meta name="___(1)___" content="width=device-width, initial-scale=1,user-scalable=no"/> -->
<meta name="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)___="post"> -->
<form action="" method="post">
<ul>
<!-- <li><input type="text" name="username" __(3)___="请输入用户名"></li>
<li><input type="text" name="username" __(3)___="请输入密码"></li> -->
<li><input type="text" name="username" placeholder="请输入用户名"></li>
<li><input type="text" name="username" 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>css代码
body,h1,h2,h3,h4,h5,h6,ul,p{
margin: 0;
padding:0;
}
body,html{
/* ____(4)____;设置高度为屏幕的高度 */
height: 100%;/*设置高度为屏幕的高度*/
}
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)_____;垂直居中对齐 */
justify-content:center;/*水平居中对齐*/
align-items: center;/*垂直居中对齐*/
height: 31.8%;
background:url("../img/logol-bottomBj.jpg") no-repeat bottom/100% #7A9AD7;
}
header .logol{
display: flex;
/* _______(5)_____;水平居中对齐 */
/* _______(6)_____;垂直居中对齐 */
justify-content:center;/*水平居中对齐*/
align-items: center;/*垂直居中对齐*/
width: 82px;
height: 82px;
/* ____(7)_____: 50%;设置圆角 */
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;
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;
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;
border-radius: 25px;
border:none;
color: #fff;
}
.otherLogin ul{
display: flex;
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;
}题目分析
✅meta标签
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>
✅viewport的conten值
✅input标签的placeholder 属性
✅flex布局下设置居中对齐模式
⏩水平居中
⏩justify-content:设置主轴上的子元素排列方式
⏩垂直居中
⏩align-items:设置交叉轴上的子元素排列方式
实现效果
