console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<div class="header">
<h1 align="center">正在发生</h1>
<div class="daohanglan">
<h2 align="center">what's happening</h2>
<ul>
<li><a class="1">首页</a></li>
<li><a class="2">作者</a></li>
<li><a class="3">关于我们</a></li>
<li><a class="4">加入我们</a></li>
</ul>
</div>
</div>
<div class="BODY">
<div id="box">
<svg t="1647917700893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2290"
width="50" height="50">
<path d="M377.248 896c-103.52 0-200-30.08-281.248-82.048 68.96
4.48 190.656-6.24
266.368-78.432-113.888-5.216-165.248-92.576-171.936-129.888 9.664 3.744
55.808 8.224 81.856-2.24-130.976-32.832-151.072-147.808-146.624-182.88
24.576 17.184 66.24 23.136 82.624
21.632-122.048-87.328-78.144-218.688-56.544-247.04 87.584 121.344 218.88
189.504 381.248 193.28a187.68 187.68 0 0 1-4.672-41.76C528.32 243.52 611.616
160 714.4 160a185.28 185.28 0 0 1 136 59.296c35.904-.41689.92-28.096
160.288-45.12-13.312 47.776-54.72 87.616-79.776 102.4 0.192
0.512-0.224-0.512 0 0 22.016-3.328 81.568-14.784 105.088-30.72-11.648
26.816-55.552 71.456-91.584 96.416C907.136 638.016 680.832 896 377.216
896z" fill="#47ACDF" p-id="2291" </path>
</svg>
<h2>登录</h2>
<button type="button">推荐使用谷歌账户登录</button>
<p>—————或——————</p>
<div class="input-box">
<input type="text" class="denglu" placeholder="邮箱登录">
</div>
<button class="forget" type="button">忘记密码?</button>
</div>
</div>
</body>
</html>
ul{
text-align: center;
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
background-color: rgb(83, 189, 250);
background-position: center;
}
li{
float:left;
}
a
{
display: inline-block;
width: 120px;
padding:4px;
color: white;
background-color: rgb(83, 189, 250);
background-position: center;
}
.header{
color: white;
background-color:rgb(42, 169, 224);
background-position: center;
}
.daohanglan{
color: white;
background-color:rgb(42, 169, 224);
background-position: center;
}
#box{
color: rgb(17, 15, 15);
background-color: white;
text-align: center;
margin: 0px auto;
width:300px;
height: 300px;
}
.denglu{
margin-bottom: 20px;
padding: 10px;
}
.forget{
border-radius: 4px;
padding-right: 50px;
padding-left: 50px;
}
.BODY{
background-image: url("https://www.tuitebook.com/wp-content/uploads/2021/06/QQ%E6%B5%8F%E8%A7%88%E5%99%A8%E6%88%AA%E5%9B%BE20210615193921-300x232.jpg");
}