一个不错的时光轴源码

  • 🐙Github
  • 1914 阅读
  • 2016年10月27日
  • 0 条评论
  • 全文共89字, 阅读大约需要1分钟
  • 搜索引擎已收录

首页 / 🐙Github / 正文

AI摘要
Gemini Pro
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
反馈

HTML代码

<meta charset="utf-8">
<title>说说</title>
<link rel="stylesheet" href="https://img.aihoom.com/shuoshuo.css" type="text/css">
<!--<style type="text/css">
</style>-->


<ul class="cbp_tmtimeline">

<li> <time class="cbp_tmtime"> <span>2018-09-11</span></time>
<div class="cbp_tmlabel">
<p>截止 2018-09-11 号。总更新文章 229 篇,获得 511 条评论</p>
</div> </li>

<li> <time class="cbp_tmtime"> <span>2018-08-30</span></time>
<div class="cbp_tmlabel">
<p>博客 1年183天了</p>
</div> </li>

<li> <time class="cbp_tmtime"> <span>2018-05-06</span></time>
<div class="cbp_tmlabel">
<p>数据丢失了100多篇,有点心疼</p>
</div> </li>

</ul>
<p></p> </div>

CSS代码

/* shuo */
body.theme-dark .cbp_tmtimeline::before {
background: RGBA(255, 255, 255, 0.06);
}
ul.cbp_tmtimeline {
padding:0;
}
div class.cdp_tmlabel > li .cbp_tmlabel {
margin-bottom:0;
}
.cbp_tmtimeline {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
}
/* The line */
.cbp_tmtimeline:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: RGBA(0, 0, 0, 0.02);
left: 80px;
margin-left: 10px;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block;
/* width: 29%; */
/* padding-right: 110px; */
max-width:70px;
position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
display: block;
text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em;
color: #bdd0db;
}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
color: #9BCD9B;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: RGBA(255, 125, 73, 0.75);
}
div.cbp_tmlabel > p {
margin-bottom:0;
}
/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 45px 120px;
background: #9BCD9B;
color: #fff;
padding: 1.5em;
/* font-size: 1.2em; */
font-weight: 300;
line-height: 1.4;
position: relative;
border-radius: 5px;
transition: all 0.3s ease 0s;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
cursor:pointer;
}
.cbp_tmlabel:hover {
/* transform:scale(1.05); */
transform: translateY(-3px);
z-index: 1;
-webkit-box-shadow:0 15px 32px rgba(0,0,0,0.15) !important
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: RGBA(255, 125, 73, 0.75);
}

/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #9BCD9B;
border-width: 10px;
top: 4px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: RGBA(255, 125, 73, 0.75);
}
/* Media */
@media screen and (max-width: 65.375em) {

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.2em;
}
}

@media screen and (max-width: 47.2em) {
.cbp_tmtimeline:before {
display: none;
}

.cbp_tmtimeline > li .cbp_tmtime {
width: 100%;
position: relative;
padding: 0 0 20px 0;
}

.cbp_tmtimeline > li .cbp_tmtime span {
text-align: left;
}

.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 30px 0;
padding: 1em;
font-weight: 400;
font-size: 95%;
}

.cbp_tmtimeline > li .cbp_tmlabel:after {
right: auto;
left: 20px;
border-right-color: transparent;
border-bottom-color: #9BCD9B;
top: -20px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: transparent;
border-bottom-color: RGBA(255, 125, 73, 0.75);
}

.cbp_tmtimeline > li .cbp_tmicon {
position: relative;
float: right;
left: auto;
margin: -55px 5px 0 0px;
}
}
/* end */

将上面的CSS保存,上传到你的服务器,替换上面源码的CSS就OK了。

  • 截止 2018-09-11 号。总更新文章 229 篇,获得 511 条评论

  • 博客 1年183天了

  • 数据丢失了100多篇,有点心疼

 赞  赏

如果觉得我的文章对你有用,请随意打赏

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开  或者  扫一扫,即可进行扫码赞赏哦

原创文章,版权属于:涅槃博客 - love2wind
本文最后更新于2022年11月14日11时48分57秒,已超过617天没有更新,若内容或图片失效,请留言反馈
本文链接:https://niepan.org/archives/1.html(转载时请注明本文出处及文章链接)
作品采用:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表评论

博主 - <?php $this->author->screenName(); ?>

love2wind

记录生活,分享世界