[html] 帮学生改了个爱情修炼手册的登录和注册页面哈哈哈哈哈哈

tan 91

已于 2023-11-24 15:29:16 修改

阅读量537

点赞数

分类专栏： html 文章标签： html css css3

于 2023-11-11 23:38:29 首次发布

ZXW-NUDT

本文链接：https://blog.csdn.net/ZXW_NUDT/article/details/134355862

版权

html 专栏收录该内容

7 篇文章

订阅专栏

该文章详细展示了两个HTML页面，一个是登录界面，另一个是注册界面，包括CSS样式，表单布局，以及动画效果，展示了前端开发中常见的用户界面构建技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看效果图
在这里插入图片描述

上源代码：

登录.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <title>登录界面</title>
    <style>
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(270deg, #fbc2eb, #a6c1ee, #f6d285, #ffdde1);
            background-size: 800% 800%;
            animation: gradientBG 15s ease infinite;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
            backdrop-filter: blur(10px); /* Apply blur to the background */
            padding: 40px 60px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 300px;
        }

        h2 {
            margin: 0 0 30px;
            color: #333;
            font-size: 24px;
            text-transform: uppercase;
            letter-spacing: 1px; /* Add some spacing between letters */
        }

        .form-group {
            position: relative;
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            display: block;
            color: #666;
            margin-bottom: 5px;
        }

        .form-group input[type="checkbox"] {
            margin-right: 5px; /* 这将在复选框和标签之间添加一些空间 */
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-bottom: 2px solid #ccc;
            background-color: transparent; /* Ensure the background is transparent */
            outline: none;
            transition: border-color 0.3s;
            color: #333;
            font-size: 16px;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border-bottom-color: #007bff;
        }

        input[type="checkbox"] {
            margin-right: 5px;
        }

        .login-container img {
            width: 30px;
            height: 30px;
            margin: 0 5px;
            transition: transform 0.3s ease;
        }

        .login-container img:hover {
            transform: scale(1.1);
        }

        a {
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #007bff;
        }

        .login-container a.register {
            display: block;
            margin-top: 20px;
        }

        .login-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-top: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            width: 100%; /* Make the button full-width */
            font-size: 16px;
        }

        .login-btn:hover {
            background-color: #0056b3;
        }

        .forgot-password {
            display: block;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .social-login {
            margin-top: 10px;
        }

        .social-login img {
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .social-login img:hover {
            opacity: 1;
            transform: translateY(-3px);
        }
    </style>
</head>

<body>
    <div class="login-container">
        <h2>会员登录</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">账号登录</label>
                <input type="text" id="username" placeholder="邮箱/ID/手机号">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请公主王子输入密码">
            </div>
            <div class="form-group">
                <input type="checkbox" id="remember-me">
                <label for="remember-me">自动登录</label>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <a href="" class="forgot-password">忘记密码?</a>
        <div class="social-login">
            <span>其他账号登录</span><span style="margin-left: 35px;"></span>
            <i class="fab fa-qq"><span style="margin-left: 20px;"></span></i>
            <i class="fab fa-weibo"></i>
            <i class="fab fa-baidu"></i>
        </div>
        <a href="../html/注册.html" class="register">还不是会员?立即注册</a>
    </div>
</body>

</html>

注册.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱情秘籍</title>
    <style>
        /* 炫彩背景样式 */
        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(120deg, #a1c4fd, #c2e9fb, #fbc2eb);
            background-size: 600% 600%;
            animation: gradientBG 10s ease infinite;
        }

        /* 毛玻璃效果样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 15px;
            margin: 50px auto;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 炫彩背景动画 */
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 其他样式优化 */
        table, form {
            width: 100%;
        }
        h1, p, select, input, textarea, label, a, h3, ul, li {
            margin: 10px 0;
        }
        input[type="text"], input[type="tel"], select, textarea {
            width: calc(100% - 10px);
            padding: 5px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="radio"], input[type="checkbox"] {
            margin-right: 5px;
        }
        .btn, .login-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #a1c4fd;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-align: center;
            text-decoration: none;
            margin: 10px 0;
        }
        .btn:hover, .login-btn:hover {
            background-color: #c2e9fb;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin-bottom: 5px;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section label {
            display: block;
            margin-bottom: 5px;
        }
        .form-section div {
            display: flex;
            justify-content: space-between;
        }
        .form-section div select {
            width: 32%;
        }
        .checkbox-group, .radio-group {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .checkbox-group label, .radio-group label {
            margin-right: 15px;
        }
        .promise {
            color: #f56a6a;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="glass-effect">
        <h1 style="text-align: center;">青春不常在，抓紧谈恋爱</h1>
        <form action="">
            <div class="form-section">
                <label>性别：</label>
                <div class="radio-group">
                    <label><img src="../images/man.jpg" alt="男" style="vertical-align: middle;"><input type="radio" name="sex"> 男</label>
                    <label><img src="../images/women.jpg" alt="女" style="vertical-align: middle;"><input type="radio" name="sex"> 女</label>
                </div>
            </div>
            <div class="form-section">
                <label>生日：</label>
                <div>
                    <select name="" id="">
                        <!-- 年份选择 -->
                        <option value="">--请选择年份--</option>
                        <option value="">2000</option>
                        <option value="">2001</option>
                        <option value="">2002</option>
                        <option value="">2003</option>
                        <option value="">2004</option>
                        <option value="">2005</option>
                        <option value="">2006</option>
                        <option value="">2007</option>
                        <option value="">2008</option>
                        <option value="">2009</option>
                        <option value="">2010</option>
                        <option value="">2011</option>
                        <option value="">2012</option>
                        <option value="">2013</option>
                        <option value="">2014</option>
                        <option value="">2015</option>
                        <option value="">2016</option>
                        <option value="">2017</option>
                        <option value="">2018</option>
                        <option value="">2019</option>
                        <option value="">2020</option>
                        <option value="">2021</option>
                        <option value="">2022</option>
                        <option value="">2023</option>
                    </select>
                    <select name="" id="">
                        <!-- 月份选择 -->
                        <option value="">--请选择月份--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                    <select name="" id="">
                        <!-- 日期选择 -->
                        <option value="">--请选择日期--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                        <option value="">31</option>
                    </select>
                </div>
            </div>
            <div class="form-section">
                <label>所在地区：</label>
                <input type="text" placeholder="广东">
            </div>
            <div class="form-section">
                <label>婚姻状况：</label>
                <div class="radio-group">
                    <label><input type="radio" name="marital-status"> 未婚</label>
                    <label><input type="radio" name="marital-status"> 已婚</label>
                    <label><input type="radio" name="marital-status"> 离异</label>
                </div>
            </div>
            <div class="form-section">
                <label>学历：</label>
                <input type="text" placeholder="本科">
            </div>
            <div class="form-section">
                <label>月薪：</label>
                <input type="text" placeholder="5000-10000">
            </div>
            <div class="form-section">
                <label>手机号码：</label>
                <input type="tel">
            </div>
            <div class="form-section">
                <label>昵称：</label>
                <input type="text">
            </div>
            <div class="form-section">
                <label>喜欢的类型：</label>
                <div class="checkbox-group">
                    <label><input type="checkbox"> 妩媚</label>
                    <label><input type="checkbox"> 柔美</label>
                    <label><input type="checkbox"> 可爱</label>
                    <label><input type="checkbox"> 小鲜肉</label>
                    <label><input type="checkbox"> 型男</label>
                    <label><input type="checkbox"> 气质</label>
                    <label><input type="checkbox"> 傻X250</label>
                </div>
            </div>
            <div class="form-section">
                <label>自我介绍：</label>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>
            <div class="form-section">
                <input type="checkbox"> 我同意注册条款和会员加入标准
            </div>
            <div class="form-section">
                <input type="submit" value="注册" class="btn">
            </div>
            <div class="form-section" style="text-align: center;">
                <input type="button" value="我是会员，立即登录" class="btn" onclick="location.href='../html/登录.html';">
            </div>
            <h3 class="promise">我承诺：</h3>
            <ul>
                <li>年满18岁单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </form>
    </div>
</body>
</html>