ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
2016-07-07 08:55
555 查看
看到新浪微博、百度百家等等平台上都带有文章“打赏”功能,觉得很新鲜,于是也想在自己的博客中加入“打赏”功能。
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)
先看一下这个打赏的Icon长什么样吧! 去站点试试打赏?=>www.zynblog.com
打赏样式
最后再提供几个打赏图标吧,喜欢的话就收藏起来吧:
当然,加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞。而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了)。
加入打赏功能纯粹是“觉得好玩”,就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)
先看一下这个打赏的Icon长什么样吧! 去站点试试打赏?=>www.zynblog.com
.hide_box { z-index: 999; filter: alpha(opacity=50); background: #666; opacity: 0.5; -moz-opacity: 0.5; left: 0; top: 0; height: 99%; width: 100%; position: fixed; display: none; } .shang_box { width: 540px; height: 540px; padding: 10px; background-color: #fff; border-radius: 10px; position: fixed; z-index: 1000; left: 50%; top: 50%; margin-left: -280px; margin-top: -280px; border: 1px dotted #dedede; display: none; } .shang_box img { border: none; border-width: 0; } .dashang { display: block; margin: 5px auto; text-align: center; transition: all 0.3s; width:50px; height:50px; background: url(../dashangimg/dashang.png) no-repeat scroll 0% 0% transparent; } .dashang:hover { background: url(../dashangimg/dashanghover.png) no-repeat scroll 0% 0% transparent; } .shang_close { float: right; display: inline-block; } .shang_logo { display: block; text-align: center; margin: 20px auto; } .shang_tit { width: 100%; height: 75px; text-align: center; line-height: 66px; color: #a3a3a3; font-size: 16px; background: url('../dashangimg/cy-reward-title-bg.jpg'); font-family: 'Microsoft YaHei'; margin-top: 7px; margin-right: 2px; } .shang_tit p { color: #a3a3a3; text-align: center; font-size: 16px; } .shang_payimg { width: 150px; height: 150px; border: 6px solid #EA5F00; margin: 0 auto; border-radius: 3px; } .shang_payimg img { display: block; text-align: center; width: 140px; height: 140px; } .pay_explain { text-align: center; margin: 10px auto; font-size: 12px; color: #545454; } .radiobox { width: 16px; height: 16px; background: url('../dashangimg/radio2.jpg'); display: block; float: left; margin-top: 5px; margin-right: 14px; } .checked .radiobox { background: url('../dashangimg/radio1.jpg'); } .shang_payselect { text-align: center; margin: 0 auto; margin-top: 40px; cursor: pointer; height: 60px; width: 280px; } .shang_payselect .pay_item { display: inline-block; margin-right: 10px; float: left; } .shang_info { clear: both; } .shang_info p, .shang_info a { color: #C3C3C3; text-align: center; font-size: 12px; text-decoration: none; line-height: 2em; }
打赏样式
最后再提供几个打赏图标吧,喜欢的话就收藏起来吧:
相关文章推荐
- bootstrap modal 垂直居中对齐
- BootstrapTest_3(基础排板样式)
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- Bootstrap3使用typeahead插件实现自动补全功能
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
- Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- 30款最好的 Bootstrap 3.0 免费主题和模板
- 50个极好的bootstrap 后台框架主题下载
- 30 个惊艳的 Bootstrap 扩展插件
- 从零开始学Bootstrap(2)
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
- 为bootstrap模态窗口添加拖拽(draggable )事件
- Form表单验证神器: BootstrapValidator
- bootstrap学习笔记-按钮
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- Bootstrap选项卡与Masonry插件的完美结合
- 针对BootStrap中tabs控件的美化和完善(推荐)
- 针对BootStrap中tabs控件的美化和完善