目录
效果图：
css代码
html代码
效果图：
css代码
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
background-color: rgb(244, 244, 244);
}
.box {
width: 1200px;
height: 750px;
}
img {
width: 300px;
height: 750px;
}
/* 左边图片 */
.left {
float: left;
}
/* 右边内容 */
.right {
width: 900px;
height: 750px;
float: right;
/* background-color: rgb(255, 255, 255); */
position: relative;
}
/* logo标志 */
.right>img {
width: 56px;
height: 56px;
}
/* 右上角内容 */
.right>ul {
float: right;
}
li {
float: left;
margin-right: 10px;
}
.suxian {
border-left: 1px solid rgb(224, 224, 224);
}
.suxian:hover {
color: rgb(254, 121, 27);
}
.english {
display: none;
color: rgb(68, 68, 68);
font-size: 14px;
background-color: white;
}
.suxian:hover+.english {
display: block;
}
.suxian:hover span {
transform: rotate(180deg);
border-color: rgb(254, 121, 27) transparent transparent transparent;
}
.suxian>span {
border: 5px solid black;
border-color: black transparent transparent transparent;
position: absolute;
top: 10px;
right: 0;
transition: all 1s;
transform: rotate(0deg);
transform-origin: top;
}
a {
color: rgb(163, 165, 163);
font-size: 14px;
padding: 0px 10px;
}
/* 表单 */
form {
width: 400px;
height: 500px;
margin-left: 200px;
margin-top: 100px;
background-color: rgb(255, 255, 255);
position: absolute;
}
/* 右上角图片 */
.rightshangjiao {
height: 40px;
}
.jiao {
width: 40px;
height: 40px;
float: right;
}
/* 第一行 */
.heead {
margin-left: 60px;
}
h2 {
display: inline-block;
/* border-bottom: 2px solid rgb(255, 92, 0); */
}
.denglu {
border-bottom: 2px solid rgb(255, 92, 0);
}
.zhuce {
color: rgb(198, 198, 198);
margin-left: 15px;
}
/* 输入框 */
input {
border: 0px;
}
.ipt,
#pw {
width: 280px;
height: 40px;
/* margin-top: 20px; */
background-color: rgb(249, 249, 249);
outline: none;
}
/* 登录按钮 */
#btn {
width: 280px;
height: 40px;
background-color: rgb(255, 190, 153);
color: white;
}
p {
margin-top: 20px;
text-align: center;
}
span {
font-size: 12px;
}
/* 复选框 */
#checkbox {
background-color: rgb(249, 249, 249);
}
form>p>a {
color: rgb(255, 92, 0);
}
.qita,
.hui {
color: rgb(175, 170, 170);
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
font-size: 40px;
}
#tel{
margin-left: 90px;
}html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米账号 - 登录</title>
<link rel="icon" href="https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/favicon_new.ico">
<link rel="stylesheet" href="./tubiao/font_4285954_bi4k1j1vdz8/iconfont.css">
<link rel="stylesheet" href="./css/logo.css">
<script src="./tubiao/font_4285954_bi4k1j1vdz8/iconfont.js">
</script>
</head>
<body>
<div class="box">
<div class="left">
<img src="./image/mm.png" alt="">
</div>
<div class="right">
<img src="./image/logo.jpg" alt="">
<span>小米账号</span>
<ul>
<li><a href="">用户协议</a></li>
<li><a href="">隐私政策</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="" class="suxian">中文(简体) <span></span></a>
<div class="english">
<p>中文(繁)</p>
<p>English</p>
</div>
</li>
</ul>
<form action="">
<p class="rightshangjiao"><img src="./image/www.png" alt="" class="jiao"></p>
<div class="heead">
<h2 class="denglu">登录</h2>
<h2 class="zhuce">注册</h2>
</div>
<p>
<input type="text" placeholder="邮箱/手机号码/小米ID" class="ipt">
</p>
<p>
<input type="password" name="password" id="pw" placeholder="密码">
</p>
<p>
<input type="checkbox" name="" id="checkbox">
<span><span class="hui">已阅读并同意小米账号</span>用户协议 <span class="hui">和</span>隐私政策</span>
</p>
<p>
<input type="button" name="button" id="btn" value="登录">
</p>
<p>
<a href="" id="forget">忘记密码？</a>
<a href="" id="tel">手机号登录</a>
</p>
<p class="qita">其他方式登录</p>
<p class="tubiao">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhifubao"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shejiaotubiao-42"></use>
</svg>
</p>
</form>
</div>
</div>
</body>
</html>