好看的论坛个人中心 HTML 代码示例，含 CSS 样式
以下是一个简单的论坛个人中心的 HTML 代码，包含了 CSS 样式文件：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>论坛个人中心</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div class='container'>
<header>
<h1>论坛个人中心</h1>
</header>
<nav>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>帖子</a></li>
<li><a href='#'>消息</a></li>
<li><a href='#'>个人中心</a></li>
</ul>
</nav>
<section>
<h2>个人信息</h2>
<div class='profile'>
<img src='avatar.jpg' alt='头像'>
<div class='info'>
<h3>用户名</h3>
<p>邮箱：example@example.com</p>
<p>性别：男</p>
<p>生日：1990年1月1日</p>
</div>
</div>
</section>
<section>
<h2>帖子</h2>
<div class='post'>
<h3>帖子标题</h3>
<p>帖子内容</p>
<p>发布时间：2021年1月1日</p>
</div>
</section>
<footer>
<p>版权所有 © 2021 论坛</p>
</footer>
</div>
</body>
</html>
在同一目录下创建一个名为styles.css的文件，并添加以下 CSS 样式：
/* Reset CSS */
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global Styles */
body
{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container
{
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
header
{
text-align: center;
margin-bottom: 20px;
}
nav ul
{
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li
{
margin-right: 10px;
}
nav ul li a
{
text-decoration: none;
color: #333;
padding: 5px;
}
section
{
margin-bottom: 20px;
}
h2
{
margin-bottom: 10px;
}
.profile
{
display: flex;
align-items: center;
}
.profile img
{
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 10px;
}
.info h3
{
margin-bottom: 5px;
}
.post
{
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 10px;
}
footer
{
text-align: center;
margin-top: 20px;
}
请注意在代码中更改图片路径avatar.jpg为您自己的头像图片路径。这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。
原文地址: https://www.cveoy.top/t/topic/dq1N 著作权归作者所有。请勿转载和采集!