Java Web实验一：商城注册页面

最新推荐文章于 2024-10-05 17:38:18 发布

爱编程的松子

最新推荐文章于 2024-10-05 17:38:18 发布

阅读量4.2k

点赞数 16

分类专栏： Java Web 文章标签：前端 web java

本文链接：https://blog.csdn.net/jianguosongzi/article/details/137224844

版权

Java Web 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和Bootstrap框架设计一个商城注册页面，包括导航栏的构建、注册表单的布局以及署名链接的添加。

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

实验一商城注册页面实现

一、实验目的

1、熟悉HTML标签和CSS的基础使用，能设计实现基本的网页页面；

2、熟悉Bootstrap框架使用。

二、实验内容

实现如下图所示的商城注册页面，页面主要分为三个部分，第一部分为导航内容，包括首页、商品分类、热销、新品、注册、登录、搜索和购物车；第二部分为注册内容，包括标题、注册表单、提交按钮等；第三部分为友情链接与作者署名，要求署名为自己的学号姓名，例如，202230901张三。（注：页面呈现效果可自由发挥，包含上述三部分即可）

三、实验结果（源代码、运行截图）

<!DOCTYPE html>
<html lang="zh">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<head>
    <meta charset="UTF-8">
    <title>商城注册页面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #1c0d00;
            color: #fff;
            padding: 10px ;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        header nav ul li {
            margin-right:40px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            display:block;
            padding:10px;
        }

        header nav ul li:hover {
            background-color: #dc8407;
        }

        /* 商品分类样式 */
    header nav ul li.dropdown {
        position: relative;
        display: inline-block;
    }

    header nav ul li.dropdown > a {
        position: relative;
        display: inline-block;
    }

    header nav ul li.dropdown > a:after {
        content: "\25BC"; /* 下拉箭头 */
        font-size: 0.8em;
        color: #fff;
        float: right;
        margin-left: 10px;
    }

    header nav ul li.dropdown ul {
        display: none;
        color: #fff;
        position: absolute;
        min-width: 160px;
        z-index: 1;
    }

    header nav ul li.dropdown ul li {
        background-color:#000000;
        clear: both;
        color: #000000;
        width: 50%;
    }

    header nav ul li.dropdown:hover ul {
        display: block;
        color: #000000;
    }

   .search-icon {
         /* 设置图标的大小 */
        font-size: 2em; /* 使用em单位可以根据父元素的字体大小进行缩放 */
        /* 设置图标的颜色 */
        color: #fff; /* 白色，你可以根据需要更改颜色 */
        /* 添加其他样式，如边距、填充、光标样式等 */
        cursor: pointer; /* 当鼠标悬停在图标上时更改光标样式 */
        margin-right:-700px;
   }


    .shopping-cart-icon {

        cursor: pointer; /* 当鼠标悬停在购物车上时更改光标样式 */
        font-size:2em;
        color:#fff;
        margin-right:20px;
    }



    section {
            padding: 20px;
            background-color: #fff;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
    }


    .form-container {
        text-align: center; /* 让表单内的元素居中对齐 */
    }
    .form-group {
        /* 为每个表单组添加一些底部间距 */
    }


    section h2 {
            text-align: center;
            margin-top:-20px;
            color: #dc8407;
    }

    section form label {
            text-align: left;
            margin-left: 350px;
            display: block;
            margin-bottom: 1px;
    }
    section form label1 {
            text-align: left;
            margin-left: 350px;
            display: block;
            margin-bottom: 1px;
    }

     section form label:after {
            content: "*";
            color: red;
            margin-left: 5px;
     }
     section form label1:after {

            margin-left: 5px;
     }

     section form input[type="text"],
     section form input[type="email"],
     section form input[type="people"],
     section form input[type="phone"],
     section form input[type="address"],
     section form input[type="password"] {

            width: 50%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 15px;
     }


     section form input[type="submit"] {
            padding: 10px 20px;
            background-color: #dc8407;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;

     }

     section form input[type="submit"]:hover {
            background-color: #45a049;
     }

     footer {
            background-color: #d4d3d2;
            color: #000;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
     }

     footer a {
            color: #000;
            text-decoration: none;
            margin: 0 5px;
     }

     header nav ul {
        transform: translateX(50px); /* 这会将ul元素向右移动50像素 */

        header nav ul li {
             position: relative;
             margin-right: 500px; /* 增加列表项之间的间距 */
        }
    }
    </style>
</head>
<body>

<header>
    <nav>
        <ul>


            <li><a href="#">首页</a></li>
            <li class="dropdown"> <!-- 给“商品分类”的li标签添加dropdown类 -->
                <a href="#">商品分类</a>
                <ul>
                    <li><a href="#">分类1</a></li>
                    <li><a href="#">分类2</a></li>
                    <li><a href="#">分类3</a></li>
                    <!-- 可以继续添加更多分类 -->
                </ul>
            </li>

            <li><a href="#">热销</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">登录</a></li>

        </ul>
    </nav>
    <div class="search-icon">
        <i class="fas fa-search"></i>
    </div>

    <div class="shopping-cart-icon">
        <i class="fas fa-shopping-cart"></i>
        <!-- 可以在这里添加购物车中的物品数量或其他信息 -->

    </div>
</header>

<section>
    <h2>注册新用户</h2>
    <form action="/register" method="post" class="form-container">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名"  required>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password"  placeholder="请输入密码" required>
        </div>
        <div class="form-group">
            <label1 for="receiver">收货人</label1>
            <input type="text" id="receiver" name="receiver" placeholder="请输入收货人" required>
        </div>
        <div class="form-group">
            <label1 for="phone">收货电话</label1>
            <input type="text" id="phone" name="phone" placeholder="请输入收货电话"required>
        </div>
        <div class="form-group">
            <label1 for="address">收货地址</label1>
            <input type="text" id="address" name="address" placeholder="请输入收货地址"required>
        </div>
        <input type="submit" value="提交" style="margin-top: 10px;"> <!-- 添加了内联样式来添加一些顶部间距 -->
    </form>
</section> <footer> <p>友情链接 https://blog.csdn.net/jianguosongzi?spm=1000.2115.3001.5343</p> <a href="#">作者署名 xxx</a>  </footer> </body> </html>