javaweb第一周作业

最新推荐文章于 2024-08-12 16:47:32 发布

ohhiya

最新推荐文章于 2024-08-12 16:47:32 发布

阅读量397

点赞数 9

分类专栏： last 文章标签： java web

本文链接：https://blog.csdn.net/2202_75526478/article/details/136436495

版权

last 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细描述了一个使用HTML、CSS和JavaScript构建的蛋糕城网站用户注册页面，包括导航栏设计和表单验证功能。

摘要由CSDN通过智能技术生成

（ai）

蛋糕城注册导航栏

html

<!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>  
    <nav>  
        <ul>  
            <li><a href="#">首页</a></li>  
            <li><a href="#">商品</a></li>  
            <li><a href="#">购物车</a></li>  
            <li><a href="#">我的账户</a></li>  
            <li><a href="register.html">注册</a></li>  
            <li><a href="login.html">登录</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        <h1>用户注册</h1>  
        <form id="registerForm">  
            <div>  
                <label for="username">用户名:</label>  
                <input type="text" id="username" name="username" required>  
            </div>  
            <div>  
                <label for="email">邮箱:</label>  
                <input type="email" id="email" name="email" required>  
            </div>  
            <div>  
                <label for="password">密码:</label>  
                <input type="password" id="password" name="password" required>  
            </div>  
            <div>  
                <label for="confirm_password">确认密码:</label>  
                <input type="password" id="confirm_password" name="confirm_password" required>  
            </div>  
            <div>  
                <input type="submit" value="注册">  
            </div>  
        </form>  
    </main>  
  
    <script src="script.js"></script>  
</body>  
</html>

css

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
}  
  
nav {  
    background-color: #333;  
    color: #fff;  
    padding: 10px;  
}  
  
nav ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    overflow: hidden;  
}  
  
nav ul li {  
    float: left;  
}  
  
nav ul li a {  
    display: block;  
    color: #fff;  
    text-align: center;  
    padding: 14px 16px;  
    text-decoration: none;  
}  
  
nav ul li a:hover {  
    background-color: #111;  
}  
  
main {  
    margin: 20px;  
}  
  
form div {  
    margin-bottom: 10px;  
}  
  
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;  
    box-sizing: border-box;  
}  
  
input[type="submit"] {  
    background-color: #4CAF50;  
    color: white;  
    padding: 10px 20px;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
}  
  
input[type="submit"]:hover {  
    background-color: #45a049;  
}  
  
form div.error {  
    color: red;  
}

js

document.getElementById('registerForm').addEventListener('submit', function(event) {  
    event.preventDefault();  // 阻止表单的默认提交行为  
  
    var username = document.getElementById('username').value;  
    var email = document.getElementById('email').value;  
    var password = document.getElementById('password