• 中文
    • English
  • 注册
  • BBS 网络技术 关注:5 内容:53

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

  • 查看作者
  • 打赏作者
  • 拉黑名单
  • Lv.4
    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.4
    VIP
    管理员
    height: 26px;
    line-height: 26px;
    margin: 17px 0;
    padding-left: 10px;
    font-size: 16px;
    color: #333333;
    border-left: solid 3px #2a99e2;
  • 温九基于样式三修改
    拉黑 3月前 电脑端回复
  • 回复
    Lv.4
    VIP
    管理员
    border-left: 5px solid #b55594;
    text-indent: 8px;
    font-weight: bold;
    padding: 2px 0px;
    margin: 8px 0px;
  • 温九基于样式三修改
    拉黑 3月前 电脑端回复
  • 回复
    Lv.4
    VIP
    管理员
    /* 修改背景为渐变色 */
    background: linear-gradient(-135deg, #c850c0, #4158d0);


    回复
    Lv.4
    VIP
    管理员
    #90bcff/* 蓝色 */


    回复
    Lv.4
    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.4
    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.4
    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样式
    拉黑 2月前 电脑端回复
  • 回复

    请登录之后再进行评论

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