话不多说,上图明明白白。
其实还是要多说几句的,今天做了4个“ 基于SSM的在线学习平台 ”、“ XMind思维导图(1.3.3)直装内购特别版Android ”、“会声会影2019一键安装破解版”、“MusicTools无损付费音乐免费下载工具”的详情页,其中包括。
详情页的导航栏效果 上一篇与下一篇之间的导航效果 赞和打赏功能 ·这里上一下赞和打赏的代码片段 : 通过点击打赏按钮 按钮效果代码 <div class="post-actions" style="margin-top: -30px;"> <a href="javascript:;" class="post-like action action-like" ><i class="fa fa-thumbs-o-up"></i>赞(<span>1</span>)</a> <a href="javascript:;" class="action action-rewards" data- event="rewards"><i class="fa fa-jpy"></i> 打赏</a> </div> 弹出层效果代码 /*实现思路:*/ /*1.通过在其层上设置一个透明盒子,宽和高设置成100%,z-index的值为999*/ /*2.通过点击打赏按钮淡入显示支付层,点击关闭按钮淡出隐藏支付层*/ <!-- 打赏区域弹出层 --> <div class="rewards" data-event="rewards-close" style="display: none;"> </div> <div class="rewards-layer" style="display: none;"> <h3>觉得文章有用就打赏一下文章作者</h3> <div class="rewards-item"> <h4>支付宝扫一扫打赏</h4> <img src="../images3/zfbplay.jpg"> </div> <div class="rewards-item"> <h4>微信扫一扫打赏</h4> <img src="../images3/wxplay.png"> </div> <span class="rewards-layer-close" data-event="rewards-close"><i class="fa fa-close"></i></span> </div> 样式区域代码 /* 赞和打赏弹出层 */ /* 透明层 */ .rewards { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; } /* 支付层 */ .rewards-layer { position: fixed; top: 50%; left: 50%; margin: -200px 0 0 -275px; width: 550px; background-color: #FFF; padding: 40px 20px 50px; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); z-index: 9999; display: none; text-align: center; } .rewards-layer h3 { font-size: 18px; font-weight: bold; text-align: center; margin: 0 15px 30px; } .rewards-item { display: inline-block; width: 200px; margin: 0 20px; } .rewards-item { display: inline-block; width: 200px; margin: 0 20px; } .rewards-item img { width: 200px; height: 200px; } .rewards-layer-close { position: absolute; top: 0; right: 0; padding: 15px; font-size: 16px; line-height: 1; color: #999; cursor: pointer; } jQuery代码 // 7.打赏区域弹出层 //点击打赏时阴影层和打赏层同时出现 $('[data-event="rewards"]').click(function () { $('.rewards, .rewards-layer').fadeIn(); }) //点击关闭按钮时弹出层消失 $('[data-event="rewards-close"]').click(function () { $('.rewards, .rewards-layer').fadeOut(); })这下面是我今天一天的成果,实现了4个详情页的布置,总的来讲,进度还是比较慢了。
以及今天还有一个收获那就是,https://smalltool.github.io/2018/10/03/soft90/# 能实现了整站网页的下载,并且相关文件分类显示——仿站小工具 v10.0
明天实现“干货文章”板块的内容。要抓紧时间了。准备睡了。晚安
