MENU

HTML说说卡片

• 2020 年 10 月 25 日 • 信息互联,WEB#

效果展示

  • 微信关注公众号“安静先生L”

代码部分


<!--
  作者:Mr Quiet
  时间:2020-10-25
  描述:HTML
-->


<ul class="cbp_tmtimeline">
<li> <time class="cbp_tmtime"> <span>日期</span>
</time>
<div class="cbp_tmlabel">


<p>说说内容</p>


</div>
</li>
</ul>
<!--
  作者:Mr Quiet
  时间:2020-10-25
  描述:CSS
-->
  <style>
                                    /*   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  */
</style>
- - - The END - - -
  • 文章标题:HTML说说卡片
  • 文章链接:http://blog.uiuweb.cn/index.php/archives/12207.html
  • 版权所有:本文版权归 安静先生 所有,转载请注明出处!除特殊注明外 (如有侵权,请 点此联系我 )
  • 返回文章列表 文章二维码 打赏
    本页链接的二维码
    打赏二维码