RiPro主题美化教程+源码(第四期)

作者 : 小姬推荐 发布时间: 2019-12-22 文章热度:258 共19342个字,阅读需49分钟。 本文内容有更新 字体:
  • 文章介绍
  • 本期内容:添加底部波浪效果,友情链接添加友情链接自助申请界面,添加VIP角标,修改标题悬浮导航

    效果演示(一)

    RiPro主题美化教程+源码(第四期)-高岸姬

    教程一,添加底部波浪效果
    教程一、添加底部波浪效果
    第一步:主题目录 -> footer.php 在“</footer>”后添加如下代码

    [PHP] 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="waveHorizontals mobile-hide">
                    <div id="waveHorizontal1" class="waveHorizontal"></div>
                    <div id="waveHorizontal2" class="waveHorizontal"></div>
                    <div id="waveHorizontal3" class="waveHorizontal"></div>
    </div>
    第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
    [CSS] 
    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    .waveHorizontals {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      background-color:#fff !important
    }
    .ripro-dark .waveHorizontals {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      background-color:#181616 !important
    }
    #waveHorizontal1 {
        -webkit-mask: url(../images/augsc_01.svg);
        mask: url(../images/augsc_01.svg);
        animation-delay: -2s;
        animation-duration: 12s;
    }
    #waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
        background-color: #f9b015!important;
    }
    .ripro-dark #waveHorizontal1{
        background-color: #f1f1f1!important;
    }
    .ripro-dark  #waveHorizontal2{
        background-color: #f1f1f1!important;
    }
    .ripro-dark  #waveHorizontal3{
        background-color: #f1f1f1!important;
    }
    .waveHorizontal {
        width: 200%;
        height: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-repeat: repeat-x;
        background-position: left bottom;
        background-size: 350px 100%;
        transform-origin: 0 100% 0;
        animation-name: move;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    @keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}
    #waveHorizontal2 {
        -webkit-mask: url(../images/augsc_02.svg);
        mask: url(../images/augsc_02.svg);
        animation-delay: -2s;
        animation-duration: 5s;
    }
    #waveHorizontal3 {
        -webkit-mask: url(../images/augsc_03.svg);
        mask: url(../images/augsc_03.svg);
        animation-delay: -1s;
        animation-duration: 3s;
    }
     
    教程二、添加友情链接效果
    第一步:主题目录打开 functions.php ,在最后添加如下代码
    [PHP] 
    1
    2
    3
    /*开启wordpress友情链接管理*/
    add_filter( 'pre_option_link_manager_enabled', '__return_true' );
    第二步:主题目录 -> footer.php ,在“<?php if ( _cao( ‘cao_copyright_text’, ” ) != ” ) : ?>”前添加如下代码
    [PHP] 
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    <div class="codesign-dw">
            <div class="col-xs-12 friend-links">
                    <ul class="codesign-fl">
                            <li class="codesign-fl-title">友情链接:</li>
                            <?php wp_list_bookmarks('title_li=&categorize=0&orderby=name&show_images=0'); ?>
                    </ul>
            </div>
    </div>
    第三步:主题目录 -> assets -> css -> diy.css 添加如下样式
    [CSS] 
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    .col-xs-12.friend-links {
        padding: 14px;
    }
    .codesign-fl {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
            font-size: 13px;
    }
    .codesign-fl li{
    margin-left: 10px;
    }
    .codesign-fl a{
        color: #949494;
    }
    .codesign-fl a:hover{
        color: #058ff9;
    }
    .codesign-dw{
            border: 1px dashed #ccc;
            background-color: #f7f8fa;
            text-shadow: #fff 0px 1px 0px;
    }
    .ripro-dark .codesign-dw{
            border: 1px dashed #44444487;
            background-color: #2d2d2d;
            text-shadow: #000 0px 1px 0px;
    }
    教程三、添加友情链接自助申请界面
    第一步:主题目录打开 functions.php ,搜索“pages/tags.php”(跟着教程走的童鞋请搜索“pages/vip.php”),换行添加如下代码
    [PHP] 
    1
    'pages/links.php' => array('自助友链', 'links'),

    解释:默认自动添加页面,页面标题为“自助友链”,页面地址为“links”

     
    第二步:主题目录 -> pages 目录下添加“links.php”,并在“links.php”中添加如下代码
    [PHP] 
    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    <?php
    /**
    * Template name: 自助友链
    * Description:   A Friendship link page
    */
    get_header();
    ?>
    <?php
    if( isset($_POST['blink_form']) && $_POST['blink_form'] == 'send'){
    global $wpdb;
    // 表单变量初始化
    $link_name = isset( $_POST['blink_name'] ) ? trim(htmlspecialchars($_POST['blink_name'], ENT_QUOTES)) : '';
    $link_url = isset( $_POST['blink_url'] ) ? trim(htmlspecialchars($_POST['blink_url'], ENT_QUOTES)) : '';
    $link_description = isset( $_POST['blink_lianxi'] ) ? trim(htmlspecialchars($_POST['blink_lianxi'], ENT_QUOTES)) : ''; // 联系方式
    $link_target = "_blank";
    $link_visible = "N"; // 表示链接默认不可见
    // 表单项数据验证
    if ( empty($link_name) || mb_strlen($link_name) > 20 ){
    wp_die('连接名称必须填写,且长度不得超过30字');
    }
    if ( empty($link_url) || strlen($link_url) > 60 || !preg_match("/^(https?:\/\/)?(((www\.)?[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)?\.([a-zA-Z]+))|(([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5]))(\:\d{0,4})?)(\/[\w- .\/?%&=]*)?$/i", $link_url)) { //验证url
    wp_die('链接地址必须填写');
    }
    $sql_link = $wpdb->insert(
    $wpdb->links,
    array(
    'link_name' => '【待审核】--- '.$link_name,
    'link_url' => $link_url,
    'link_target' => $link_target,
    'link_description' => $link_description,
    'link_visible' => $link_visible
    )
    );
    $result = $wpdb->get_results($sql_link);
    wp_die('亲,友情链接提交成功,【等待站长审核中】!<a href="'.$_SERVER["REQUEST_URI"].'">点此返回</a>', '提交成功');
    }
    get_header();
    ?>
    <div id="main">
            <div class="container">
                    <div class="card-header bg-transparent">
                            <h3 class="mb-0" style="text-align: center;">申请友情链接</h3>
                    </div>
                    <div class="srcdict-yqlj">
                            <div class="col-lg-6 col-12">
                            <!--表单开始-->
                                    <form method="post" class="mt20" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
                                            <div class="form-group">
                                                    <label for="blink_name"><font color="red">*</font> 链接名称:</label>
                                                    <input type="text" size="40" value="" class="form-control" id="blink_name" placeholder="请输入链接名称" name="blink_name">
                                            </div>
                                            <div class="form-group">
                                                    <label for="blink_url"><font color="red">*</font> 链接地址:</label>
                                                    <input type="text" size="40" value="" class="form-control" id="blink_url" placeholder="请输入链接地址" name="blink_url">
                                            </div>
                                            <div class="form-group">
                                                    <label for="blink_lianxi">联系QQ:</label>
                                                    <input type="text" size="40" value="" class="form-control" id="blink_lianxi" placeholder="请输入联系QQ" name="blink_lianxi">
                                            </div>
                                            <div>
                                                    <input type="hidden" value="send" name="blink_form">
                                                    <button type="submit" class="btn btn-primary">提交申请</button>
                                                    <button type="reset" class="btn btn-default">重填</button>
                                                    (提示:带有<font color="red">*</font>,表示必填项~)
                                            </div>
                                    </form>
                                    <!--表单结束-->
                            </div>
                            <div class="col-lg-6 col-12">
                            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                                    <article class="col-md-10 mt20 col-md-offset-2 view clearfix">
                                    <?php if(function_exists('cmp_breadcrumbs')) cmp_breadcrumbs();?>
                                            <p class="mt20">欢迎同类站点与本站交换友情链接,要求有权重有排名,收录良好的,内容健康,内容相关更佳。</p> <!--根据自身修改-->
                                            <p class="mt20"><strong>友链自助申请须知</strong></p>
                                            <p>&#10004; 申请前请先加上本站链接;</p>
                                            <p>&#10004; 稳定更新,每月至少发布1篇文章,最好是建站半年以上;</p>
                                            <p>&#10004; 禁止一切产品营销、广告联盟类型的网站,优先通过同类原创、内容相近的网站;</p>
                                            <p class="mt20"><strong>本站链接信息</strong></p>
                                            <?php echo sprintf( '<p>名称: %s</p>',esc_attr(get_bloginfo( 'name'))); ?></p>
                                            <?php echo sprintf( '<p>网址: %s</p>',esc_attr(get_bloginfo( 'url' ))); ?></p>
                                    </article>
                            </div>
                    </div>
            </div>
    </div>
    <?php endwhile; else: ?>
    <?php endif; ?>
    </div>
    <?php get_footer(); ?>
    第三步:主题目录 -> assets -> css -> diy.css 添加如下样式
    [CSS] 
    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    /*自助申请友情链接*/
    @media screen and (max-width: 750px) {
    .container .row .card  {width: 100%}
    }
    .container .row .pricing-deco .deco-layer {
            -webkit-transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
    }
    .container .row .pricing-deco:hover .deco-layer--1 {
            -webkit-transform: translate3d(15px,0,0);
            transform: translate3d(15px,0,0);
    }
    .container .row .pricing-deco:hover .deco-layer--2 {
            -webkit-transform: translate3d(-15px,0,0);
            transform: translate3d(-15px,0,0);
    }
    .srcdict-yqlj{
            margin-left: -10px;
            margin-right: -10px;
            display: flex;
            background:#fff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            box-shadow: 0 4px 12px 0 rgba(52, 73, 94, 0.1);
    }
    .clearfix{
            color: #fff;
            background-color: #fc7c5f;
            margin-top: 1rem;
            padding: 1rem 1.5rem;
            border: 1px solid transparent;
            border-radius: .375rem;
            max-width: 100%;
    }
    .mt20{
            margin-top: 20px;
            margin-bottom: 15px;
    }
    .ripro-dark .article-copyright {
        background: #f0f0f0;;
        border: 1px dashed #232425;
    }
    .ripro-dark #help h2, #down h2,.ripro-dark #help dt{
            color: #eee;
    }
    .card-header
    {
        padding: 1.25rem 1.5rem;
        font-size: 1.0625rem;
        background-color: #fff;
    }
    .card-header:first-child
    {
        border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
    }
     
    教程四、添加资源VIP角标
    第一步:主题目录 -> inc -> theme-functions.php ,搜索“// 获取图片高度,在“<div class=”entry-media”>”后添加如下代码
    [PHP] 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php if ((_get_post_shop_hide()) ||(_get_post_price()!=0)&& _cao('grid_is_price',true)){
                      echo '<i class="vwip30"></i>';       
              }else{
                      echo '<i class="vwip10"></i>';       
              }?>
    第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
    [PHP] 
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    .vwip30 {
        background-position: -40px 0
    }
    .vwip10,.vwip30 {
        position: absolute;
        z-index: 10;
        border-radius: 5px 0 0 0
    }
    .vwip10,.vwip30{
        display: inline-block;
        background-image: url(../images/tuyiyi_vip4_1.png);
        background-size: auto 40px;
        vertical-align: middle;
        height: 40px;
        width: 40px;
    }
    .vvip10,.vwip10 {
        background-position: 0 0
    }

     

    第三步:主题目录 -> assets -> images 放入如下图片(资源信息见第三期

     
    RiPro主题美化教程+源码(第四期)-高岸姬
     
    教程五、修改右侧悬浮导航
    第一步:主题目录打开 footer.php ,修改如图所示内容
    RiPro主题美化教程+源码(第四期)-高岸姬
    [PHP] 
    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    <!--右侧跟随导航开始-->       
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1444248_u240hsu9sns.css">
    <div class="float-box">
    <ul class="float-ul float-radius float-text">
    <li>
    <?php if (_cao('is_qiandao','1')) : ?>
    <div class="author-qiandao">
    <?php if (_cao_user_is_qiandao()) {
    echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>已签 </a>';
    }else{
    echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>签到</a>';
    }
    ?>
    </div>
    <?php endif; ?>
    </li>
    </ul>
    <ul class="float-ul float-radius float-text">
    <li>
    <a class="qq float-border float-text" href="javascript:void(0);">
    <i class="iconfont icon-qq"></i><br>客服       
    <div class="float-alert-box float-radius float-qq-box" style="display: none;">
    <h6>工作时间</h6>
    <p>工作日:9:00 - 18:00<br>节假日:9:00 - 18:00</p>
    <div class="float-qq-btn float-radius">点击咨询客服</div>
    </div>
    </a>
    </li>
    </ul>
    <ul class="float-ul float-radius float-text">
    <li>
    <a class="fankui float-border float-text" href="https://wpa.qq.com/msgrd?v=3&uin=<?php echo _cao('site_kefu_qq');?>&site=qq&menu=yes" target="_Blank"><i class="iconfont icon-fankuijianyi"></i><br>反馈</a>
    </li>
    <li>
    <a class="float-border float-text" href="javascript:void(0);" etap="to_full" title="
    点击全屏">
    <i class="iconfont icon-quanping"></i><br>全屏
    </a>
    </li>
    <li>
    <a class="float-border float-text tap-dark" href="javascript:void(0);" etap="tap-
    dark" title="夜间模式">
    <i class="iconfont icon-ios-sunny"></i><br>切换
    </a>
    </li>
    </ul>
    <ul class="float-ul float-radius float-text">
    <li>
    <a class="float-border float-text" href="javascript:void(0);" etap="to_top" title="返回顶部">
    <i class="iconfont icon-top1"></i><br>
    </a>
    </li>
    </ul>
    </div>
    <script>
    $(".qq").hover(function () {
    $(this).children(".float-qq-box").show()
    },function() {
    $(this).children(".float-qq-box").hide()
    });
    $(".weixin").hover(function () {
    $(this).children(".float-weixin-box").show()
    },function() {
    $(this).children(".float-weixin-box").hide()
    });
    </script>
    <!--右侧跟随导航结束-->
     
    第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
    [CSS] 
    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    /* 跟随开始 */
    @media (max-width: 767px) {
            .search-form{
                    display: none
            }
    }
    .showscaidan:before {
      content: "\eaf1";
    }
    .shows {
      font-family: "show" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    @font-face {font-family: "iconfont";
      src: url('//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161'); /* IE9 */
      src: url('//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('//at.alicdn.com/t/font_1380870_o08dhovorbr.woff2?t=1567357317161') format('woff2'),
      url('//at.alicdn.com/t/font_1380870_o08dhovorbr.woff?t=1567357317161') format('woff'),
      url('//at.alicdn.com/t/font_1380870_o08dhovorbr.ttf?t=1567357317161') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_1380870_o08dhovorbr.svg?t=1567357317161#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .icon-QQqun:before {
      content: "\e600";
    }
    .icon-weixin:before {
      content: "\e7e5";
    }
    .icon-qqq:before {
      content: "\e623";
    }
    .icon-qqqun2:before {
      content: "\e721";
    }
    .icon-qq:before {
      content: "\e607";
    }
    .icon-qqq1:before {
      content: "\e601";
    }
    .icon-QQmian:before {
      content: "\e630";
    }
    .icon-fankui:before {
      content: "\e61e";
    }
    .icon-rijianmoshi:before {
      content: "\e626";
    }
    .icon-qqqun1:before {
      content: "\e679";
    }
    .icon-quanping2:before {
      content: "\e6e2";
    }
    .icon-qqqun:before {
      content: "\e603";
    }
    .icon-dingbu:before {
      content: "\e643";
    }
    .icon-gongzhonghao:before {
      content: "\e618";
    }
    .icon-VIPx:before {
      content: "\e628";
    }
    .icon-quanping:before {
      content: "\e682";
    }
    .icon-VIP:before {
      content: "\e6b2";
    }
    .icon-quanping1:before {
      content: "\e887";
    }
    .icon-yewan:before {
      content: "\e669";
    }
    .icon-huabanfuben-copy:before {
      content: "\e6b5";
    }
    .icon-Fill:before {
      content: "\e6bd";
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .float-radius{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
    .float-text{color:#f9b015} /* 字体颜色 */
    .ripro-dark a.float-text{color:#f9b015} /* 夜晚模式字体颜色 */
    .float-icon{color:#f9b015} /* 图标颜色 */
    .float-hover{color:#f9b015} /* 鼠标掠过字体颜色 */
    .flost-hover-bg{background-color:#f9b015} /* 鼠标掠过背景颜色 */
    .float-border{border-color:#ececec !important} /* 边框颜色 */
    .float-box{
            width:68px;        /* 宽度 修改之后要修改float-alert-box里的right值,right值计算方式:此数值减去(5*2+2) */
            padding:5px;/* 按钮框边缘留出像素 */
            font-size:14px;/* 按钮字体大小 */
            position:fixed;right:0;top:75%;z-index:9997;
            margin-top:-303px;        /* 自身高度的一半 */
            _position: absolute;_top:expression(eval(document.documentElement.scrollTop+100));        /* 兼容低版本IE */
    }
    .float-ul,.float-ul li{margin:0;padding:0;}
    .float-ul{margin-top:5px;text-align:center;line-height:1.2;list-style:none;background-color:#FFF;box-shadow: 0 2px 5px #e6e6e6;}
    .float-ul .iconfont{font-size:22px;line-height:22px;}
    .float-ul li a{display:block;width:100%;padding:10px 0;line-height:18px;}
    .float-ul li a:hover{
      background: linear-gradient(-125deg,#f9b015 0%, #f7b832 100%);box-shadow: 0 8px 10px rgba(32,160,255,.3);color:#FFF;}
    .float-ul li a.qq{-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;position: relative;}
    .float-ul li a.weixin{position: relative;}
    .float-ul li a.fankui{-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
    .float-ul li a.fankui .iconfont{font-size:22px;line-height:22px;}
    .float-alert-box{width:180px;height:185px;background-color:#FFF;border:1px solid #ececec;position: absolute;right:56px;top:0;z-index:9998;display:none;}
    .srcdict_qd_1:hover {
        background: #ffffff;
        box-shadow: 0 8px 10px rgba(32,160,255,.3);
        color: #0295f9;
    }
    .srcdict_qd_1{
        background: linear-gradient(-125deg,#f9b015 0%, #f7b832 100%);
        box-shadow: 0 8px 10px rgba(32,160,255,.3);
        color: #FFF;
    }
    .float-qq-box{padding:20px 15px;}
    .float-weixin-box{padding:15px;}
    .float-weixin-box img{margin:0 auto;}
    .float-weixin-box p{font-weight:600;color:#f9b015;margin-bottom:5px;}
    .float-alert-box h6{font-size:20px;color:#f9b015;}
    .float-alert-box p{line-height:24px;}
    .float-ul li .float-qq-box{color:#666;}
    .float-ul li .float-weixin-box{color:#666;top:-61px;}
    .float-qq-btn{padding:10px;background-color:#f9b015;color:#FFF;}
    @media screen and (max-width:639px){.float-box{display:none;}}
    /* 跟随结束 */

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有J币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.gaoanj.cn",如遇到无法解压的请联系管理员!

    高岸姬 » RiPro主题美化教程+源码(第四期)
    3
    +855天安全运行
    高岸姬专注高端网站建设
    7
    +7篇本周更新
    我更新我快乐

    VIP免费下载全站资源

    立即了解