html+css怎么给文章页,做阅读全文
手机打开一些体验很好的网站的时候,当文章很长的时候,为了用户体验更好一点,都会出现“阅读全文”这些字样,比如
所以在这里,就效仿做一下这样的效果把,会碰到几个问题需要解决的
1,我只想在移动端出现,并不想电脑上出现
2,透明遮挡有些是用图片解决,但是我网站有白天黑夜模式,这样必须用两张图片解决,这样不太好,所以用样式做出半透明阴影
3,有些文章篇幅很小,本不该出现阅读全文的时候,也会出现
html代码
<div class="show_text">
<div class="entry-content clearfix">
文章内容
</div>
<div class="showall">-- 展开阅读全文 --</div>
</div>
上面代码是由show_text来控制长度,超过的部分会css隐藏
.show_text{
height:1010px;
overflow:hidden;
position: relative;
}
.showall{
display: block;
text-align: center;
margin: 15px 0 0;
color:#54b5db;
position: absolute;
width: 100%;
bottom: 0;
padding-top: 100px;
line-height: 100px;
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
}
/* 黑夜版阅读全文 */
.sp-dark-mode .showall{
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(29, 31, 32, 0)),color-stop(70%, #1d1f20));
background-image: linear-gradient(-180deg,rgba(29, 31, 32, 0) 0%,#1d1f20 70%);
}
这里需要注意的是,苹果浏览器linear-gradient会出现灰色,必须要把rgba()设置为背景色一致才行
$(document).ready(function(){
var navcontop = $(".entry-content").height();
console.log(navcontop);
if(navcontop <900 ){
$(".showall").addClass("showwen");
$(".show_text"). removeClass("show_text");
}
})
js控制是文章的高度,如果篇幅小,就取消show_text显示,一切按正常的排版显示
此功能已经整合到自媒体博客Spimes主题里面了https://www.veimoz.com/85
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/138
1 条评论
3.2k
发表评论
仅有一条评论
热门文章
自媒体博客Spimes主题14w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题11w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Spzac个人资讯下载类主题7.7w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
Splity博客双栏主题6.1w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
热评文章
自媒体博客Spimes主题367 评论
Splity博客双栏主题185 评论
Spzac个人资讯下载类主题88 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
vCard主题个人简历主题28 评论
Pure轻简主题27 评论
三栏清新博客S_blog主题26 评论
最新评论
诸葛懿
昨天 19:40
我使用这个模板搭建的网站 ,分类页和内容页都是可以打开,但是首页打开有报错信息,提示是这个:
Argument 1 passed to Utils\AutoP::parse() must be of the type string, null given, called in /www/wwwroot/abcd.com/var/Widget/Base/Contents.php on line 938
:思考::大哭::不高兴::真棒::问号::酷::惊哭::乖::笑眼::阴险: