源码程序|模板源码|网站源码|微擎插件|整站源码|站长服务中心 - 源码窝 - YMWO.CN

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

作者 : admin 发布时间: 6月前 10 人阅读 加入收藏

本期内容:添加底部波浪效果、友情链接添加友情链接自助申请界面、添加VIP角标、修改右侧悬浮导航


效果演示(一)




效果演示(一)


教程一、添加底部波浪效果
第一步:主题目录 -> 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 放入如下图片(资源信息见第三期





教程五、修改右侧悬浮导航

第一步:主题目录打开 footer.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
<!--右侧跟随导航开始-->       
 
 
<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;}}
 
/* 跟随结束 */




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