<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米账号-登录</title>
<style>
.logo{
position: absolute;
}
.milogo{
position: absolute;
left: 390px;
top: 24px;
}
.zhanghao{
position: absolute;
left: 440px;
top: 2px;
font-size: 25px;
color: #333333;
font-weight: 550;
}
.others{
position: absolute;
left: 1150px;
top: 24px;
font-size: 14px;
color: #8391b3;
}
.area{
position: relative;
width: 480px;
height: 540px;
left: 670px;
top: 90px;
background-color: #ffffff;
box-shadow: 10px 10px 90px #f8f8f8, -10px -10px 90px #f8f8f8;
}
.input {
width: 350px;
height: 50px;
}
</style>
</head>
<body>
<div class="logo">
<img src="./image/左侧log.jpg"width=365px>
</div>
<div class="milogo">
<img src="./image/milogo.jpg"width=42px height="42px">
</div>
<div class="zhanghao">
<div style="float: none";>
<p>
小米账号
</p>
</div>
</div>
<div class="others">
<p>用户协议 隐私政策 帮助中心</p>
</div>
<form>
<div class="area">
<div style="position: absolute;left:65px;top:70px">
<!-- 标语 -->
<div>
<p><b style="color: black;font-size: 20px;">登录</b></p>
</div>
<!-- 表单框 -->
<!-- 用户名框 -->
<div>
<input type="text" class="input"style="font-size:17px;"placeholder="邮箱/手机号码/小米ID">
</div>
<!-- 密码框 -->
<div style="position: relative;top: 15px;">
<input type="password" class="input"style="font-size:16px;"placeholder="密码">
</div>
<div style="position: absolute;left: 0px;top: 192px;">
<input type="checkbox">已阅读并同意小米账号用户协议和隐私政策
</div>
<div style="position: absolute;left: 0px;top: 220px;">
<input type="submit" value="登录" style="border:none ; font-size: 20px;color: #ffffff;background-color: #ffcba9;width: 360px;height: 50px;">
</div>
<div style="position:absolute;top: 270px;">
<a href="www.baidu.com"style="color: #ff8a45;text-decoration:none;">忘记密码?</a>
</div>
<div style="position:absolute;top: 270px;left: 275px;">
<a href="www.baidu.com"style="color: #ff8a45;text-decoration:none">手机号登录</a>
</div>
<div style="position:absolute;top: 300px;left: 128px;">
<p style="color: #aab2c8;">
其他方式登录
</p>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
