效果图：
代码展示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>西瓜视频登录</title>
<style type="text/css">
body {
background-color: #ccc;
}
.container {
width: 660px;
height: 480px;
margin: 100px auto 100px;
background-color: white;
border-radius: 5px;
}
.head_1 {
width: 610px;
height: 66px;
padding-left: 25px;
padding-right: 25px;
border-bottom: 1px solid #F1F1F1;
}
.head_1>.font_1 {
font-size: 20px;
color: #0c0d0f;
line-height: 66px;
}
.head_1>.close {
display: inline-block;
line-height: 66px;
font-weight: bold;
color: #999999;
float: right;
}
.body_1 {
width: 660px;
height: 260px;
padding-top: 40px;
}
.body_1>.box_1 {
width: 330px;
height: 260px;
padding-left: 60px;
padding-right: 28px;
border-right: 1px solid #F1F1F1;
float: left;
}
.body_1>.box_2 {
width: 241px;
height: 260px;
float: left;
}
.foot_1 {
width: 330px;
height: 20px;
padding-left: 60px;
padding-right: 28px;
margin-top: 16px;
margin-bottom: 36px;
}
.foot_2 {
width: 475px;
height: 20px;
color: #606266;
font-size: 14px;
padding-bottom: 20px;
padding-left: 185px;
}
.line_1,
.box_2_l1 {
width: 330px;
height: 20px;
padding-bottom: 16px;
font-size: 16px;
color: #0c0d0f;
}
.line_2,
.line_3 {
width: 310px;
height: 32px;
background-color: #F2F2F2;
padding: 8px 10px;
}
.line_2>select {
height: 32px;
background-color: #F2F2F2;
border: none;
text-indent: 4px;
}
.line_2>.input_1 {
width: 245px;
height: 32px;
border: none;
background-color: #F2F2F2;
}
.line_3 {
margin-top: 20px;
font-size: 15px;
color: #606266;
}
.line_3>.input_2 {
width: 240px;
height: 32px;
border: none;
background-color: #F2F2F2;
}
.line_4 {
width: 330px;
height: 40px;
}
.line_5 {
width: 330px;
height: 20px;
font-size: 12px;
}
.line_5>.input_3 {
width: 6px;
height: 8px;
border: 1px solid #F1F1F1;
border-radius: 3px;
}
.line_6 {
width: 330px;
height: 48px;
}
.line_6>button {
width: 330px;
height: 48px;
border: none;
border-radius: 2px;
background-color: #fe3355;
color: #ffffff;
font-size: 16px;
}
.box_2_l1 {
width: 213px;
padding-left: 28px;
padding-bottom: 0px;
}
.box_2_l2 {
width: 187px;
height: 206px;
margin-top: 16px;
padding: 0px 28px;
}
.box_2_l2>.img_1 {
width: 85%;
}
[class^="font_line"] {
font-size: 14px;
color: #606266;
margin-bottom: 0px;
}
.font_line_2 {
margin-top: 0px;
}
[class^="foot_font"] {
font-size: 14px;
color: #606266;
}
.foot_1>img {
height: 20px;
}
.foot_font_2 {
margin-left: 82px;
}
.input_4 {
width: 12px;
height: 12px;
}
.link_1 {
color: #236ddb;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="head_1">
<span class="font_1">登录</span>
<span class="close">X</span>
</div>
<div class="body_1">
<div class="box_1">
<div class="line_1">密码登录</div>
<div class="line_2">
<select name="" id="">
<option>+86</option>
<option>+852</option>
<option>+853</option>
<option>+886</option>
</select>
<input type="text" class="input_1" name="" id="" placeholder="请输入手机号">
</div>
<div class="line_3">
<input type="password" class="input_2" name="password" id="" placeholder="请输入密码"">忘记密码
</div>
<div class=" line_4">
</div>
<div class="line_5">
<input class="input_3 type=" checkbox" name="记住密码" id="">
<span class="font_2">记住密码</span>
</div>
<div class="line_6">
<button>登录</button>
</div>
</div>
<div class="box_2">
<div class="box_2_l1">扫码登录</div>
<div class="box_2_l2">
<img class="img_1" src="./img/西瓜二维码.png" alt="">
<p class="font_line_1">
打开
<span style="color: #fe3355;">
西瓜视频手机APP
</span>
</p>
<p class="font_line_2">
我的-扫一扫登录
<span>
<img src="./img/问号.png" alt="" style="width: 14px;">
</span>
</p>
</div>
</div>
</div>
<div class="foot_1">
<span class="foot_font_1">
其他方式：
</span>
<img src="./img/抖音.png" alt="">
<img src="./img/QQ.png" alt="">
<img src="./img/微信.png" alt="">
<span class="foot_font_2">
手机验证码登录
</span>
</div>
<div class="foot_2">
<input class="input_4" type="checkbox" name="用户协议" id="">
登录即代表你同意<a class="link_1" href="https://www.ixigua.com/user_agreement/" target="_blank">用户协议</a>和<a
class="link_1" href="https://www.ixigua.com/privacy_policy/" target="_blank">隐私政策</a>
</div>
</div>
</body>
</html>
