毕业设计打卡第4天

《毕业设计共13天打卡》

毕业设计打卡第4天

话不多说，上图明明白白。

其实还是要多说几句的，今天做了4个“ 基于SSM的在线学习平台 ”、“ XMind思维导图（1.3.3）直装内购特别版Android ”、“会声会影2019一键安装破解版”、“MusicTools无损付费音乐免费下载工具”的详情页，其中包括。

1. 详情页的导航栏效果
   
2. 上一篇与下一篇之间的导航效果
   
3. 赞和打赏功能
   
   ·这里上一下赞和打赏的代码片段 ：
   通过点击打赏按钮
   

• 按钮效果代码

<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

明天实现“干货文章”板块的内容。要抓紧时间了。准备睡了。晚安