注册页面css样式_WeChat_资讯

HTML结构示例。

注册页面css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="register-container">
        <h2>注册</h2>
        <form>
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirm_password">确认密码:</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>
</body>
</html>

对应的CSS样式（styles.css）：

注册页面css样式

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
.register-container {
    width: 400px; 
    margin: 0 auto; 
    padding: 20px; 
    background-color: #fff; 
    border-radius: 5px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}
h2 {
    text-align: center; 
}
form {
    display: flex; 
    flex-direction: column; 
}
.form-group { 
    margin-bottom: 15px; 
}
label { 
    display: block; 
    margin-bottom: 5px; 
}
input[type="text"], input[type="email"], input[type="password"] { 
    width: 100%; 
    padding: 10px; 
    border-radius: 4px; 
    border: 1px solid #ccc; 
}
button[type="submit"] { 
    width: 100%; 
    padding: 10px; 
    background-color: #4CAF50; /设置按钮背景颜色 */    /可以使用渐变背景等效果，如linear-gradient等 */ /如background: linear-gradient(to right, red , yellow); */ /可以添加边框样式和颜色，如border属性等 */ /如border: none 或 border: 1px solid #ccc等 */ /可以添加阴影效果，如box-shadow属性等 */ /如box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); 等效果 */ /可以添加其他样式，如字体大小、字体颜色等，如font属性等 */ /如font-size或color等属性设置值等 */  /* 可以