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

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

本文共721个字,预计阅读时间需要2分钟。


前言

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

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

样式展示

这是一个二级标题

这是一个三级标题

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

 

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样式 就好啦~

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

 

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

 

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

本文最后更新于2019年10月18日,已超过 1 个月没更新!

本文首发于320印象,欢迎转载,但是必须保留本文的署名320印象(包含链接)。如您有任何商业合作或者授权方面的协商,请给我留言:admin@mail.320nle.com作者:静海流沙, 转载或复制请以 超链接形式 并注明出处 320印象
原文地址:《仿 GIT 主题 H2 H3 二级标题和三级标题,H2标签溢出布局》 发布于2019-10-18

分享到:
赞(0) 打赏
您阅读这篇文章共花了: 0小时00分00秒

评论 抢沙发

6 + 2 =


请作者喝杯饮料吧~

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录