仿 GIT 主题 H2 H3 二级标题和三级标题,H2标签溢出布局

前言

应群友要求,于是抄了 GIT 主题的 H2 H3,它的主要特点是H2标题的左边框是溢出的。

话不多说,3 2 0,我们开始吧~

样式展示

这是一个二级标题

这是一个三级标题

 

CSS代码如下

.single-content.wow.fadeInUp.animated {
     overflow: visible;
}

/*H2*/
.article-content h2{
    border-bottom: 1px solid #00a67c;
    border-left: 8px solid #00a67c;
    margin: 20px -20px 20px -24px;
    padding: 10px 20px 9px 10px;
    background-color: #fbfbfb;
    font-weight: 700;
    line-height: 1.125rem;
}
@media (max-width: 720px){
.article-content h2{
border-left: 4px solid #00a67c;
}

.article-content h3{
    border-left: 2px solid #0095ff;
    background-color: #fbfbfb;
    padding: 5px 0 5px 20px;
    font-weight: 700;
    margin: 5px 0;
    line-height: 2.1875rem;
    text-rendering: optimizelegibility;
}

将上述代码,复制粘贴到主题后台的 自定义代码>自定义CSS样式 就好啦~

 

如果你不是和博主一样的主题,其实也没有关系啦,一般都是通用的。如果不可行,可以评论区留言反馈噢~

 

好了,这次教程就到这里啦
影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元
我们下次见

本文最后更新于2020年1月10日,已超过 8 个月没更新!
收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。 如有侵权,联系 admin#mail.320nle.com
320印象 » 仿 GIT 主题 H2 H3 二级标题和三级标题,H2标签溢出布局

发表评论