• 注册
  • 网络技术 网络技术 关注:15 内容:185

    【网页美化】3款“标题标签”H1-H6标签样式美化

  • 查看作者
  • 打赏作者
  • 当前位置: 七七博客 > 网络技术 > 正文
    • 10
    • 网络技术
    • Lv.5
      VIP
      官方

      样式一

      【网页美化】3款“标题标签”H1-H6标签样式美化

      样式二

      【网页美化】3款“标题标签”H1-H6标签样式美化

      样式三

      【网页美化】3款“标题标签”H1-H6标签样式美化

      示例代码只改了H3,其他的自行根据喜好修改哈

      个人比较钟意样式一和样式二,你呢?

      使用方法

      主题后台->外观布局->自定义代码->自定义Css代码(电脑端)->自定义css代码 (移动端)

      代码如下

      -----------------------------------样式一---------------------------------------
      h3 {
          font-size: 18px;
          font-weight: bold;
          margin: 18px 0;
          border-bottom: 1px solid #eaeaea;
          padding-left: 26px;
      }
      h3:before {
          position: absolute;
          left: 0em;
          display: block;
          content: '##';
          color: #f72d84;
      }
      -----------------------------------样式二---------------------------------------
      h3 {
          position: relative;
          padding: 5px 0 15px;
          color: #424242;
          font-size: 18px;
          display: -webkit-inline-box;
          border-bottom: 1px solid #fff;
          cursor: pointer;
          z-index: 16;
          font-weight: 700;
          line-height: 30px;
      }
      h3:hover:before {
          width: 100%;
          transition: all .5s;
      }
      
      h3:before {
          position: absolute;
          top: 35px;
          left: 0;
          z-index: -1;
          width: 45%;
          height: 2px;
          background: #1b54bc;
          content: " ";
          border-radius: 20px;
          transition: all .5s;
      }
      -----------------------------------样式三---------------------------------------
      h3 {
          font-size: 18px;
          padding: 8px;
          line-height: 28px;
          background: #fafafa;
          border-left: 4px solid #0c85ff;
      }
      Lv.5
      VIP
      官方
      height: 26px;
      line-height: 26px;
      margin: 17px 0;
      padding-left: 10px;
      font-size: 16px;
      color: #333333;
      border-left: solid 3px #2a99e2;
    • 温九基于样式三修改
      拉黑 1年前 电脑端回复
    • 回复
      Lv.5
      VIP
      官方
      border-left: 5px solid #b55594;
      text-indent: 8px;
      font-weight: bold;
      padding: 2px 0px;
      margin: 8px 0px;
    • 温九基于样式三修改
      拉黑 1年前 电脑端回复
    • 回复
      Lv.5
      VIP
      官方
      /* 修改背景为渐变色 */
      background: linear-gradient(-135deg, #c850c0, #4158d0);


      回复
      Lv.5
      VIP
      官方
      #90bcff/* 蓝色 */


      回复
      Lv.5
      VIP
      官方
          border-bottom: 1px dashed #d1d1d1;
          padding: 2px 0 5px 25px;
          font-weight: 900 !important;
          color: #17a2e7;
          background: url( 链接) no-repeat 0 -629px;
          font-size: 16px;
          margin: 0 0 10px;
      回复
      Lv.5
      VIP
      官方
          /*  
          border-bottom: 1px dashed #d1d1d1;
          padding: 2px 0 5px 25px;
          font-weight: 900 !important;
          color: #17a2e7;
          background: url( 链接) no-repeat 0 -629px;
          font-size: 16px;
          margin: 0 0 10px;*/
      回复
      Lv.5
      VIP
      官方
          border-bottom: 1px dashed #d1d1d1;
          padding: 2px 0 5px 25px;
          font-weight: 900 !important;
          color: #17a2e7;
          background: url(//files.jb51.net/skin/downsoft/2018/images/x_t_01.png) no-repeat 0 -629px;
          font-size: 16px;
          margin: 0 0 10px;
    • 温九jb51 H3样式
      拉黑 12月前 电脑端回复
    • 回复

      请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 签到中心
      偏好设置
      在线聊天
    • 帖子间隔 侧栏位置: