查看“用户:15807006/2”的源代码

<div class="container">
    <div class="joke-guide spring-theme">
        <div class="card">
        <p class="type">'''家具文案'''</p><h3 class="title" style="color: #6b8e23; font-size: 1.5em; border-bottom: 1px solid #6b8e23;">海草绿植</h3>
        <p class="game-origin">{{道具筛选|海草绿植·伏异||海草绿植·伏异|孙策·自由摆放家具|平生直气高苍穹，四海草木闻威风。孙策威名在外，连海草见了他都忍不住摇摆。|【装饰】家具打造}}</p>
        <p class="real-world-origin">《海草舞》</p>
        <p class="description">详细解释: 原歌词<br>🎵像一棵 海草海草 海草海草🎵<br>随波飘摇🎵<br>🎵海草海草 海草海草<br>🎵浪花里舞蹈</p>
        </div>
    </div>
    <div class="joke-guide spring-theme">
        <div class="card">
        <p class="type">'''家具文案'''[[海草绿植·伏异]]</p><h3 class="title" style="color: #6b8e23; font-size: 1.5em; border-bottom: 1px solid #6b8e23;">海草绿植</h3>
        <p class="game-origin">游戏梗：[[File:海草绿植·伏异.png|50px]]平生直气高苍穹，四海草木闻威风。孙策威名在外，连海草见了他都忍不住摇摆。</p>
        <p class="real-world-origin">出处：《海草舞》</p>
        <p class="description">详细解释: 原歌词<br>🎵像一棵 海草海草 海草海草🎵<br>随波飘摇🎵<br>🎵海草海草 海草海草<br>🎵浪花里舞蹈</p>
        </div>
    </div>
    <div class="joke-guide summer-theme">
    <div class="card">
        <p class="type">'''周年剧情'''</p><h3 class="title">{{颜色|#ff8c00|日一声打成糊糊}}</h3>
        <p class="game-origin">游戏出处: {{对话|许曼|唔啊啊啊贵魂救救我我救救我我我我不想被日一声打成茶叶沫沫然后死无全魂啊啊啊啊——|头像=离魂许曼-魂魂}}</p>
        <p class="real-world-origin">现实出处: 做早饭梗</p>     
        <p class="description">详细解释: 出自知乎《我十四岁的孩子不吃我做的饭，怎么办?》。</p>
    </div>
    </div>
    <div class="joke-guide autumn-theme">
      <div class="card">
        <p class="type">'''每月鸢报'''</p><h3  class="title">{{颜色|#7a4d2c|傅副官舞剑}}</h3 >
        <p class="game-origin">游戏出处: [[File:FB公告配图-202310012.jpg]]</p>
        <p class="real-world-origin">现实出处: 现实事件或地点</p>        
        <p class="description">详细解释: 这里是关于这个梗的详细解释，可以描述梗的背景故事、流行程度、使用场景等。</p>
      </div>
    </div>
    <div class="joke-guide winter-theme">
        <div class="card">
        <p class="type">'''成就文案'''</p><h3 class="title">{{颜色|#0066cc|这把高端局}}伞骨：这把高端局</h3>
        <p class="game-origin">游戏出处: 《伞骨：这把高端局》：张邈获得100次【伞影】</p>
        <p class="real-world-origin">现实出处: 现实事件或地点</p>
        <p class="description">详细解释: 这里是关于这个梗的详细解释，可以描述梗的背景故事、流行程度、使用场景等。</p>
    </div> 
    </div>
    <div class="joke-guide winter-theme">
        <div class="card">
            <h2 class="title">梗名称</h2>
            <p class="time">梗出现时间: 2023-05-01</p>
            <p class="game-origin">游戏出处: 游戏名称</p>
            <p class="real-world-origin">现实出处: 现实事件或地点</p>
            <p class="type">类型: 类型说明</p>
            <p class="description">详细解释: 这里是关于这个梗的详细解释，可以描述梗的背景故事、流行程度、使用场景等。</p>
        </div>
    </div>
</div>
{{#css:
h3 .mw-headline{
    color: #6b8e23;
}
h3.title {
    color: #7a4d2c; 
    font-size: 1.5em;
    font-weight: 900;
   border-bottom: 1px solid #7a4d2c;
   margin-top:3px;padding:0px;
}
 .game-origin, .real-world-origin, .type {
    color: #5a3b2b; 
}
.container {
    display: flex;
    justify-content: space-between; /* 水平均匀分布 */
    align-items: stretch; /* 使所有子元素高度一致 */
    gap: 20px; /* 子元素之间的间隔 */
    flex-wrap: wrap; /* 允许子元素换行 */
}

.joke-guide {
    flex: 1; /* 每个框占据相等的空间 */
    width: 25%; /* 每个框的最大宽度为容器宽度的25% */
    min-width: 240px; /* 每个框的最小宽度 */
    margin-bottom: 10px; /* 添加底部间距，防止内容重叠 */
}

.card {
    background-color: #e6f2e6; /* 默认背景色，会被具体主题覆盖 */
    border-radius: 10px;
    padding:8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
    justify-content: space-between; /* 垂直均匀分布内容 */
    height: 100%; /* 占据父元素的全部高度 */
}

.title {
    color: #6b8e23; /* 默认标题颜色，会被具体主题覆盖 */
    font-size: 1.5em;
    margin-bottom: 10px;
}

.time, .game-origin, .real-world-origin, .type {
    color: #458b00; /* 默认次要文本颜色，会被具体主题覆盖 */
    margin: 5px 0;
}

.description {
    color: #326b00; /* 默认正文颜色，会被具体主题覆盖 */
    line-height: 1.6;
}

/* 春天主题 */
.spring-theme .card {
    background-color: #e6f2e6; /* 浅绿色背景 */
}

.spring-theme .title {
    color: #6b8e23; /* 深绿色字体 */
}

.spring-theme .time, .spring-theme .game-origin, .spring-theme .real-world-origin, .spring-theme .type {
    color: #458b00; /* 更深的绿色，用于次要文本 */
}

.spring-theme .description {
    color: #326b00; /* 最深的绿色，用于正文 */
}

/* 夏天主题 */
.summer-theme .card {
    background-color: #fff6e6; /* 浅黄色背景 */
}

.summer-theme .title {
    color: #ff8c00; /* 橙色字体 */
}

.summer-theme .time, .summer-theme .game-origin, .summer-theme .real-world-origin, .summer-theme .type {
    color: #e87c03; /* 更深的橙色，用于次要文本 */
}

.summer-theme .description {
    color: #c75c00; /* 最深的橙色，用于正文 */
}

/* 秋天主题 */
.autumn-theme .card {
    background-color: #f5e1d0; /* 栗色暖色调背景 */
}

.autumn-theme .title {
    color: #7a4d2c; /* 深栗色字体 */
}

.autumn-theme .time, .autumn-theme .game-origin, .autumn-theme .real-world-origin, .autumn-theme .type {
    color: #5a3b2b; /* 更深的栗色，用于次要文本 */
}

.autumn-theme .description {
    color: #442d20; /* 最深的栗色，用于正文 */
}

/* 冬天主题 */
.winter-theme .card {
    background-color: #e6f2ff; /* 浅蓝色背景 */
}

.winter-theme .title {
    color: #0066cc; /* 深蓝色字体 */
}

.winter-theme .time, .winter-theme .game-origin, .winter-theme .real-world-origin, .winter-theme .type {
    color: #004d99; /* 更深的蓝色，用于次要文本 */
}

.winter-theme .description {
    color: #003366; /* 最深的蓝色，用于正文 */
}
h1 .mw-editsection, h2 .mw-editsection, h3 .mw-editsection, h4 .mw-editsection, h5 .mw-editsection {
    display: block;
}
/* 手机端适配 */
@media (max-width: 768px) {
    .joke-guide {
        flex-basis: 100%; /* 每个框占据100%的宽度 */
        max-width: 100%; /* 最大宽度为100% */
        min-width: 100%; /* 最小宽度为100% */
    }
}
}}