请用HTML5与CSS3网页设计给出代码。
时间: 2023-11-04 10:05:45 浏览: 103
好的,以下是一个简单的HTML5与CSS3代码示例,实现了上述登录页面设计:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面设计</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F5F5F5;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.login-box {
background-color: #FFFFFF;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
width: 400px;
}
.login-box h2 {
color: #FF0000;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
margin: 0px;
}
.login-box h2 span {
color: #CDC5BF;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #F5F5F5;
font-size: 14px;
color: #333333;
box-sizing: border-box;
}
input[type="text"]::placeholder, input[type="password"]::placeholder {
color: #CCCCCC;
}
.checkbox {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.checkbox label {
margin-left: 5px;
}
.forgot-password {
text-align: right;
margin-bottom: 15px;
}
.forgot-password a {
color: #FF0000;
text-decoration: none;
}
.btn {
display: block;
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #FF0000;
font-size: 14px;
color: #FFFFFF;
text-align: center;
cursor: pointer;
text-transform: uppercase;
transition: all 0.3s ease;
box-sizing: border-box;
}
.btn:hover {
background-color: #E60000;
}
.social-buttons {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.social-buttons span {
color: #CCCCCC;
}
.social-buttons span:nth-child(2) {
margin-left: 5px;
margin-right: 5px;
}
.register {
text-align: center;
font-size: 14px;
}
.register a {
color: #FF0000;
text-decoration: none;
}
.footer {
text-align: center;
font-size: 14px;
line-height: 2em;
}
</style>
</head>
<body>
<div class="container">
<div class="login-box">
<h2><span>扫描登录</span>账户登录</h2>
<form>
<div class="form-group">
<label for="username">手机/邮箱用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
<div class="checkbox">
<input type="checkbox" id="remember" name="remember" checked>
<label for="remember">自动登录</label>
</div>
<div class="forgot-password">
<a href="#">忘记密码</a>
</div>
<button class="btn" type="submit">登录</button>
</form>
<div class="social-buttons">
<span>QQ</span>
<span>|</span>
<span>微信</span>
</div>
<div class="register">
还没有账户?<a href="#">立即注册</a>
</div>
</div>
</div>
<div class="footer">
<div>版权所有 © 2021</div>
<div>联系我们:1234567890</div>
</div>
</body>
</html>
```
这段代码实现了以下功能:
1. 使用了HTML5的语义化标签,如`<section>`、`<article>`等。
2. 使用了CSS3的Flex布局,使页面布局更加灵活。
3. 使用了CSS3的边框、投影、圆角等属性,美化了页面。
4. 使用了CSS3的过渡效果,使按钮在鼠标悬停时有颜色变化。
5. 实现了页面响应式设计,适配了不同屏幕尺寸的设备。
希望这个示例对你有帮助!
阅读全文
相关推荐














