html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录界面</title>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="icon.png" type="image/x-icon">
</head>
<body class="container">
<form action="#" method="post" autocomplete="on">
<table>
<tr>
<td class="login-wrapper"><h1>登录</h1></td>
</tr>
<tr>
<td><label>
<input type="text" placeholder="用户名" maxlength="4" required/>
</label></td>
</tr>
<tr>
<td><label>
<input type="password" placeholder="密码" minlength="10" required/>
</label></td>
</tr>
<tr>
<td><label>
<input type="password" placeholder="确认密码" required/>
</label></td>
</tr>
<tr>
<td><label>
<input type="email" placeholder="Email"/>
</label></td>
</tr>
<tr>
<td><label>
<input type="tel" placeholder="手机号码" required/>
</label></td>
</tr>
<tr>
<td><span class="login"><input type="submit" value="登录"/></span></td>
</tr>
<tr>
<td><span id="post">没有账号？<a href="#">注册</a></span></td>
</tr>
</table>
</form>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
}
/*去掉整个网页空白*/
.container {
height: 100%;
background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
/*设置背景颜色*/
body {
text-align: center;
}
h1 {
font-size: 45px;
}
/*设置标题字体大小*/
a:link,
a:visited {
color: rgba(230, 0, 255, 0.35);
text-decoration: none;
/*超链接去下划线*/
}
a:hover {
color: cyan;
text-decoration: underline;
/*鼠标放置超链接显示下划线*/
}
table {
background-color: white;
/*表格背景颜色*/
margin-top: 160px;
margin-left: 620px;
/*修改整个表格位置大概居于中间位置*/
width: 480px;
height: 600px;
/*修改整个表格的大小*/
border-radius: 20px;
/*整个表格添加边框圆角效果*/
}
.login-wrapper {
text-align: center;
}
/*文本居中显示*/
input {
outline: none;
/*去掉输入框点击后的边框聚焦效果*/
width: 350px;
border-bottom: 1px solid #dbdbdb;
border-top: 0;
border-left: 0;
border-right: 0;
/*让输入框有下划线效果*/
}
.login input {
font-size: 20px;
width: 200px;
height: 40px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
/*“登录”按钮背景色*/
color: #fff;
/*“登录”两字颜色*/
border-radius: 20px;
/*边框圆角*/
}
::placeholder {
font-size: 14px;
}