博客心情笔记源码

写在前面

最近逛三秋博客时候偶然看到了他的说说页面，感觉跟本主题可以完美契合，然后自己就研究了一下，仅供参考学习！

心情笔记效果预览

• 07-01

  测试风格

HTML结构

<ul class="cbp_lvse"> 
    <li> <time class="cbp_lvsj"> <span>07-01</span>
    </time> 
    <div class="cbp_lvsekp"> 
    <p>测试风格</p> 
    </div> 
    </li>  
    </ul>

typecho后台编辑需要在html代码前后加上!!!

CSS结构

/*   shuo  */
body.theme-dark .cbp_lvse::before {
background: RGBA(255, 255, 255, 0.06);
}
ul.cbp_lvse {
padding:0;
}     
div class.cdp_lvsekp > li .cbp_lvsekp {
margin-bottom:0;
} 
.cbp_lvse {
margin: 30px 0 0 0;
padding: 0;
list-style: none;
position: relative;
} 
/* The line */
.cbp_lvse: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_lvse > li .cbp_lvsj {
display: block;
/*    width: 29%;  */
/*    padding-right: 110px; */
max-width:70px;
position: absolute;
}

.cbp_lvse > li .cbp_lvsj span {
display: block;
text-align: right;
}

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

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

.cbp_lvse > li:nth-child(odd) .cbp_lvsj span:last-child {
color: RGBA(60, 179, 113, 0.75);
}
div.cbp_lvsekp > p {
margin-bottom:0;
}
/* Right content */
.cbp_lvse > li .cbp_lvsekp {
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_lvsekp: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_lvse > li:nth-child(odd) .cbp_lvsekp {
background: RGBA(60, 179, 113, 0.75);
}

/* The triangle */
.cbp_lvse > li .cbp_lvsekp: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_lvse > li:nth-child(odd) .cbp_lvsekp:after {
border-right-color: RGBA(60, 179, 113, 0.75);
}
/* Media  */
@media screen and (max-width: 65.375em) {

.cbp_lvse > li .cbp_lvsj span:last-child {
    font-size: 1.2em;
}
}

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

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

.cbp_lvse > li .cbp_lvsj span {
    text-align: left;
}

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

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

.cbp_lvse > li:nth-child(odd) .cbp_lvsekp:after {
    border-right-color: transparent;
    border-bottom-color: RGBA(60, 179, 113, 0.75);
}

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

说明

这段CSS代码需要在文章编辑页面自定义字段里面添加，这里提供的是绿色，如果需要其他颜色需要替换css代码里面绿色的16进制数值，比如绿色的是60, 179, 113，可以去百度查询。然后需要修改css代码里面的.cbp_lvse .cbp_lvsekp .cbp_lvsj这三个名称后缀，修改之后要在html里面做出相应的修改即可。

特别说明

不会改请咨询本博主。
感谢三秋提供本源码，感谢Bin'BLog提供css解释。