<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>角色扮演论坛</title>
<!-- 引入图标库 -->
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
<!-- 引入谷歌字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<style>
/* 全局样式重置 */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 笔记：设计个人资料时，"kalam"字体适合签名 */
/* 自定义属性定义 */
:root {
--mobile-layout-margin: 0.75rem; /* 移动端边距 */
--layout-margin: 1.5rem; /* 布局边距 */
--inside-margin: 1rem; /* 内部边距 */
--small-margin: 0.5rem; /* 小边距 */
--panel-bordering: 1px solid var(--border-color); /* 面板边框 */
--header-img: url(https://gatecrashers.fan/wp-content/uploads/2024/01/Ultimate-Spider-Man.jpg); /* 头部背景图 */
--guidebook-img: url(https://cdn11.bigcommerce.com/s-gyhhtwx4/images/stencil/1280x1280/products/4330/13562/079346134212_puzzle_1500__20722.1689089077.jpg?c=2); /* 指南背景图 */
--dev-img-1: url(https://cdn.imgchest.com/files/7pjcqzmprg7.png); /* 开发区域图片1 */
--dev-img-2: url(https://cdn.imgchest.com/files/4nec8go6ax4.png); /* 开发区域图片2 */
--dev-img-3: url(https://cdn.imgchest.com/files/yxkczbx9aw7.png); /* 开发区域图片3 */
--small-font: 0.8rem; /* 小字体 */
--main-font: 'Roboto', Verdana, sans-serif; /* 主字体 */
--font-1: "Kanit", serif; /* 字体1 */
--font-2: "Comic Neue", serif; /* 字体2 */
--handwritten-1: "Kalam", serif; /* 手写字体 */
--box-shadow-width: 0.5rem; /* 阴影宽度 */
--box-shadow: var(--box-shadow-width) var(--box-shadow-width) var(--accent); /* 阴影效果 */
--triangle-size: 12px; /* 三角形大小 */
--animation-timing: 150ms; /* 动画时间 */
--hamburger-bar-gap: 4px; /* 汉堡菜单条间距 */
--hamburger-bar-height: 4px; /* 汉堡菜单条高度 */
--hamburger-bar-width: 32px; /* 汉堡菜单条宽度 */
--hamburger-height: calc(var(--hamburger-bar-height) * 3 + var(--hamburger-bar-gap) * 2); /* 汉堡菜单总高度 */
}
/* 明亮主题 */
[data-theme="light"] {
--bg: #efefef; /* 背景色 */
--border-color: #888; /* 边框颜色 */
--font-color: #111111; /* 字体颜色 */
--font-color-light: #555555; /* 浅字体颜色 */
--accent-light: #a0d8e6; /* 浅强调色 */
--accent: #103d65; /* 强调色 */
}
/* 暗黑主题 */
[data-theme="dark"] {
--bg-1: #1e2427; /* 背景色 */
--accent-light: #a0d8e6; /* 浅强调色 */
--accent: #349db1; /* 强调色 */
}
/* 基础样式 */
body {
background-color: var(--accent-light);
font-size: 13px;
position: relative;
color: var(--font-color);
font-family: var(--main-font);
}
/* 背景点阵图案 */
body::before {
content: '';
background-image: radial-gradient(
circle at center,
black 0.25rem,
transparent 0
), radial-gradient(circle at center, black 0.25rem, transparent 0);
background-size: 1.3rem 1.3rem;
background-position: 0 0, 0.65rem 0.65rem;
-webkit-mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0));
mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0));
opacity: 0.1;
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: -1;
}
/* 无样式输入框 */
.input-bare {
background-color: transparent;
border: 0;
appearance: none;
outline: 0;
padding: 0;
margin: 0;
font-size: 1rem;
}
/* 链接样式 */
a {
color: var(--accent);
font-family: var(--font-2);
font-style: italic;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:focus {
color: var(--font-color);
text-decoration: underline;
}
/* 标题样式 */
h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a {
font-family: var(--font-1);
font-weight: 700;
text-transform: uppercase;
font-style: italic;
line-height: 80%;
}
/* 布局容器 */
#wrapper,
nav,
header {
width: min(100%, 1180px);
margin: auto;
}
#wrapper {
background-color: var(--bg);
border: var(--panel-bordering);
margin-top: -0.25rem;
padding: var(--mobile-layout-margin);
}
#innerwrapper {
margin: auto;
}
main {
width: 100%;
margin-top: var(--layout-margin);
}
/*******************************
导航菜单
*******************************/
/* 汉堡菜单标签 */
.label-hamburger {
--x-width: calc(var(--hamburger-height) * 1.41421356237);
width: max-content;
display: flex;
flex-direction: column;
gap: var(--hamburger-bar-gap) 0;
position: fixed;
top: calc(var(--inside-margin) - 3px);
right: var(--inside-margin);
z-index: 999;
cursor: pointer;
}
/* 汉堡菜单三条线 */
.label-hamburger::before,
.label-hamburger::after,
.label-hamburger input {
content: "";
background-color: #000;
width: var(--hamburger-bar-width);
height: var(--hamburger-bar-height);
transform-origin: left center;
transition: var(--animation-timing) ease-out;
border-radius: 0!important;
}
.label-hamburger input {
pointer-events: none;
}
/* 汉堡菜单选中状态 */
.label-hamburger input:checked {
opacity: 0;
width: 0;
}
.label-hamburger:has(input:checked)::before {
width: var(--x-width);
rotate: 45deg;
translate: 0 calc(var(--hamburger-bar-height) / -2);
}
.label-hamburger:has(input:checked)::after {
width: var(--x-width);
rotate: -45deg;
translate: 0 calc(var(--hamburger-bar-height) / 2);
}
/* 导航栏 */
nav {
background-color: var(--bg);
border: var(--panel-bordering);
height: 45px;
padding: 0;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 998;
}
nav a {
color: var(--font-color);
text-decoration: none;
}
nav a:hover,
nav a:focus {
color: var(--accent);
}
/* 用户信息区域 */
nav .nav-user {
background-color: var(--accent-light);
width: 75%;
height: 100%;
-webkit-clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 1.5rem!important;
padding: 0.5rem 1rem;
}
nav .nav-user div {
display: flex;
align-items: center;
justify-content: flex-start;
}
nav .nav-user a {
margin: 0 0.5rem;
text-align: right;
font-family: var(--font-1);
font-weight: normal;
font-size: 1rem;
}
nav .nav-user img {
width: 25px;
aspect-ratio: 1/1;
border: var(--panel-bordering);
object-fit: cover;
margin-left: 8px;
}
/* 导航菜单列表 */
nav ul {
background-color: var(--bg);
width: 100%;
height: calc(100vh + 62px);
display: flex!important;
flex-direction: column;
justify-content: flex-start;
align-items: center;
list-style-type: none!important;
gap: var(--inside-margin);
font-size: 1rem;
flex-basis: 100%;
translate: 0 -145vh;
position: relative;
padding-top: 5rem;
transition: var(--animation-timing) ease-out;
opacity: 0;
}
/* 菜单展开状态 */
.label-hamburger:has(input:checked) + nav ul {
translate: 0 -62px;
opacity: 1;
}
nav ul li {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: var(--inside-margin);
}
/* 菜单项悬停效果 */
nav ul li:hover::before,
nav ul li:focus::before {
content: '';
background-color: var(--accent-light);
width: 100%;
height: 61px;
position: absolute;
top: -5px;
left: 0;
z-index: -1;
transform: skew(-5deg);
}
/*******************************
页眉区域
*******************************/
header {
background-color: var(--accent-light);
border: var(--panel-bordering);
height: 500px;
padding: var(--inside-margin);
position: relative;
z-index: 1;
}
/* 头部背景效果 */
header::before {
content: '';
background-color: var(--accent-light);
background-image: var(--header-img);
background-size: cover;
background-blend-mode: luminosity;
background-position: center;
opacity: 0.1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/* 头部信息容器 */
header .header-info {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction: column;
float: right;
}
/* 标题区域 */
header .header-title {
width: 100%;
padding: var(--inside-margin);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
text-transform: uppercase;
}
header .header-title a h1 {
color: var(--font-color);
font-family: var(--font-1);
font-size: 2rem;
}
header .header-title a:hover h1,
header .header-title a:focus h1 {
color: var(--accent);
}
header .header-title h3 {
font-family: var(--font-2);
font-weight: 700;
font-style: italic;
}
/* 标题装饰效果 */
header .header-title::before {
content: '';
background-color: var(--accent);
width: 100%;
height: 100%;
position: absolute;
top: var(--box-shadow-width);
left: var(--box-shadow-width);
transform: skew(-5deg);
z-index: -1;
}
header .header-title::after {
content: '';
background-color: var(--bg);
border: var(--panel-bordering);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: skew(-5deg);
z-index: -1;
}
/* 工作人员展示 */
header .header-staff {
width: auto;
margin-top: var(--inside-margin);
gap: var(--inside-margin);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
left: -0.5rem;
}
header .header-staff a {
border: var(--panel-bordering);
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
transform: skew(-5deg);
overflow: hidden;
}
header .header-staff img {
width: 55px;
height: 55px;
object-fit: cover;
transform: skew(5deg);
}
header .header-staff img:hover,
header .header-staff img:focus {
filter: grayscale(1);
transform: scale(120%) skew(5deg);
}
/*******************************
导航路径
*******************************/
#navigation-tree {
border: var(--panel-bordering);
padding: var(--inside-margin) var(--small-margin);
font-size: var(--small-font);
text-transform: uppercase;
display: flex;
justify-content: space-between;
}
#navigation-tree .nav-tree-buttons {
display: none;
}
#navigation-tree .nav-tree-buttons a {
background-color: var(--bg);
border: var(--panel-bordering);
padding: var(--small-margin);
margin-left: var(--small-margin);
}
#navigation-tree .nav-tree-buttons a:hover,
#navigation-tree .nav-tree-buttons a:focus {
background-color: var(--accent-light);
}
/*******************************
分类区域
*******************************/
.category {
margin-top: var(--layout-margin);
}
/* 分类标题 */
.category-header {
background-color: var(--accent-light);
border: var(--panel-bordering);
width: max-content;
padding: var(--inside-margin) var(--layout-margin);
margin-bottom: -1.5rem;
font-size: 1rem;
font-family: var(--font-2);
font-style: italic;
font-weight: 700!important;
position: relative;
z-index: 2;
}
/* 基础分类布局 */
.category-basics {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* 论坛板块样式 */
.forum {
background-color: var(--bg);
border: var(--panel-bordering);
padding: var(--inside-margin);
position: relative;
}
/*******************************
第一个分类区域
(指南、新闻、服务)
*******************************/
.guidebook,
.news,
.services {
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
}
.guidebook,
.news-services {
width: 100%;
}
.guidebook {
align-items: center;
}
/* 指南背景效果 */
.guidebook::before {
content: '';
background-color: var(--bg);
background-image: var(--guidebook-img);
background-blend-mode: luminosity;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.1;
filter: contrast(50%);
z-index: -1;
}
.guidebook h3 {
font-size: 2.5rem;
margin: var(--inside-margin) 0;
}
.guidebook p {
background-color: var(--bg);
border: var(--panel-bordering);
width: 100%;
padding: var(--inside-margin);
position: relative;
font-size: var(--small-font);
}
/* 指南链接 */
.guidebook-links {
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--inside-margin);
margin: var(--inside-margin) 0;
}
.guidebook-links a {
background-color: var(--bg);
border: var(--panel-bordering);
padding: var(--small-margin) var(--inside-margin);
}
.guidebook-links a:hover,
.guidebook-links a:focus {
background-color: var(--accent-light);
}
/* 新闻服务区域 */
.news-services {
margin-top: var(--inside-margin);
position: relative;
color: var(--font-color-light);
}
.news h4 {
font-size: 1rem;
text-transform: uppercase;
}
.news .news-details {
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-around;
font-size: var(--small-font);
text-transform: uppercase;
}
.news h3 {
margin: 0.5rem 0;
font-size: 1.75rem;
text-align: center;
}
.news h5 {
text-transform: uppercase;
font-weight: normal;
}
/* 会员服务区域 */
.services {
margin-top: var(--inside-margin);
}
.services h3 {
font-size: 2rem;
}
.services-last {
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--small-margin);
font-size: var(--small-font);
text-transform: uppercase;
}
.services-last img {
border: var(--panel-bordering);
width: calc(40px + var(--small-margin));
height: calc(40px + var(--small-margin));
object-fit: cover;
margin-right: var(--inside-margin);
}
.services-last div {
border: var(--panel-bordering);
padding: var(--small-margin);
position: relative;
color: var(--font-color-light);
}
/* 对话气泡三角形 */
.services-last div::before {
content: '';
background-color: transparent;
border-right: var(--triangle-size) solid var(--border-color);
border-bottom: var(--triangle-size) solid transparent;
border-top: var(--triangle-size) solid transparent;
width: 0;
height: 0;
position: absolute;
top: calc(var(--triangle-size) - 1px);
right: calc(100%);
}
.services-last div::after {
content: '';
background-color: transparent;
border-right: calc(var(--triangle-size) - 1px) solid var(--bg);
border-bottom:calc(var(--triangle-size) - 1px) solid transparent;
border-top: calc(var(--triangle-size) - 1px) solid transparent;
width: 0;
height: 0;
position: absolute;
top: calc(var(--triangle-size));
right: calc(100%);
}
/*******************************
第二个分类区域
(开发)
*******************************/
.category-dev {
display: flex;
align-items: center;
justify-content: center;
gap: var(--inside-margin);
}
.category-dev .forum {
height: 250px;
flex-grow: 1;
}
/* 开发区域图片 */
.category-dev-img {
background-color: var(--bg);
background-blend-mode: luminosity;
border: var(--panel-bordering);
width: 100px;
height: 250px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
display: none;
position: relative;
filter: contrast(75%);
}
.category-dev-img-1 {
background-image: var(--dev-img-1);
}
.category-dev-img-2 {
background-image: var(--dev-img-2);
}
.category-dev-img-3 {
background-image: var(--dev-img-3);
}
/* 最后帖子样式 */
.last-post {
max-width: 40ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.last-post-img:hover,
.last-post-img:focus {
filter: grayscale(100);
}
/*******************************
媒体查询 - 响应式设计
*******************************/
/* 中等屏幕(平板)样式 */
@media (min-width: 750px) {
nav {
height: 62px;
}
nav .nav-user {
width: 55%;
}
nav .nav-user a {
margin: 0 1rem;
font-size: 1.4rem;
}
nav .nav-user img {
width: 45px;
}
.label-hamburger {
top: calc(var(--inside-margin) + 5px);
}
header .header-title {
width: 98%;
flex-direction: row;
margin: 0 var(--box-shadow-width);
}
header .header-title h1 {
font-size: 2.5rem;
}
header .header-staff a {
width: 65px;
height: 65px;
}
header .header-staff img {
width: 75px;
height: 75px;
}
.guidebook h3 {
font-size: 3.5rem;
}
.news-services {
display: flex;
gap: var(--inside-margin);
}
.news,
.services {
width: 50%;
}
.services {
margin-top: 0;
}
.last-post {
max-width: 30ch;
}
.main-profile_top-contain {
flex-direction: row;
}
.main-profile_top-contain .avatar {
flex: 0.5;
justify-content: flex-end;
}
.main-profile_top-contain img {
border: var(--panel-bordering);
width: 250px;
height: 450px;
}
}
/* 大屏幕(桌面)样式 */
@media (min-width: 1080px) {
body {
font-size: 16px;
}
/* 隐藏汉堡菜单 */
.label-hamburger {
display: none;
}
#wrapper {
padding: var(--layout-margin);
}
/* 导航栏布局调整 */
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
width: 60%;
height: 60px;
padding: 0 1rem;
align-items: center;
justify-content: flex-end;
flex-direction: row;
translate: 0 0;
opacity: 1;
font-size: 1rem;
gap: 0 0;
}
nav ul li {
height: 100%;
padding: 0;
}
nav ul li a {
height: 100%;
padding: 0 var(--inside-margin);
display: flex;
align-items: center;
}
nav ul li:hover::before,
nav ul li:focus::before {
top: -1px;
}
/* 头部布局调整 */
header .header-info {
width: 75%;
}
/* 显示导航树按钮 */
#navigation-tree .nav-tree-buttons {
display: block;
}
/* 隐藏桌面版不需要的元素 */
.nav-hide-desk {
display: none;
}
/* 指南区域调整 */
.guidebook {
width: 60%;
align-self: stretch;
position: relative;
align-items: flex-start;
}
.guidebook-links {
justify-content: flex-start;
gap: 0 var(--inside-margin);
}
.guidebook h3 {
font-size: 4rem;
}
.guidebook p {
width: 88%;
}
/* 新闻服务区域调整 */
.news-services {
width: 40%;
height: 100%;
padding-left: var(--inside-margin);
margin-top: 0;
display: block;
}
.news {
width: 120%;
height: calc(55% - var(--inside-margin));
box-shadow: var(--box-shadow);
position: relative;
top: var(--inside-margin);
left: calc(-20% - var(--box-shadow-width));
z-index: 2;
}
.news h3 {
font-size: 2.25rem;
}
.news .news-details {
width: 50%;
}
.services {
width: 100%;
margin-top: 2rem;
}
.last-post {
max-width: 40ch;
}
/* 显示开发区域图片 */
.category-dev-img {
display: block;
}
/* 个人资料顶部容器 */
.main-profile_top-contain .avatar {
flex: 0.65;
-webkit-clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
}
}
</style>
</head>
<body>
<!-- 汉堡菜单 -->
<label class="label label-hamburger">
<input type="checkbox" class="input-bare" />
</label>
<!-- 导航菜单 -->
<nav>
<div class="nav-user">
<div>
<img src="https://64.media.tumblr.com/9e82960e3a49d493f271b8cfaf333b5b/de9f381ae561706d-05/s1280x1920/648f62048c4237c534af891feac7ad6e5d5f127f.jpg" alt="个人资料图片">
<a href="" title="用户">
<h4>TENG YUAN</h4>
</a>
</div>
<select name="accounts"></select>
</div>
<ul>
<li><a href="" title="设置">设置</a></li>
<li><a href="" title="消息">消息</a></li>
<li><a href="" title="提醒">提醒</a></li>
<li class="nav-hide-desk"><a href="index.php?act=Search" title="搜索">搜索</a></li>
<li class="nav-hide-desk"><a href="index.php?act=Members" title="成员">成员</a></li>
<li><a href="" title="版主控制面板">版主面板</a></li>
<li><a href="" title="管理员控制面板">管理员面板</a></li>
<li><a href="" title="登出">登出</a></li>
</ul>
</nav>
<!-- 主内容容器 -->
<div id="wrapper">
<header>
<div class="header-info">
<div class="header-title">
<a href="#" title="首页">
<h1>在此插入角色扮演名称</h1>
</a>
<h3>建立于 2025</h3>
</div>
<div class="header-staff">
<a href="" title="工作人员">
<img src="https://64.media.tumblr.com/c111a2280586493188a89f0dcb74d4ee/e447aa3ce1a1a139-81/s500x750/4c6c7f0595bcb856fd0dcd3477c9a4300eda2200.png" alt="工作人员">
</a>
<a href="" title="工作人员">
<img src="https://64.media.tumblr.com/c111a2280586493188a89f0dcb74d4ee/e447aa3ce1a1a139-81/s500x750/4c6c7f0595bcb856fd0dcd3477c9a4300eda2200.png" alt="工作人员">
</a>
<a href="" title="工作人员">
<img src="https://64.media.tumblr.com/c111a2280586493188a89f0dcb74d4ee/e447aa3ce1a1a139-81/s500x750/4c6c7f0595bcb856fd0dcd3477c9a4300eda2200.png" alt="工作人员">
</a>
<a href="" title="工作人员">
<img src="https://64.media.tumblr.com/c111a2280586493188a89f0dcb74d4ee/e447aa3ce1a1a139-81/s500x750/4c6c7f0595bcb856fd0dcd3477c9a4300eda2200.png" alt="工作人员">
</a>
</div>
</div>
</header>
<div id="innerwrapper">
<main>
<!-- 导航路径 -->
<div id="navigation-tree">
<div class="nav-tree">
首页
</div>
<div class="nav-tree-buttons">
<a href="index.php?act=Search" title="搜索">搜索</a>
<a href="index.php?act=Members" title="成员">成员</a>
</div>
</div>
<!-- 基础分类 -->
<div class="category">
<h2 class="category-header">
基础...
</h2>
<div class="category-basics">
<div class="forum guidebook">
<h3>
<a href="" title="指南书">
指南书
</a>
</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, molestiae autem. Sed quis dolorum facilis, sapiente qui, a cum quia eveniet nostrum voluptatibus, tenetur iusto.
</p>
<div class="guidebook-links">
<a href="">规则</a>
<a href="">注册</a>
<a href="">前提</a>
<a href="">其他</a>
</div>
</div>
<div class="news-services">
<div class="forum news">
<h4>
<a href="" title="每日星球">
每日 <i class="ph ph-planet"></i> 星球
</h4>
</a>
<div class="news-details">
<p>第 N°01 期</p>
<p>2025年1月15日</p>
</div>
<h3>
<a href="" title="公告">
超人从坟墓中归来!
</a>
</h3>
<h5>
作者 <a href="" title="露易丝·莱恩">露易丝·莱恩</a>
</h5>
</div>
<div class="forum services">
<h3>
<a href="" title="会员服务">
会员服务
</a>
</h3>
<div class="services-last">
<img src="https://64.media.tumblr.com/f874e2d85797b8859ab056dc7e0bb682/de9f381ae561706d-d4/s640x960/44e13e9f0cd3bbe5e277ed0622ce4f5f8c8f029d.jpg" alt="个人资料">
<div>
<p><a href="" title="最后帖子">最后帖子</a> 由 <a href="" title="个人资料">神奇蜘蛛侠</a></p>
<p>2025年1月16日</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 开发分类 -->
<div class="category">
<h2 class="category-header">
开发...
</h2>
<div class="category-dev">
<div class="forum">
<h3>
<a href="">角色认领</a>
</h3>
</div>
<div class="forum">
<h3>
<a href="">请求</a>
</h3>
</div>
<div class="category-dev-img category-dev-img-1"></div>
<div class="category-dev-img category-dev-img-2"></div>
<div class="category-dev-img category-dev-img-3"></div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
index.html