Showtime

秋思工作室

粗茶淡饭随缘过,富贵荣华莫强求。

导航

当前位置:首页博客技巧 > 正文页面

给文章摘要部分添加阅读全文功能

2017年7月11日 本文作者:秋思 浏览:

  今天一直在研究如何给文章摘要部分添加“阅读全文”的功能。本来这个可以用插件实现的,但是插件影响博客打开的速度,直接用代码就好多了。本来不难,但是我想用CSS给“阅读全文”添加圆角矩形边框效果,这样比较美观。

给文章摘要部分添加阅读全文功能

  首先在模板文件b_article-multi.html文件中添加“阅读全文”的标签,找到<div class="post-tags">这一句,在下方添加显示“阅读全文”的标签代码。使用div的目的是为了方面添加CSS属性来控制阅读全文的显示效果。

  <div class="more"><h3><a href="<#article/url#>">more</a></h3></div>

  然后在CSS文件中添加相应的CSS属性,相关代码如下。说明:红色部分的more也可以用其它标签,上面加粗的more请换成“阅读全文”。

.more {
background:url("Yahei/more.png");
color:#224;
float:right;
width:52px;
margin:0;
padding:4px;
}

.more h3 {
float:left;
font-size:12px;
font-weight:normal;
padding:0 2px;
}

.more a {
color:#c30;
}

  现在大家看到的“阅读全文”的圆角矩形并不是用CSS来实现的,而是用图片来实现的。本来最初是用CSS来实现的,但是IE11下并不显示这种CSS圆角矩形的效果,所以只能先用图片来替换了。但是这样又有另一个郁闷的地方:在Firefox下,图片显示效果不受CSS控制,产生了错位。对于不懂技术的小白来说,这可真是难为了我。

版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则

文章标签:博客  Z-Blog  CSS  秋思工作室  

首发网站:秋思工作室

原文链接:http://www.qiusi.me/post/41.html

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

文章存档

标签

©2017-2023 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.