博客园制作自己的打赏功能 - Win

TOP

博客园制作自己的打赏功能(二)

2019-08-30 06:11:41 【大中小】浏览:89次

quot;https://files-cdn.cnblogs.com/files/gz007/weixin1.bmp" ></div><br> <input id="fanhui" type="button" value="回去观看博客" ><br><br> </div> </body> </html>

这样就有了

若是你跟着我操作了，定会发现，咦，我的按钮咋不一样，那么丑嘞，没有效果啊，那是因为还缺少了css，和js，接下来就是要写css和js咯

css:

.dashang {
    color: #d9eef7;
    border: solid 1px #0076a3;
    width:150px;
    height: 50px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.dashang:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.dashang:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
#fanhui {
    color: #d9eef7;
    border: solid 1px #0076a3;
    width:150px;
    height: 50px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
#fanhui:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
#fanhui:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}


#boke_div{
    position: fixed;
    width: 800px;
    height: 450px;
    left: 20%;
    top: 18%;
    border:1px solid #ffcc00;background:#ffffc8;
}
#boke_div:hover{
    border:1px solid #9bdf70;background:#d5f3c7;

}


.button {
    width: 200px;
    height: 60px;
    background: #007ead;
    margin-top:5px;
}
.button:hover {
    background: #002d59;
}

 
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

css 的话你们可以自己根据自己喜欢的样子写，因为是我一个java后端开发的工程师，所以界面也不是很好看，但是下面的js的话，不一样的话就会没有效果咯，css不影响功能，就是丑了点，js不生效的话，就没有效果

JS：

$(function(){
    $("input[name*='dashang']").click(function(){
        $("#home").hide();
        $("#boke_div").show();

    })

    $("#fanhui").click(function(){
        $("#home").show();
        $("#boke_div").hide();

    })

    $("#zhifubao").click(function(){
        $("#boke_div_img_weixin").show()

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：windows10滑轮bug	下一篇：windows之如何把iso文件转换为VHD..