设计一个登录页面的代码
时间: 2024-05-17 16:13:31 浏览: 4
好的,下面是一个简单的登录页面的 HTML 和 CSS 代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-container">
<img src="https://img-blog.csdnimg.cn/2021070818271575.png" alt="login-image">
<form>
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
```
CSS 代码:
```css
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.login-container {
width: 400px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
box-shadow: 0px 0px 10px #ccc;
}
.login-container img {
width: 100%;
margin-bottom: 20px;
}
form input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
form button {
display: block;
width: 100%;
padding: 10px;
background-color: #007fff;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease;
}
form button:hover {
background-color: #0066cc;
}
```
这段代码实现了一个简单的登录页面,其中包括一个登录图片、用户名和密码的输入框以及登录按钮。同时,我们使用了 CSS 来美化页面,包括背景颜色、容器宽度、输入框样式、按钮样式等。你可以在浏览器中查看效果。