运行截图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>西瓜视频登录页面</title>
<style>
.but{
width: 220px;
height: 30px;
color: white;
background-color: #f40;
vertical-align: middle;
font-size: 20px;
align-items: center;
}
.number{
width: 220px;
height: 20px;
background-color: white;
margin-top: 10px;
border: 1px solid grey;
}
.password{
width: 220px;
height: 20px;
background-color: white;
margin-top: 10px;
}
.douyin{
width: 35px;
height: 35px;
border: none;
border-radius: 50%;
font-size: 10px;
}
.qq{
width: 35px;
height: 35px;
border: none;
border-radius: 50%;
font-size: 10px;
}
.weixin{
width: 35px;
height: 35px;
border: none;
border-radius: 50%;
font-size: 10px;
}
.dev>a{
text-decoration: none;
}
.1{
font-size: 10px;
}
</style>
</head>
<body>
<form>
<tr>
<td>登录</td>
</tr>
<hr />
<tr>
<td>密码登录</td><br />
</tr>
<tr>
<td>
<td><input class="number" type="text" name="number" placeholder="请输入手机号" required/><br /></td>
<td><input class="password" type="password" name="=password" placeholder="请输入密码" required/><br /></td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="fav" value="mima" size="10px"/>记住密码</td>
</tr>
<tr>
<p><button class="but" type="submit">登录</button></p>
<td class="1">其他方式:</td>
<button class="douyin">抖音</button>
<button class="qq">秋秋</button>
<button class="weixin">微信</button>
<td class="1">手机验证码登录</td>
</tr>
<tr>
<p class="dev">
<input type="checkbox" name="fav" value="denglu"/>登录即代表你同意<a href="#">用户协议</a>和<a href="#">隐私协议</a>
</p>
</tr>
</form>
</body>
</html>
标签：35px,西瓜,登录,height,width,html,10px,border From： https://www.cnblogs.com/EchoQ12/p/17228312.html