WordPress添加时间轴

为自己的wordpress增加时间轴功能

1.在主题添加额外CSS代码:

#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid yellowgreen;font-size: 18px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: pink;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid pink;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: green;}
#teamnewslist li:hover b{color: green;}

2.新建页面,开启文本编辑模式或者添加HTML模块,填写以下代码:

</ol>
 <ol><h3>2019</h3>
  <li><b>2019年12月27日</b><a href="https://joessem.com/?p=237">PyQt5+poplib+smtplib+python3.6邮件客户端Demo</a></li>
  <li><b>2019年12月26日</b><a href="https://joessem.com/?p=230">Scapy+PyQt5+Python3.6实现网络嗅探器Demo</a></li>

    <li><b>2019年12月24日</b><a href="https://joessem.com/?p=205">局域网IP多播</a></li>

 <li><b>2019年12月22日</b><a href="https://joessem.com/?p=126">2019难忘时刻</a></li>

<li><b>2019年12月22日</b><a href="https://joessem.com/?p=112">Tracert 与 Ping程序设计与实现(二)</a></li>

<li><b>2019年12月20日</b><a href="https://joessem.com/?p=99">Tracert 与 Ping程序设计与实现(一)</a></li>

 <li><b>2019年12月19日</b><a href="https://joessem.com/?p=76">2019年度总结</a></li>

<li><b>2019年12月16日</b><a href="https://joessem.com/?p=62">网络聊天程序的设计与实现</a></li>

<li><b>2019年12月04日</b><a href="https://joessem.com/?p=6">开启新征程!</a></li>
 </ol>
</div>

当需要添加归档时只需在<ol>中添加一段:

<li><b>20xx年xx月xx日</b><a href="xxxxxxx">xxxxxx</a></li>

3.效果展示

暂无评论

发送评论 编辑评论


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