QQ图片20190823115031.png

文章内页效果图 这种类型还是比较喜欢的。


CSS 样式代码如下(加到你的CSS文件里)

.art-guidecont {

    background-color: #f8f8f8;

    padding: 15px 30px;

    position: relative;

    margin-bottom: 20px;

}

.art-guidecont .btn {

    width: 30px;

    height: 30px;

    display: inline-block;

    position: absolute;

}

.art-guidecont .jjxq {

    font-size: 16px;

    line-height: 25px; margin: 0 6px; color: #666;display:inline

}

.art-guidecont .jjxq a:hover{ 

    color: #08c1b2

}


.art-guidecont .arr-left {

    left: 0;

    top: 0;

    border-left: 1px solid #666;

    border-top: 1px solid #666;

}

.art-guidecont .arr-right {

    right: 0;

    bottom: 0;

    border-right: 1px solid #666;

    border-bottom: 1px solid #666;

}


以下是前端代码 加到你应该加的位置模板位置:


<div class="art-guidecont">

                    <span class="btn arr-left"></span>

                        <p class="jjxq">你的内容或者网站调用标签</p>

                        <span class="btn arr-right"></span>    

</div>