查看全文的css,如何通过纯CSS实现“点击展开全文”功能

看标题大家不难猜到我今天要实现的功能,正如你打开

HTML代码

这是前端开发博客的正文
点击展开全文

将上述代码加入到 single.php 文件里面,按钮一般命名为“点击展开全文”、“

在最省事的文章中,当点击“点击展开全文”时,也就点击了checkbox,也就改变了checkbox的状态为style.css 文件里面即可。

CSS代码

/*阅读全文*/

#contTab{

display: none;

}

.content-more{

display: none;

}

#contTab:checked ~ #cont{

max-height: 600px;

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: #0067cb;

color: #fff;

width: 175px;

height: 42px;

border-radius: 42px;

line-height: 42px;

font-size: 16px;

cursor: pointer;

}

操作这个按钮的注意事项有哪些?

其实这个才是关键,不要小看这个按钮,因为搞不好会导致网站降权,同时百度有明确的说明,这个按钮的规范。主要有以下几个方面。

按钮和广告位的要有一定的间距,个人建议间距在30个像素左右最合适,避免用户误触碰到广告位。当你挂上广告位后,可以使用

按钮必须要在第二屏以后,篇幅可以隐藏,但不能隐藏太多,总不能把文章页的文章全部给隐藏了,变成列表页。

不能使用JS来隐藏,一定要用CSS,因为如果你的内容在JS里面,那么搜索引擎就无法识别到你的内容了,文字识别不了,这个页面很可能就是一个空白页面了。

4e347097736657cd08073884cc7b7e76.png

本文来自【白熊助理】的投稿,部分内容可能来源于互联网,旨在传递信息,不代表【最省事】的观点和立场。侵权投诉>>

转载须获作者授权,并注明出处:如何通过纯CSS实现“点击展开全文”功能丨最省事。授权申请>>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值