🌟靓卡🏧银行🧩道具🏅勋章🥊猜拳👛宝箱🏧黑市💹抽奖💝捐助
✨活动💥客户端📢推广🆘帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 靓铺
  • 名堂
    • 立即注册
    飞流论坛»社区 › 网络中心 › 技术教程 › 子比主题-文章标题H1-H6标签样式美化（共十个样式风格） ...
    返回列表 发布新帖
    查看: 78|回复: 0

    [代码技巧] 子比主题-文章标题H1-H6标签样式美化（共十个样式风格）

    [复制链接]
    社区贡献

    5

    主题

    1

    回帖

    458

    积分

    等级头衔
    Icon组别 : 菜鸟
    Icon等级 :

    积分成就
       钻石 : -8 颗
       贡献 : 704 点
       金币 : 15 枚
    Icon在线时间 : 77 小时
    Icon注册时间 : 2025-7-12
    Icon最后登录 : 2025-9-9

    荣誉勋章
    飞粉_hVoqn9Sp
    UID:11003
    暂无靓号,点击前往开通
     发表于 2025-9-7 22:18:42 飞流灵通APP | 查看全部 |阅读模式 北京

    资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    很久没逛子比主题了，今天无意间看到一个很不错的标题风格样式，优雅又点明重点，提高了阅读体验，后再深挖原来是腾飞老哥的原创。
    在此声明该代码来自腾飞博客，也是个美化老玩家了，向他致敬
    喜欢哪个样式自己将该哪一款丢到：子比主题–>>自定义CSS样式即可。
    第一款风格
    第一款就是腾飞自己做的浮动圆点样式，不过也是借鉴别人的站，还是不错的，这款写了H1-H3标题样式，样式自己看图片吧！
    1000223091.webp 
    /* 腾飞博客第二款标题样式美化 */
    

  • .article-content > .wp-posts-content > h2,
    

  • .article-content .wp-posts-content > h1,
    

  • .article-content .wp-posts-content > h3 {
    

  •     z-index: 1;
    

  • }
    


  • 

  • .article-content > .wp-posts-content > h2:hover::before,
    

  • .article-content > .wp-posts-content > h2:hover::after,
    

  • .article-content > .wp-posts-content > h1:hover::before,
    

  • .article-content > .wp-posts-content > h1:hover::after,
    

  • .article-content > .wp-posts-content > h3:hover::before,
    

  • .article-content > .wp-posts-content > h3:hover::after {
    

  •     transform: scale(1.2) !important;
    

  •     transform-origin: center !important;
    

  •     transition: 0.4s;
    

  • }
    


  • 

  • .article-content .wp-posts-content h2::before,
    

  • .article-content .wp-posts-content h1::before,
    

  • .article-content .wp-posts-content h3::before {
    

  •     box-shadow: none !important;
    

  •     opacity: 0.6 !important;
    

  •     border-radius: 50% !important;
    

  •     top: -5px !important;
    

  •     left: -10px !important;
    

  •     z-index: 1;
    

  • }
    


  • 

  • .article-content .wp-posts-content h1::before,
    

  • .article-content .wp-posts-content h1::after {
    

  •     background: linear-gradient(#409eff, transparent) !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h2::before,
    

  • .article-content .wp-posts-content h2::after {
    

  •     background: linear-gradient(#00ff62, transparent) !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h3::before,
    

  • .article-content .wp-posts-content h3::after {
    

  •     background: linear-gradient(#ff9800, transparent) !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h1::before {
    

  •     height: 35px !important;
    

  •     width: 35px !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h2::before {
    

  •     height: 30px !important;
    

  •     width: 30px !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h3::before {
    

  •     height: 25px !important;
    

  •     width: 25px !important;
    

  • }
    


  • 

  • .article-content .wp-posts-content h2::after,
    

  • .article-content .wp-posts-content h1::after,
    

  • .article-content .wp-posts-content h3::after {
    

  •     content: "";
    

  •     opacity: 0.6;
    

  •     position: absolute;
    

  •     transition: 0.4s;
    

  •     border-radius: 50%;
    

  • }
    


  • 

  • .article-content .wp-posts-content h2::after {
    

  •     top: -15px;
    

  •     left: 15px;
    

  •     width: 10px;
    

  •     height: 10px;
    

  • }
    


  • 

  • .article-content .wp-posts-content h1::after {
    

  •     top: -13px;
    

  •     left: 25px;
    

  •     width: 13px;
    

  •     height: 13px;
    

  • }
    


  • 

  • .article-content .wp-posts-content h3::after {
    

  •     top: -17px;
    

  •     left: 12px;
    

  •     width: 8px;
    

  •     height: 8px;
    

  • }

    • 第二款风格

    第二款


    1000222812.webp
    这款猫爪风格好像是初一的原创，H1-H4都是一样的，不过这个扩展性很高，比如遇到自己喜欢的，自己可以替换里面的图片就可以了。
    /* 第一款标题样式美化 */
    

  • .title-theme {
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  •     color: #566889;
    

  • }
    

  • .title-theme:before {
    

  • display:none;
    

  • }
    

  • .wp-posts-content>h1.wp-block-heading{
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  • }
    

  • .wp-posts-content>h2.wp-block-heading{
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  • }
    

  • .wp-posts-content>h3.wp-block-heading{
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://www.tfbkw.com/wp-content/uploads/2025/03/20250306195527974-biaoti.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  • }
    

  • .wp-posts-content>h4.wp-block-heading{
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://www.qqij.cn/wp-content/uploads/2024/04/17142097132024042709215353.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  • }
    

  • .wp-posts-content>h1.wp-block-heading:before{
    

  •     display:none;
    

  • }
    

  • .wp-posts-content>h2.wp-block-heading:before{
    

  •     display:none;
    

  • }
    

  • .wp-posts-content>h3.wp-block-heading:before{
    

  •     display:none;
    

  • }
    

  • .wp-posts-content>h4.wp-block-heading:before{
    

  •     display:none;
    

  • }


    • 第三款
    tengfei_down.webp
    第三款标题样式腾飞是借鉴的一个游戏站的标题样式，通过图片截取来做的H1-H2的样式，还是不错的，目前用的站还是挺多的！

    /* 腾飞博客第三款标题样式美化 */
    

  • .wp-posts-content>h1.wp-block-heading{
    

  •     position: relative;
    

  •     padding: 10px 12px;
    

  •     display: block;
    

  •     font-size: 20px;
    

  •     color: #6297FF;
    

  •     font-weight: bold;
    

  •     line-height: 26px;
    

  •     margin-bottom: 20px;
    

  •     background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
    

  •         background-size: 1000px 1000px;
    

  •     background-position: -5px -902px;
    

  •     
    

  • }
    

  • .wp-posts-content>h2.wp-block-heading{
    

  •     padding: 0px 0px 0px 19px !important;
    

  •     position: relative;
    

  •     padding: 10px 12px;
    

  •     display: block;
    

  •     font-size: 20px;
    

  •     color: #6297FF;
    

  •     font-weight: bold;
    

  •     line-height: 32px;
    

  •     margin-bottom: 20px;
    

  •     background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
    

  •     background-size: 1000px 999px;
    

  •     background-position: -3px -837px;
    

  • }
    

  • .wp-posts-content>h3.wp-block-heading{
    

  •     padding: 0px 0px 0px 45px!important;
    

  •     background: url(https://tfbk.jzpix.cn/wp-content/themes/ZibTF/pic/h3.svg) 10px center no-repeat;
    

  •     background-size: 30px 20px;
    

  • }
    

  • .wp-posts-content>h1.wp-block-heading:before{
    

  •     display:none;
    

  • }
    

  • .wp-posts-content>h2.wp-block-heading:before{
    

  •     display:none;
    

  • }
    

  • .wp-posts-content>h3.wp-block-heading:before{
    

  •     display:none;
    

  • }


    • 第四款
    第四款的话我建议部署一下，因为这个是单独美化了H5-H6，适合做笔记站，而且H6还有动态的效果，还是不错的一款标题样式！
    tengfei_down.gif 
    /* 腾飞博客第四款标题样式美化 */
    

  • .article-content h5 {
    

  •     padding: 5px 25px;
    

  •     margin: 12px 0px;
    

  •     position: relative;
    

  •     font-size: 18px;
    

  •     letter-spacing: 2px;
    

  •     color: #f73434;
    

  • }
    

  • .article-content h5::before {
    

  •     content: '';
    

  •     position: absolute;
    

  •     top: 4px;
    

  •     left: 0;
    

  •     width: 20px;
    

  •     height: 20px;
    

  •     background-image: url(https://www.tfbkw.com/wp-content/themes/ZibTF/img/hh5.svg);
    

  •     background-size: 100% 100%;
    

  • }
    

  • .article-content h6:before {
    

  •     border-bottom: 2px solid #4dd0e1;
    

  •     width: 100%;
    

  •     content: "";
    

  •     display: block;
    

  •     height: 27px;
    

  •     position: absolute;
    

  •     left: 0;
    

  •     top: 0;
    

  •     bottom: -2px;
    

  •     margin: auto;
    

  •     background-size: 28px 28px;
    

  •     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    

  •     background-repeat: no-repeat;
    

  •     animation: h6AnimationBefore 2s infinite alternate
    

  • }
    

  • .article-content h6 {
    

  •     margin: 25px 0;
    

  •     font-size: 16px;
    

  •     position: relative;
    

  •     padding: 4px 25px;
    

  •     width: max-content;
    

  •     color: #4dd0e1
    

  • }
    

  • .article-content h6:after {
    

  •     content: "";
    

  •     display: block;
    

  •     width: 28px;
    

  •     height: 28px;
    

  •     position: absolute;
    

  •     border: 2px solid #4dd0e1;
    

  •     border-radius: 50%;
    

  •     right: -15px;
    

  •     top: 0;
    

  •     bottom: 0;
    

  •     margin: auto;
    

  •     background-size: 28px 28px;
    

  •     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    

  •     animation: h6AnimationAfter 2s infinite alternate
    

  • }
    

  • h6 {
    

  •     display: block;
    

  •     font-size: 1.17em;
    

  •     margin-block-start:1em;
    

  •     margin-block-end:1em;
    

  •     margin-inline-start:0px;
    

  •     margin-inline-end:0px;
    

  •     font-weight: bold
    

  • }
    

  • @keyframes h6AnimationBefore {
    

  •     0% {
    

  •         width: 28px
    

  •     }
    

  •     25% {
    

  •         width: 100%
    

  •     }
    

  •     50% {
    

  •         width: 100%
    

  •     }
    

  •     to {
    

  •         width: 100%
    

  •     }
    

  • }
    

  • @keyframes h6AnimationAfter {
    

  •     0% {
    

  •         transform: rotate(0)
    

  •     }
    

  •     10% {
    

  •         transform: rotate(0)
    

  •     }
    

  •     50% {
    

  •         transform: rotate(-1turn)
    

  •     }
    

  •     to {
    

  •         transform: rotate(-1turn)
    

  •     }
    

  • }

    • 第五款
    这个第五款腾飞是借鉴了vue3的样式来写的，只写了H1-H3，这款很简约，也是不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第五款

    第五款 
    /* 腾飞博客第五款标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    


  • 

  • .article-content h1 {
    

  •     margin: 20px 0;
    

  •     padding: 8px 15px;
    

  •     font-weight: bold;
    

  •     font-size: 24px;
    

  •     color: #222;
    

  •     border-left: 4px solid #2196f3;
    

  •     background: #e3f2fd;
    

  •     border-radius: 4px;
    

  •     width: fit-content;
    

  • }
    


  • 

  • .article-content h2 {
    

  •     margin: 20px 0;
    

  •     padding: 8px 15px;
    

  •     font-weight: bold;
    

  •     font-size: 22px;
    

  •     color: #222;
    

  •     border-left: 4px solid #f44336; 
    

  •     background: #fdecea; 
    

  •     border-radius: 4px;
    

  •     width: fit-content;
    

  • }
    


  • 

  • .article-content h3 {
    

  •     margin: 20px 0;
    

  •     padding: 8px 15px;
    

  •     font-weight: bold;
    

  •     font-size: 20px;
    

  •     color: #222;
    

  •     border-left: 4px solid #4caf50;
    

  •     background: #e8f5e9; 
    

  •     border-radius: 4px;
    

  •     width: fit-content;
    

  • }

    • 第六款
    第六款是借鉴一个做笔记博客的网站，只写了H1-H3的，我觉得还是一个不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第六款

    第六款 
    /* 腾飞博客第六款标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    

  • .article-content h1,
    

  • .article-content h2,
    

  • .article-content h3 {
    

  •     margin: 20px 0;
    

  •     padding: 6px 12px;
    

  •     font-weight: bold;
    

  •     position: relative;
    

  •     display: block;   
    

  • }
    


  • 

  • .article-content h1 {
    

  •     font-size: 24px;
    

  •     color: #2e7d32;
    

  •     background: linear-gradient(to right, #c8e6c9 40%, transparent 100%);
    

  • }
    

  • .article-content h1::after {
    

  •     content: "";
    

  •     display: block;
    

  •     height: 2px;
    

  •     background: linear-gradient(to right, #4caf50, transparent);
    

  •     margin-top: 4px;
    

  • }
    

  • .article-content h2 {
    

  •     font-size: 22px;
    

  •     color: #1565c0;
    

  •     background: linear-gradient(to right, #bbdefb 40%, transparent 100%);
    

  • }
    

  • .article-content h2::after {
    

  •     content: "";
    

  •     display: block;
    

  •     height: 2px;
    

  •     background: linear-gradient(to right, #2196f3, transparent);
    

  •     margin-top: 4px;
    

  • }
    

  • .article-content h3 {
    

  •     font-size: 20px;
    

  •     color: #c62828;
    

  •     background: linear-gradient(to right, #ffcdd2 40%, transparent 100%);
    

  • }
    

  • .article-content h3::after {
    

  •     content: "";
    

  •     display: block;
    

  •     height: 2px;
    

  •     background: linear-gradient(to right, #f44336, transparent);
    

  •     margin-top: 4px;
    

  • }

    • 第七款
    这一款是腾飞博客自己随便写的一款，还是不错的，很简约，写了H1-H3标题，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

    第七款

    第七款 

    /* 腾飞博客第七款标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    

  • .article-content h1,
    

  • .article-content h2,
    

  • .article-content h3 {
    

  •     margin: 20px 0;
    

  •     padding: 6px 12px;
    

  •     font-weight: bold;
    

  •     font-size: 20px;
    

  •     position: relative;
    

  •     display: block;
    

  •     border: 2px solid transparent;
    

  •     border-left-width: 3px; 
    

  •     border-radius: 3px 0 0 3px;
    

  • }
    


  • 

  • .article-content h1 {
    

  •     border-image: linear-gradient(to right, #f44336, transparent) 1;
    

  • }
    


  • 

  • .article-content h2 {
    

  •     border-image: linear-gradient(to right, #00bcd4, transparent) 1;
    

  • }
    


  • 

  • .article-content h3 {
    

  •     border-image: linear-gradient(to right, #4caf50, transparent) 1;
    

  • }

    • 第八款
    这一款也是借鉴一个博客网站的样式来写，这款是写H1-H5的样式，我觉得非常简约，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这款写了两个样式，自己看一下吧！
    第一款样式（不带背景）

    第一款样式（不带背景）

    第一款样式（不带背景） 
    /* 腾飞博客第八款第二样式标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before,
    

  • .article-content h4::before,
    

  • .article-content h5::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    


  • 

  • .article-content h1 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #ed5151;
    

  •   background-color: rgba(237, 81, 81, 0.05);
    

  •   font-size: 19px;
    

  •   line-height: 36px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 15px 0 10px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h1:hover {
    

  •   background-color: rgba(237, 81, 81, 0.08);
    

  • }
    


  • 

  • .article-content h2 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #BF51ED;
    

  •   background-color: rgba(191, 81, 237, 0.05);
    

  •   font-size: 18px;
    

  •   line-height: 34px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 12px 0 8px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h2:hover {
    

  •   background-color: rgba(191, 81, 237, 0.08);
    

  • }
    


  • 

  • .article-content h3 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #6495ed;
    

  •   background-color: rgba(100, 149, 237, 0.05);
    

  •   font-size: 17px;
    

  •   line-height: 32px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 10px 0 6px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h3:hover {
    

  •   background-color: rgba(100, 149, 237, 0.08);
    

  • }
    


  • 

  • .article-content h4 {
    

  •   padding: 3px 20px;
    

  •   border-left: 10px solid #e2aa2b;
    

  •   background-color: rgba(226, 170, 43, 0.05);
    

  •   font-size: 16px;
    

  •   line-height: 30px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 8px 0 5px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h4:hover {
    

  •   background-color: rgba(226, 170, 43, 0.08);
    

  • }
    


  • 

  • .article-content h5 {
    

  •   padding: 3px 20px;
    

  •   border-left: 10px solid #64c1c1;
    

  •   background-color: rgba(100, 193, 193, 0.05);
    

  •   font-size: 15px;
    

  •   line-height: 28px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 6px 0 4px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h5:hover {
    

  •   background-color: rgba(100, 193, 193, 0.08);
    

  • }
    • 第二款样式（带背景）

    第二款样式（带背景）

    第二款样式（带背景） 
    /* 腾飞博客第八款第二样式标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before,
    

  • .article-content h4::before,
    

  • .article-content h5::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    


  • 

  • .article-content h1 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #ed5151;
    

  •   background-color: rgba(237, 81, 81, 0.05);
    

  •   font-size: 19px;
    

  •   line-height: 36px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 15px 0 10px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h1:hover {
    

  •   background-color: rgba(237, 81, 81, 0.08);
    

  • }
    


  • 

  • .article-content h2 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #BF51ED;
    

  •   background-color: rgba(191, 81, 237, 0.05);
    

  •   font-size: 18px;
    

  •   line-height: 34px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 12px 0 8px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h2:hover {
    

  •   background-color: rgba(191, 81, 237, 0.08);
    

  • }
    


  • 

  • .article-content h3 {
    

  •   padding: 5px 20px;
    

  •   border-left: 10px solid #6495ed;
    

  •   background-color: rgba(100, 149, 237, 0.05);
    

  •   font-size: 17px;
    

  •   line-height: 32px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 10px 0 6px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h3:hover {
    

  •   background-color: rgba(100, 149, 237, 0.08);
    

  • }
    


  • 

  • .article-content h4 {
    

  •   padding: 3px 20px;
    

  •   border-left: 10px solid #e2aa2b;
    

  •   background-color: rgba(226, 170, 43, 0.05);
    

  •   font-size: 16px;
    

  •   line-height: 30px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 8px 0 5px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h4:hover {
    

  •   background-color: rgba(226, 170, 43, 0.08);
    

  • }
    


  • 

  • .article-content h5 {
    

  •   padding: 3px 20px;
    

  •   border-left: 10px solid #64c1c1;
    

  •   background-color: rgba(100, 193, 193, 0.05);
    

  •   font-size: 15px;
    

  •   line-height: 28px;
    

  •   color: #333;
    

  •   font-weight: bold;
    

  •   margin: 6px 0 4px;
    

  •   display: block;
    

  •   border-radius: 0 4px 4px 0;
    

  •   transition: all 0.3s ease;
    

  • }
    


  • 

  • .article-content h5:hover {
    

  •   background-color: rgba(100, 193, 193, 0.08);
    

  • }

    • 第九款
    第十款纯背景没有多说的，喜欢什么颜色自己改颜色，写到了H1-H5标题样式

    第九款

    第九款 
    /* 腾飞博客第十款标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before,
    

  • .article-content h4::before,
    

  • .article-content h5::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    


  • 

  • .article-content h1 {
    

  •   padding: 8px 20px;
    

  •   border-left: none;
    

  •   background-color: #ed5151;
    

  •   font-size: 19px;
    

  •   line-height: 30px;
    

  •   color: white;
    

  •   font-weight: bold;
    

  •   margin: 15px 0;
    

  •   display: block;
    

  •   border-radius: 4px;
    

  •   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

  •   width: fit-content;
    

  • }
    


  • 

  • .article-content h2 {
    

  •   padding: 8px 20px;
    

  •   border-left: none;
    

  •   background-color: #BF51ED;
    

  •   font-size: 18px;
    

  •   line-height: 30px;
    

  •   color: white;
    

  •   font-weight: bold;
    

  •   margin: 12px 0;
    

  •   display: block;
    

  •   border-radius: 4px;
    

  •   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

  •   width: fit-content;
    

  • }
    


  • 

  • .article-content h3 {
    

  •   padding: 8px 20px;
    

  •   border-left: none;
    

  •   background-color: #6495ed;
    

  •   font-size: 17px;
    

  •   line-height: 27px;
    

  •   color: white;
    

  •   font-weight: bold;
    

  •   margin: 10px 0;
    

  •   display: block;
    

  •   border-radius: 4px;
    

  •   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

  •   width: fit-content;
    

  • }
    


  • 

  • .article-content h4 {
    

  •   padding: 8px 20px;
    

  •   border-left: none;
    

  •   background-color: #e2aa2b;
    

  •   font-size: 16px;
    

  •   line-height: 24px;
    

  •   color: white;
    

  •   font-weight: bold;
    

  •   margin: 8px 0;
    

  •   display: block;
    

  •   border-radius: 4px;
    

  •   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

  •   width: fit-content;
    

  • }
    


  • 

  • .article-content h5 {
    

  •   padding: 8px 20px;
    

  •   border-left: none;
    

  •   background-color: #64c1c1;
    

  •   font-size: 15px;
    

  •   line-height: 21px;
    

  •   color: white;
    

  •   font-weight: bold;
    

  •   margin: 6px 0;
    

  •   display: block;
    

  •   border-radius: 4px;
    

  •   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

  •   width: fit-content;
    

  • }

    • 第十款
    这个写了H1-H3，右边加了动态的效果，我觉得还是不错的，喜欢的自行部署！

    第十款

    第十款 
    /* 腾飞博客第十一款标题样式美化 */
    

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before {
    

  •     content: none !important;
    

  •     display: none !important;
    

  • }
    

  • .article-content h1,
    

  • .article-content h2,
    

  • .article-content h3 {
    

  •     display: block;         
    

  •     width: fit-content;      
    

  •     margin: 20px 0;
    

  •     padding: 12px 24px 12px 28px; 
    

  •     font-weight: 800;
    

  •     font-size: 1.8em;
    

  •     color: #fff;
    

  •     border-radius: 12px;
    

  •     position: relative;
    

  •     text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    

  •     overflow: hidden;
    

  •     cursor: default;
    

  •     transition: transform 0.3s, box-shadow 0.3s;
    

  • }
    


  • 

  • .article-content h1:hover,
    

  • .article-content h2:hover,
    

  • .article-content h3:hover {
    

  •     transform: translateY(-2px);
    

  •     box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    

  • }
    


  • 

  • .article-content h1 {
    

  •     background: linear-gradient(90deg, #ff6b6b, #f44336);
    

  • }
    

  • .article-content h2 {
    

  •     background: linear-gradient(90deg, #4dd0e1, #00bcd4);
    

  • }
    

  • .article-content h3 {
    

  •     background: linear-gradient(90deg, #81c784, #4caf50);
    

  • }
    


  • 

  • .article-content h1::before,
    

  • .article-content h2::before,
    

  • .article-content h3::before {
    

  •     content: '';
    

  •     position: absolute;
    

  •     top: 0;
    

  •     left: 0;
    

  •     width: 6px;
    

  •     height: 100%;
    

  •     border-radius: 12px 0 0 12px;
    

  • }
    


  • 

  • .article-content h1::before { background: #f44336; }
    

  • .article-content h2::before { background: #00bcd4; }
    

  • .article-content h3::before { background: #4caf50; }
    


  • 

  • .article-content h1::after,
    

  • .article-content h2::after,
    

  • .article-content h3::after {
    

  •     content: '✨';
    

  •     position: absolute;
    

  •     top: -5px;
    

  •     right: -10px;
    

  •     font-size: 1em;
    

  •     animation: twinkle 2s infinite alternate;
    

  •     opacity: 0.6;
    

  • }
    


  • 

  • @keyframes twinkle {
    

  •     0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    

  •     50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    

  •     100% { opacity: 0.3; transform: scale(0.8) rotate(-15deg); }
    

  • }


    • 诚信连接交易，资源创造价值。
    回复

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    系统消息：四哥已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		12-14 12:55
    		01-24 12:40
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-9-19 02:53 , Processed in 0.101108 second(s), 69 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表