首页>>备忘录笔记

SEO文章页优化之缩短篇幅

1.CSS加在内容页div框下方,比如下面这图片这样

1.png

<style type="text/css">

/*阅读全文*/

#contTab{

display: none;

}

.content-more{

display: none;

}


#contTab:checked ~ #cont{

max-height: 1000px;

overflow: hidden;

}

#contTab:checked ~  .content-more{

display: block;

position: relative;

padding-top: 20px;

padding-bottom: 30px;

text-align: center;

}

#contTab:checked ~  .content-more .gradient{

background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(#fff));

background-image: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);

background-image: linear-gradient(-180deg,rgba(255,255,255,0),#fff);

height: 80px;

position: absolute;

left: 0;

top: -79px;

width: 100%;

}

#contTab:checked ~  .content-more .readmore{

display: inline-block;

background: #014c84;

color: #fff;

width: 175px;

height: 42px;

border-radius: 42px;

line-height: 42px;

font-size: 16px;

cursor: pointer;

}

</style>

2.在内容调用处添加

<input type="checkbox" id="contTab" checked="checked" class="tabbed">

<div id="cont">

//这里是内容调用变量

</div>

<div class="content-more"><div class="gradient"></div> <label for="contTab" class="readmore">点击显示全文</label></div>

以上就是点击展开全部的方法,很简单,很实用。

本文由乐乐博客备忘录笔记栏目发布,感谢您对乐乐博客的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“SEO文章页优化之缩短篇幅

标签: