高级一点的个人中心页面html
时间: 2023-08-24 16:05:08 浏览: 58
下面是一个高级的个人中心页面的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人中心</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>个人中心</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">设置</a></li>
<li><a href="#">退出</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>个人资料</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone"><br><br>
<button type="submit">保存</button>
</form>
</section>
<section>
<h2>订单历史</h2>
<table>
<thead>
<tr>
<th>订单号</th>
<th>日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>2021-01-01</td>
<td>已完成</td>
</tr>
<tr>
<td>67890</td>
<td>2021-02-01</td>
<td>已取消</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>© 2021 ABC公司</p>
</footer>
</body>
</html>
```
这个页面包括一个标题和导航栏,以及两个部分:个人资料和订单历史。个人资料部分包括一个表单,让用户输入他们的姓名、电子邮件和电话,并提供一个保存按钮。订单历史部分包括一个表格,列出用户的历史订单。页面底部有一个版权声明。该页面的外观可以使用CSS样式表进行自定义。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)