html+css+js中度登录页面
时间: 2023-08-28 19:06:49 浏览: 42
好的,下面是一个带有响应式设计的HTML+CSS+JS中度登录页面的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<h2>登录</h2>
<form>
<p>用户名</p>
<input type="text" name="username" placeholder="请输入用户名">
<p>密码</p>
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" name="submit" value="登录">
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
body {
background-color: #e6e6e6;
font-family: Arial, sans-serif;
}
.login-box {
width: 400px;
height: auto;
background-color: #fff;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
h2 {
text-align: center;
margin-bottom: 30px;
}
form {
display: flex;
flex-direction: column;
}
p {
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media only screen and (max-width: 768px) {
.login-box {
width: 90%;
margin: 50px auto;
}
}
```
JS代码:
```
// JS代码可以根据需要进行编写,例如对表单进行验证等等
```