岁月时间轴

浏览北冥红烧鱼的博客时发现一个比较不错的内容,效果及代码如下

<!-- 主容器,带有可折叠效果和透明背景 -->
<div class='collapse-block shadow-sm collapse-block-transparent collapsed hide-border-left'>
    
    <!-- 折叠标题部分 -->
    <div class='collapse-block-title'>
        <!-- 标题文本 -->
        <span class='collapse-block-title-inner'>岁月时间轴(点击展开)</span>
        <!-- 展开/折叠图标 -->
        <i class='collapse-icon fa fa-angle-down'></i>
    </div>
    
    <!-- 折叠内容区域,初始状态为隐藏 -->
    <div class='collapse-block-body' style='display:none;'>
        <p>
            <!-- 时间轴容器 -->
            <div class='argon-timeline'>
                
                <!-- 时间节点1 -->
                <div class='argon-timeline-node'>
                    <div class='argon-timeline-time'>2222-2-2</div> <!-- 时间标记 -->
                    <div class='argon-timeline-card card bg-gradient-secondary shadow-sm'>
                        <div class='argon-timeline-title'>内容内容内容</div> <!-- 事件标题 -->
                        <div class='argon-timeline-content'>内容内容内容</div> <!-- 事件内容 -->
                    </div>
                </div>
                
                <!-- 时间节点2 -->
                <div class='argon-timeline-node'>
                    <div class='argon-timeline-time'>2222-2-2</div> <!-- 时间标记 -->
                    <div class='argon-timeline-card card bg-gradient-secondary shadow-sm'>
                        <div class='argon-timeline-title'>内容内容内容</div> <!-- 事件标题 -->
                        <div class='argon-timeline-content'>内容内容内容</div> <!-- 事件内容 -->
                    </div>
                </div>
                
                <!-- 时间节点3 -->
                <div class='argon-timeline-node'>
                    <div class='argon-timeline-time'>2222-2-2</div> <!-- 时间标记 -->
                    <div class='argon-timeline-card card bg-gradient-secondary shadow-sm'>
                        <div class='argon-timeline-title'>内容内容内容</div> <!-- 事件标题 -->
                        <div class='argon-timeline-content'>内容内容内容</div> <!-- 事件内容 -->
                    </div>
                </div>
            </div>
            <br />
        </p>
    </div>
</div>

– 文章:一条健忘鱼的碎碎念
– 作者:北冥红烧鱼
– 链接:https://blog.hongshaoyv.com/about-me/

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
Document