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控制,产生了错位。对于不懂技术的小白来说,这可真是难为了我。

本站文章在没有加注转载说明的情况下,均为本站原创,转载请注明来源和出处。

来自:秋思工作室 | 链接:http://www.qiusi.me/post/41.html

标签:博客  Z-Blog  CSS  

本文引用地址

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

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

最新文章

文章存档

标签

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

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