题目要求
html代码
<html><head><title>第三题</title><metacharset="utf-8"><!-- <meta name="___(1)___" content="width=device-width, initial-scale=1,user-scalable=no"/> --><metaname="viewport"content="width=device-width, initial-scale=1,user-scalable=no"/><linkrel="stylesheet"type="text/css"href="css/style.css"></head><body><divclass="wrap"><header><divclass="logol"><imgsrc="img/logol.jpg"></div></header><section><divclass="tabTitle"><divclass="title">注册</div><divclass="title cur">登录</div></div><divclass="form"><!-- <form action="" ___(2)___="post"> --><formaction=""method="post"><ul><!-- <li><input type="text" name="username" __(3)___="请输入用户名"></li><li><input type="text" name="username" __(3)___="请输入密码"></li> --><li><inputtype="text"name="username"placeholder="请输入用户名"></li><li><inputtype="text"name="username"placeholder="请输入密码"></li></ul><div><ahref="">忘记密码</a></div><buttontype="submit">登录</button></form></div></section><sectionclass="otherLogin"><h2><a>第三方登录</a></h2><ul><li><imgsrc="img/icon-img1.jpg"></li><li><imgsrc="img/icon-img2.jpg"></li><li><imgsrc="img/icon-img3.jpg"></li></ul></section><footer><p>登录表示你同意该软件<ahref="">用户服务协议</a>和<ahref="">隐私政策</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:0auto; 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-repeatbottom/100%#7A9AD7; } header.logol{ display: flex; /* _______(5)_____;水平居中对齐 *//* _______(6)_____;垂直居中对齐 */justify-content:center;/*水平居中对齐*/align-items: center;/*垂直居中对齐*/width: 82px; height: 82px; /* ____(7)_____: 50%;设置圆角 */border-radius: 50%;/*设置圆角*/border:2pxsolid#B5C5E7; background-color: #fff; } .tabTitle{ margin-top:1em; display: flex; text-align: center; line-height: 40px; } .tabTitle.title{ width: 50%; border-bottom: 1pxsolid#E9E9E9; } .tabTitle.title.cur{ border-bottom: 1pxsolid#7C8194; } .form{ display: flex; justify-content:center;/*水平居中对齐*/} .formform{ width: 80%; margin-top:1em; text-align: center; } .formulli{ width: 100%; height: 50px; line-height: 50px; display: flex; align-items: center;;/*垂直居中对齐*/border-bottom:1pxsolid#ABAFB2; } .formformdiv{ border-bottom:none; line-height: 40px; text-align: right; } .formformdiva{ text-decoration: none; color:#666; font-size: 12px; } .formformbutton{ width: 60%; height: 50px; line-height: 50px; background-color: #7A9AD7; border-radius: 25px; border:none; color: #fff; } .otherLoginul{ display: flex; justify-content:center;/*水平居中对齐*/} .otherLoginh2{ text-align: center; font-weight: normal; font-size: 18px; line-height: 40px; margin:1em0; color: #555; } .otherLoginh2:before{ position: relative; top:23px; left:50%; transform: translateX(-50%); z-index: -1; content:""; display: block; width: 80%; height:1px; background-color: #E9E9E9; } .otherLoginh2a{ padding:010px; background-color: #fff; } .otherLoginulli{ margin:010px; } footerp{ position: absolute; width: 100%; height: 30px; line-height: 30px; font-size: 12px; bottom:10px; text-align: center; } footerpa{ 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:设置交叉轴上的子元素排列方式
实现效果
