好看的个人中心页面中Html代码
时间: 2023-10-19 11:05:13 浏览: 85
以下是一个简单的、好看的个人中心页面的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人中心</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">个人中心</div>
<nav class="menu">
<a class="menu-item" href="#">首页</a>
<a class="menu-item" href="#">设置</a>
<a class="menu-item" href="#">退出</a>
</nav>
</header>
<main class="main-content">
<section class="profile-section">
<div class="profile-picture">
<img src="avatar.jpg" alt="头像">
</div>
<div class="profile-info">
<h1 class="profile-name">用户名</h1>
<p class="profile-bio">这里是个人简介</p>
</div>
</section>
<section>
<h2 class="section-title">我的订单</h2>
<!-- 这里是订单列表 -->
</section>
<section>
<h2 class="section-title">我的收藏</h2>
<!-- 这里是收藏列表 -->
</section>
</main>
<footer class="footer">
© 2021 个人中心. All rights reserved.
</footer>
</div>
</body>
</html>
```
这个 HTML 代码包括了一个简单的、有头部、主体和底部的个人中心页面,你可以根据自己的需要进行修改和调整。注意,这里使用了一个外部样式表 `style.css`,你需要自己创建并引入它。