帮我写个前端个人中心页面,里面包括一下内容
时间: 2023-12-30 10:04:40 浏览: 32
好的,这是一个简单的前端个人中心页面,包括以下内容:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
margin-top: 0;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #333;
}
.section {
margin-bottom: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.section h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.section p {
margin: 0;
font-size: 14px;
color: #666;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #0056b3;
cursor: pointer;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
color: #333;
}
.form-group input {
display: block;
padding: 10px;
font-size: 14px;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
.form-group button {
margin-top: 10px;
}
.alert {
padding: 10px;
margin-bottom: 10px;
color: #fff;
border-radius: 5px;
}
.alert-success {
background-color: #28a745;
}
.alert-danger {
background-color: #dc3545;
}
</style>
</head>
<body>
<div class="container">
<h1>个人中心</h1>
<div class="section">
<h2>个人信息</h2>
<p>头像:</p>
<img src="https://via.placeholder.com/150" alt="头像">
<p>昵称:小明</p>
<p>性别:男</p>
<p>年龄:26</p>
<p>个人简介:我是一名前端工程师,喜欢编程。</p>
<a href="#">修改个人信息</a>
</div>
<div class="section">
<h2>密码修改</h2>
<form>
<div class="form-group">
<label>登录密码:</label>
<input type="password" name="password">
</div>
<div class="form-group">
<label>确认密码:</label>
<input type="password" name="confirm_password">
</div>
<div class="form-group">
<button type="submit" class="button">修改密码</button>
</div>
</form>
</div>
<div class="section">
<h2>订单管理</h2>
<table>
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>价格</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>电视</td>
<td>2000元</td>
<td>已付款</td>
<td><a href="#">查看详情</a></td>
</tr>
<tr>
<td>002</td>
<td>冰箱</td>
<td>3000元</td>
<td>待付款</td>
<td><a href="#">取消订单</a></td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<h2>地址管理</h2>
<p>收货地址:</p>
<p>广东省深圳市南山区科技园南区腾讯大厦</p>
<a href="#">修改地址</a>
</div>
<div class="section">
<h2>余额充值</h2>
<form>
<div class="form-group">
<label>充值金额:</label>
<input type="text" name="amount">
</div>
<div class="form-group">
<button type="submit" class="button">充值</button>
</div>
</form>
<div class="alert alert-success">充值成功!</div>
</div>
<div class="section">
<h2>积分兑换</h2>
<form>
<div class="form-group">
<label>兑换积分:</label>
<input type="text" name="points">
</div>
<div class="form-group">
<button type="submit" class="button">兑换</button>
</div>
</form>
<div class="alert alert-danger">积分不足!</div>
</div>
</div>
</body>
</html>
```
此代码包含了个人信息展示、密码修改、订单管理、地址管理、余额充值和积分兑换等模块。请注意,此代码是一个静态页面,需要结合后端代码实现动态数据的展示和交互。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)