console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<header>
<img src="https://i.loli.net/2021/04/10/sSB71lfERhgDGQi.gif" alt="163logo">
<div class="nav">
<a href="#">免费邮</a>
<a href="#">企业邮</a>
<a href="#">VIP邮</a>
<a href="#">帮助</a>
</div>
</header>
<section>
<div class="box-left">
<img src="https://i.loli.net/2021/04/10/q9EfD4tieaU2nS8.jpg" alt="imap">
<div>
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持 IPHONE/IPAD及ANDROID等系统</li>
<li>客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录</li>
</ul>
</div>
</div>
<div class="box-right">
<form action="#" method="get">
<p>
<img src="https://i.loli.net/2021/04/10/1tjCJVxirDRAGUw.gif" alt="">
<span class="login-text">普通登录</span>
</p>
<p>
<label for="user">用户名</label>
<input type="text" name="user" id="user">@163.com
</p>
<p>
<label for="password">密码</label>
<input type="password" name="pass" id="pass">
</p>
<p>
<label for="version">版本</label>
<input type="text" name="version" id="version" list="list-version">
<datalist id="list-version">
<option value ="1">默认</option>
<option value ="1">企业邮</option>
<option value ="1">VIP邮</option>
</datalist>
</p>
<p>
<input type="checkbox" name="autologin" id="">自动登录
<input type="checkbox" name="ssl" id="" >SSL
</p>
<p>
<input type="submit" value="登录">
<input type="button" value="注册">
</p>
</form>
</div>
</section>
<footer>
<img class="bottom-left" src="https://i.loli.net/2021/04/10/c2YmFQZ7IALPqJa.gif" alt="netease_logo">
<span class="bottom-right">
<a href="#">关于网易</a>
<a href="#">免费邮</a>
<a href="#">官方博客</a>
<a href="#">官方服务</a>
<a href="#">隐私政策</a>
|网易公司版权所有 1997-2011
</span>
</footer>
</body>
</html>
header,
section,
footer{
width: 680px;
border: 2px solid rosybrown;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
header div.nav{
float: right;
border: 1px solid rebeccapurple;
height: 60px;
line-height: 60px;
}
section div.box-left{
width: 360px;
float: left;
}
section div.box-right{
width: 360px;
height: 320px;
padding: 10px;
border: 1px solid black;
float: right;
}
.box-right p:nth-of-type(2),
.box-right p:nth-of-type(3),
.box-right p:nth-of-type(4){
margin-left: 40px;
}
datalist{
width: 15px;
}
.box-right p:nth-of-child(5),
.box-right p:nth-of-child(6){
margin-left: 85px;
}
section,
footer{
overflow: hidden;
clear: both;
}
footer span.box-right{
float: right;
height: 40px;
line-height: 40px;
}