实现一个蛋糕商城注册页面。
时间：2024-05-04 20:50:18 来源：网络cs 作者：纳雷武 栏目：ERP系统 阅读：
<!DOCTYPE html>
<html lang="zh">
<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="#">注册</a></li>
<li><a href="#">登录</a></li>
<li><input type="text" placeholder="搜索"></li>
<li><a href="#">购物车</a></li>
</ul>
</nav>
<!-- 注册内容 -->
<section class="register">
<h1>用户注册</h1>
<form action="/register" method="post">
<div>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" 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>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<button type="submit">提交注册</button>
</div>
</form>
</section>
<!-- 友情链接与作者署名内容 -->
<footer>
<p>友情链接：友情链接1 | 友情链接2 | 友情链接3</p>
<p>作者署名：张三</p>
</footer>
</body>
</html>
然后是 styles.css 文件的内容：
/* 导航样式 */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li input {
margin: 12px;
}
/* 注册区域样式 */
.register {
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
}
.register h1 {
text-align: center;
}
.register div {
margin-bottom: 10px;
}
.register label {
display: inline-block;
width: 100px;
}
.register input {
width: 180px;
}
/* 底部样式 */
footer {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
margin-top: 20px;
}
本文链接：https://www.kjpai.cn/news/2024-05-04/164918.html，文章来源：网络cs，作者：纳雷武，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
下一篇：返回列表