本文指导如何使用HTML和CSS构建一个蛋糕商城的注册页面，包括设计导航栏、注册表单、样式设置以及底部链接和作者署名部分。
要创建一个蛋糕商城的注册页面，你可以按照以下步骤操作：
创建一个HTML文件，例如 register.html。
在HTML文件中添加一个导航栏，包含首页、商品分类、热销、新品、注册、登录、搜索及购物车等信息。添加一个注册表单，包括标题、注册信息（如用户名、密码、确认密码、邮箱等）和提交按钮。添加一个友情链接与作者署名的部分。使用CSS对页面进行样式设计。
<!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;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
