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

星球的眼睛 · 2024-9-27 11:36:19

实验一商城注册页面实现

一、实验目标
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">
<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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云