实现博客说说页面源码
- 2020 年 3 月 12 日
- 筆記
预览下吧：
一、HTML结构
<ul class="cbp_lvse"> <li> <time class="cbp_lvsj"> <span>07-01</span> </time> <div class="cbp_lvsekp"> <p>测试风格</p> </div> </li> </ul>
二、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 里面做出相应的修改即可。
