个人中心页面html代码素材
时间: 2023-11-03 11:05:02 浏览: 41
以下是个人中心页面的基本 HTML 代码素材:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人中心</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" 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>
<li><a href="#">退出</a></li>
</ul>
</nav>
</header>
<main>
<section class="user-info">
<h2>个人信息</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="JohnDoe">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="johndoe@example.com">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<button type="submit">保存</button>
</form>
</section>
<section class="orders">
<h2>订单信息</h2>
<table>
<thead>
<tr>
<th>订单号</th>
<th>商品名称</th>
<th>数量</th>
<th>总价</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>iPhone X</td>
<td>1</td>
<td>8,888.00 元</td>
<td>已发货</td>
</tr>
<tr>
<td>002</td>
<td>iPad Pro</td>
<td>2</td>
<td>13,776.00 元</td>
<td>已完成</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>©2021 My Website</p>
</footer>
</body>
</html>
```
以上代码包含了一个简单的个人中心页面结构,包括页面头部、用户信息和订单信息两个部分以及页面底部。你可以根据需求进行修改和美化。同时,注意要引入样式表 `style.css`,以保证页面样式的一致性。