折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 191|回复: 5

[CMS类教程] 【Ripro主题美化】仿优设底部修改代码教程

[复制链接]

1万

主题

1万

帖子

150

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2020-1-26 14:14:36 | 显示全部楼层 |阅读模式
效果演示截图:

仿优设底部修改代码效果展示截图

仿优设底部修改代码效果展示截图


修改的php文件路径 wp-content/themes/ripro/footer.php 将附件内的div内容整体复制到文件内保存
  1. <div class="footer-fav">
  2.   <div class="container">
  3.     <div class="fl site-info">
  4.       <h2> <a href="/about" target="_blank"> 折翼天使资源社区</a> </h2>
  5.       <div class="site-p">
  6.         <a href="/about" target="_blank">
  7.           <p>折翼天使资源社区 每天更新的商业源码论坛</p>
  8.           <p>商业源码,软件教程,小程序模块,尽在折翼天使资源社区</p>
  9.         </a>
  10.       </div>
  11.     </div>
  12.     <div class="fr site-fav">
  13.       <a href="#" class="btn btn-fav btn-orange"> <i class="icon-1-heart-border"></i>  按Ctrl+D收藏本站 </a>    </div>
  14.     <div class="site-girl">
  15.       <a href="https://www.zheyitianshi.com" target="_blank">
  16.         <div class="girl fl"> <i class="thumb " style="background-image:url(https://image.uisdc.com/wp-content/uploads/2019/10/ling.png)"></i> </div>
  17.         <div class="girl-info hide_md">
  18.           <h4> 折翼天使资源社区 </h4>
  19.           <h4> [url=home.php?mod=space&uid=400]@柯妮妮[/url] </h4>
  20.         </div>
  21.       </a>
  22.     </div>
  23.   </div>
  24. </div>
复制代码
修改的php文件路径 wp-content/themes/ripro/assets/css/diy.css 将附件内的css内容整体复制进去并保存
  1. /*footer-fav 样式开始*/
  2. .footer-fav {
  3.     position: relative;
  4.     /*z-index: 20;*/
  5.     overflow: hidden;
  6.     width: 100%;
  7.     background: #f7fafc;
  8.     background: #edf3f9
  9. }

  10. [url=home.php?mod=space&uid=9980]@media[/url] (min-width:768px) {
  11.     .footer-fav {
  12.         overflow: visible;
  13.         width: auto;
  14.         background: #edf3f9
  15.     }
  16. }

  17. .footer-fav .container {
  18.     overflow: visible;
  19.     padding-top: 36px;
  20.     padding-bottom: 36px
  21. }

  22. .footer-fav .site-info {
  23.     width: 60%
  24. }

  25. @media (min-width:768px) {
  26.     .footer-fav .site-info {
  27.         display: inline-block;
  28.         width: auto
  29.     }
  30. }

  31. .footer-fav .site-info h2 {
  32.     margin-bottom: 10px;
  33.     text-transform: uppercase;
  34.     font-size: 20px;
  35.     line-height: 1.4
  36. }

  37. @media (min-width:768px) {
  38.     .footer-fav .site-info h2 {
  39.         font-size: 26px
  40.     }
  41. }

  42. .footer-fav .site-info h2 a {
  43.     color: #000
  44. }

  45. .footer-fav .site-info .site-p {
  46.     margin-bottom: 10px
  47. }

  48. .footer-fav .site-info .site-p p:first-child:after {
  49.     content: ','
  50. }

  51. @media (min-width:768px) {
  52.     .footer-fav .site-info .site-p {
  53.         margin-bottom: 0
  54.     }

  55.     .footer-fav .site-info .site-p p:first-child:after {
  56.         content: ''
  57.     }
  58. }

  59. .footer-fav .site-info p {
  60.     display: inline;
  61.     margin-bottom: 10px;
  62.     color: #797979;
  63.     font-size: 9pt;
  64.     line-height: 1.8
  65. }

  66. @media (min-width:768px) {
  67.     .footer-fav .site-info p {
  68.         display: block;
  69.         margin-bottom: 0;
  70.         font-size: 14px
  71.     }
  72. }

  73. .footer-fav .site-fav {
  74.     padding-top: 5px
  75. }

  76. @media (min-width:768px) {
  77.     .footer-fav .site-fav {
  78.         float: right;
  79.         display: block;
  80.         padding-top: 24px
  81.     }
  82. }

  83. .footer-fav .site-fav .btn-orange {
  84.     padding: 0 1.2em;
  85.     font-size: 14px;
  86.     line-height: 2.5
  87. }

  88. @media (min-width:768px) {
  89.     .footer-fav .site-fav .btn-orange {
  90.         padding: 0 2em;
  91.         color: #fff;
  92.         font-size: 1pc;
  93.         line-height: 3.5
  94.     }
  95. }

  96. .footer-fav .site-girl {
  97.     position: absolute;
  98.     bottom: 0;
  99.     left: 50%
  100. }

  101. .footer-fav .site-girl .girl {
  102.     position: absolute;
  103.     bottom: 0;
  104.     left: 0;
  105.     width: 180px;
  106.     transition: all .3s
  107. }

  108. @media (min-width:768px) {
  109.     .footer-fav .site-girl .girl {
  110.         left: -50px
  111.     }
  112. }

  113. .footer-fav .site-girl .girl:after {
  114.     position: absolute;
  115.     top: 40%;
  116.     left: 100%;
  117.     display: block;
  118.     visibility: hidden;
  119.     color: #a7a7a7;
  120.     content: 'Hi~';
  121.     font-size: 20px;
  122.     opacity: 0;
  123.     transition: all .2s;
  124.     transition: all .3s
  125. }

  126. .footer-fav .site-girl .thumb {
  127.     display: block;
  128.     padding-top: 116.667%
  129. }

  130. .footer-fav .site-girl .girl-info {
  131.     margin-bottom: 55px;
  132.     margin-left: 150px
  133. }

  134. .footer-fav .site-girl h4 {
  135.     color: #797979;
  136.     font-weight: 400;
  137.     font-size: 14px;
  138.     line-height: 1.8
  139. }

  140. .footer-fav .site-girl a {
  141.     color: #797979
  142. }

  143. .footer-fav .site-girl a:hover {
  144.     color: #ff5c00
  145. }

  146. @media (min-width:768px) {
  147.     .footer-fav:hover .site-girl .girl {
  148.         left: -5pc
  149.     }

  150.     .footer-fav:hover .site-girl .girl:after {
  151.         visibility: visible;
  152.         opacity: 1;
  153.         transition: all .2s
  154.     }
  155. }

  156. @media (max-width:767px) {
  157.     .footer-fav .btn-group>.btn:last-child {
  158.         border-radius: 3px
  159.     }
  160. }

  161. @media (max-width:767px) {
  162.     .home .footer-fav {
  163.         display: none
  164.     }
  165. }
  166. .btn-orange {
  167.     display: block;
  168.     outline: 0;
  169.     border: none;
  170.     border-radius: 3px;
  171.     background: #746afc;
  172.     color: #fff;
  173.     text-align: center;
  174.     line-height: 2.4;
  175.     cursor: pointer
  176. }
  177. /*footer-fav 样式结束*/
复制代码


游客,如果您要查看本帖隐藏内容请回复
本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-1-26
发表于 2020-1-26 14:41:26 | 显示全部楼层
kk可以用吗
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-2
发表于 2020-2-2 15:54:35 | 显示全部楼层
仿优设底部修改代码教
本站统一解压密码:www.zheyitianshi.com

0

主题

1

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-2
发表于 2020-2-2 18:18:48 | 显示全部楼层
谢谢分享,谢谢楼主
本站统一解压密码:www.zheyitianshi.com

0

主题

2

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-27
发表于 2020-2-27 08:43:55 | 显示全部楼层
感谢分享敖德萨所大大
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-12-6
发表于 2020-3-7 16:32:48 | 显示全部楼层
感谢大佬 其他都收费 只有你免费
本站统一解压密码:www.zheyitianshi.com

QQ|手机版|小黑屋|折翼天使资源社区

GMT+8, 2020-3-31 09:09 , Processed in 0.094322 second(s), 25 queries .

申明:本站资源均来自互联网公开的网络收集整理及二次开发发布,若侵犯了您的合法权益,请告知我们妥善处理。

© 2001-2020 www.zheyitianshi.com 折翼天使资源社区管理团队

快速回复 返回顶部 返回列表