您当前的位置:网站首页>网站技术教程>文章H1-H6的标题段落格式 浮动分享

文章H1-H6的标题段落格式 浮动分享

2020年10月27日 投稿作者:小熊云端 围观人数:24

站长因为在小刀娱乐网看到文章页标题特效很好看,便找了之前的朋友来给我实现,试了一下真心挺好看,下面就分享给大家

文章H1-H6的标题段落格式 浮动分享  第1张

鼠标滑动前以划定后截图,整体很不错,当成文章装饰很不错,代码如下:

<div class="news">
    <h1>H1标题</h1>
    <p>这里是文章内容(浮动只写了H1的点击事件和滑动事件)</p>

    <h2>H2标题</h2>
    <p>这里是文章内容</p>

    <h3>H3标题</h3>
    <p>这里是文章内容</p>

    <h4>H4标题</h4>
    <p>这里是文章内容</p>

    <h5>H5标题</h5>
    <p>这里是文章内容</p>
</div>
    
    <!--.news是我文章的框架,一个案例,自己用的时候,对应自己的文章页面框架写好CSS里就好-->

css代码:

    .news h1 {
        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;
    }

    .news h1:before {
        position: absolute;
        top: 35px;
        left: 0;
        z-index: -1;
        width: 45%;
        height: 2px;
        background: #1b54bc;
        content: " ";
        border-radius: 20px;
        transition: all .5s    }

    .news h1:hover:before {
        width: 100%;
        transition: all .5s    }
/**只做了H1的大家根据自己的需求做H1-H6的段落吧,浮动中大小/颜色等自己调试更改自己喜欢的吧**/

文章段落每个网站都需要,也是百花八门,如喜欢这套样式,就调试替换吧,本样式来源于小刀资源网文章页面,调试过程中不显示或者显示不对可以联系站长 爱站云 付费修改。


文章来源:爱站云博客

标签

小刀娱乐网,文章,段落,HTML,CSS
版权说明
免责声明:本文文章内容由一起收录网发布,但不代表本站的观点和立场,具体内容可自行甄别.