Loading... 为什么会有这个,因为我想要这个功能。 年纪大了,不想搞那么复杂。 就查了很多帖子文章发现这个也挺好。 当然有插件之类的,但是有点小贵,主要是还都是英文。 废话不多说了,上效果图和代码。代码可以自己修改,稍微有点基础就可以试着调。 效果图: <span style="color: #ff0000;"><strong><a href="https://www.xyzbz.cn/weiyu" target="_blank" style="color: #ff0000;" rel="noopener">页面展示</a></strong></span>  代码如下: ``` <pre class="corepress-code-pre"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>timeline</title> <style> .timeline-small { max-width: 350px; max-height: 630px; overflow: hidden; margin: 30px auto 0; box-shadow: 0 0 40px #a0a0a0; font-family: 'Open Sans', sans-serif; } .timeline-small-body ul { padding: 1em 0 0 2em; margin: 0; list-style: none; position: relative; } .timeline-small-body ul::before { content: ' '; height: 100%; width: 5px; background-color: #d9d9d9; position: absolute; top: 0; left: 2.4em; z-index: -1; } .timeline-small-body li div { display: inline-block; margin: 1em 0; vertical-align: top; } .timeline-small-body .bullet { width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; background: #fff; z-index: 1; margin-right: 1rem; margin-top: 7%; } .timeline-small-body .bullet.pink { background-color: hotpink; border: 3px solid #F93B69; } .timeline-small-body .bullet.green { background-color: lightseagreen; border: 3px solid #B0E8E2; } .timeline-small-body .bullet.blue { background-color: aquamarine; border: 3px solid cadetblue; } .timeline-small-body .bullet.orange { background-color: salmon; border: 3px solid #EB8B6E; } .timeline-small-body .date { width: 23%; font-size: 0.75em; padding-top: 0.40rem; padding-right: 2rem; } .timeline-small-body .desc { width: 50%; } .timeline-small-body h3 { font-size: 0.9em; font-weight: 400; margin: 0; } .timeline-small-body h4 { margin: 0; font-size: 0.7em; font-weight: 400; color: #808080; } </style> ``` `` 以上内容参考自CSDN 版权声明 ▶ 本网站名称:网友小宋 ▶ 本文链接:https://www.xyzbz.cn/archives/525/ ▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。 ▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!! 最后修改:2022 年 04 月 25 日 © 转载自他站 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏
11 条评论
代码拿走了
自己改改哈。
技术人才,值得学习。
这个是跟csdn上看到的,最近再调另外一种微语功能
厉害哦啊
欢迎大佬大驾光临。[f=huaixiao]
简介好看实用很不错
最近在研究研究,有没有新的办法可以实现,这个显示有时候有问题。[f=xiaoku]
加油 我的typecho站点自带 我也没用过 有个记录很不错
不想折腾了,从wp换到typecho太麻烦了,我树莓派搭建的typecho
没必要换来换去的