折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 188|回复: 4

[CMS类教程] 【Ripro主题美化】大气的首页分类导航风格修改教程

[复制链接]

1万

主题

1万

帖子

150

积分

网站编辑

Rank: 8Rank: 8

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

分类导航风格展示截图

分类导航风格展示截图


Ripro/parts/home-mode 目录下新建一个名为 mobile2.php,并复制以下内容并粘贴。 (根据自己站点需求修改以下代码内容)
  1. <?php
  2. // 折翼天使资源社区提供
  3. $mobile = _cao('mobile2');
  4. ?>
  5. <div class="home-first-screen"><div class="container">
  6. <div class="parts row">
  7. <div class="col-sm-6 col-md-3 part-first">
  8. <div class="home-first-part home-menus">
  9. <ul>
  10. <li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconjilu"></use> </svg><span>专题汇总</span></a></li>
  11. <li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconyinpin"></use> </svg><span>网站教程</span></a></li>
  12. <li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconkafei"></use> </svg><span>有求必应</span></a></li>
  13. <li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconfensi"></use> </svg><span>本站公告</span></a></li>
  14. <li><a href="/" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconqianbao"></use> </svg><span>资源代下</span></a></li>
  15. <li><a href="/user?action=vip" target="_blank"><svg class="icon" aria-hidden="true"> <use xlink:href="#iconliwu"></use> </svg><span>赞助会员</span></a></li>
  16. </ul>
  17. </div>
  18. </div>
  19. <div class="col-sm-6 col-md-3">
  20. <div class="home-first-part home-topics">
  21. <h2 class="hf-title"><strong><a href="/" target="_blank">每日更新</a></strong><a href="/" target="_blank" class="more">more</a></h2>
  22. <div class="items">
  23. <div class="row">
  24. <div class="col-xs-6">
  25. <a href="/" target="_blank"><span class="thumb" style="background-image:url(https://域名/skin/1.0/images/jrgx.png)"><img src="https://域名/skin/1.0/images/jrgx.png" alt="每日文章更新专题"></span><strong class="title">每日更新</strong></a>
  26. </div>
  27. <div class="col-xs-6">
  28. <a href="/" target="_blank"><span class="thumb" style="background-image:url(https://域名/skin/1.0/images/zdtj.png)"><img src="https://域名/skin/1.0/images/zdtj.png" alt="推荐置顶内容专题"></span><strong class="title">置顶推荐</strong></a>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="col-sm-6 col-md-3">
  35. <div class="home-first-part home-subjects">
  36. <h2 class="hf-title"><strong><a href="/" target="_blank">源码推荐</a></strong><a href="/" target="_blank" class="more">more</a></h2>
  37. <div class="items">
  38. <div class="row">
  39. <div class="col-xs-6">
  40. <a href="/" target="_blank"><span class="thumb" style="background-image:url(http://域名/skin/1.0/images/djjc.png)"><img src="http://cnmmm.com/skin/1.0/images/djjc.png" alt="求源码"></span><strong class="title">有求必应</strong></a>
  41. </div>
  42. <div class="col-xs-6">
  43. <a href="/" target="_blank"><span class="thumb" style="background-image:url(https://域名/skin/1.0/images/qym.png)"><img src="https://域名/skin/1.0/images/qym.png" alt="基础教程"></span><strong class="title">搭建教程</strong></a>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="col-sm-6 col-md-3">
  50. <div class="home-first-part home-course">
  51. <h2 class="hf-title"><strong><a href="/" target="_blank">网站公告</a></strong><a href="/announcement" target="_blank" class="more">more</a></h2>
  52. <div class="courses">
  53. <div class="course-items">
  54. <ul>
  55. <li><a href="/" target="_blank"><strong>本站公告</strong><span>全部公告</span></a></li>
  56. <li><a href="/" target="_blank"><strong>积分获取</strong><span>如何获取积分</span></a></li>
  57. <li><a href="/" target="_blank"><strong>意见反馈</strong><span>意见反馈</span></a></li>
  58. <li><a href="/" target="_blank"><strong>免费帮会员下载</strong><span>资源代下</span></a></li>
  59. </ul>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div></div></div>
复制代码
在ripro/assets/css目录下找到diy.css 并在最下方插入以下内容
  1. /*分类导航2*/
  2. .col-xs-6 {
  3. width: 50%
  4. }
  5. .home-first-screen{background-color: #fff;}

  6. .home-first-screen .images,
  7. .home-first-screen .parts {
  8. margin-bottom: 0;
  9. position: relative
  10. }

  11. .home-first-screen .dubao {
  12. position: relative;
  13. margin-bottom: 5px
  14. }

  15. [url=home.php?mod=space&uid=9980]@media[/url] (min-width:768px) {
  16. .home-first-screen .dubao {
  17. margin-bottom: 10px
  18. }
  19. }

  20. .home-first-screen .row {
  21. margin-left: -5px;
  22. margin-right: -5px
  23. }

  24. .home-first-screen .col-md-3,
  25. .home-first-screen .col-md-6,
  26. .home-first-screen .col-xs-6 {
  27. padding-left: 5px;
  28. padding-right: 5px;
  29. }

  30. .home-first-screen .thumb {
  31. display: block;
  32. width: 100%;
  33. padding-top: 62.22222222%;
  34. border-radius: 3px;
  35. overflow: hidden;
  36. position: relative;
  37. background-position: center top;
  38. background-repeat: no-repeat;
  39. background-size: cover
  40. }

  41. .home-first-screen .thumb:after {
  42. content: '';
  43. display: block;
  44. position: absolute;
  45. left: 0;
  46. top: 0;
  47. width: 100%;
  48. padding-top: 100%;
  49. background: rgba(0, 0, 0, .2);
  50. opacity: 0;
  51. visibility: hidden;
  52. transition: all .2s
  53. }

  54. .home-first-screen .thumb.bigOne {
  55. padding-top: 56.72131148%
  56. }

  57. .home-first-screen .thumb img {
  58. display: none
  59. }

  60. .home-first-screen .items .thumb {
  61. padding-top: 58.82352941%
  62. }

  63. .home-first-screen .images .col-md-6,
  64. .home-first-screen .images .col-xs-6 {
  65. margin-bottom: 10px
  66. }

  67. .home-first-screen .images .item2 {
  68. margin-bottom: 0
  69. }

  70. .home-first-screen .images a {
  71. display: block;
  72. position: relative
  73. }

  74. .home-first-screen .images a strong {
  75. display: block;
  76. position: absolute;
  77. left: 0;
  78. right: 0;
  79. bottom: 0;
  80. padding: .4em .8em .6em;
  81. font-size: 12px;
  82. color: #dadada;
  83. font-weight: 700;
  84. letter-spacing: .5px;
  85. line-height: 1.3;
  86. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .6) 100%);
  87. background-image: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .6) 100%);
  88. background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .6) 100%);
  89. background-repeat: repeat-x;
  90. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#99000000', GradientType=0);
  91. box-shadow: 0 -7px 15px rgba(0, 0, 0, .2);
  92. border-bottom-left-radius: 3px;
  93. border-bottom-right-radius: 3px;
  94. }

  95. @media (min-width:768px) {
  96. .home-first-screen .images a strong {
  97. font-size: 14px;
  98. line-height: 1.4;
  99. font-weight: 400
  100. }
  101. }

  102. .vitara_slide_in .vitara_slide ul li h3 .label {
  103. border-radius: 3px;
  104. padding: 2px 2px 2px 4px;
  105. font-size: 12px;
  106. font-weight: 700
  107. }

  108. .vitara_slide_in .vitara_slide ul li h3 .label {
  109. background: #fff;
  110. color: #525252;
  111. margin-right: 10px;
  112. text-shadow: 0 1px 1px #eee;
  113. box-shadow: 0 1px 1px #666;
  114. -moz-box-shadow: 0 1px 1px #666;
  115. -webkit-box-shadow: 0 1px 1px #666;
  116. padding: 2px 2px 2px 4px
  117. }

  118. .vitara_slide_in .vitara_slide ul li h3 {
  119. position: absolute;
  120. bottom: 0;
  121. left: 0;
  122. z-index: 10;
  123. width: 100%;
  124. padding: 20px;
  125. margin: 0;
  126. font-size: 16px;
  127. color: #fff;
  128. text-align: left;
  129. font-weight: 700;
  130. text-shadow: 0 1px 3px #525252;
  131. box-sizing: border-box;
  132. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .3));
  133. background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .3));
  134. background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .3));
  135. background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, .3))
  136. }

  137. .home-first-screen a:hover .thumb:after {
  138. visibility: visible;
  139. opacity: 1
  140. }

  141. .home-first-screen .dubao {
  142. background: #fff;
  143. padding: 12px 10px 24px;
  144. height: 14px;
  145. border-radius: 3px;
  146. box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  147. overflow: hidden
  148. }

  149. .home-first-screen .dubao h3 {
  150. float: left;
  151. font-size: 14px;
  152. color: #4bbbfa;
  153. font-weight: 400;
  154. line-height: 14px;
  155. padding: 0 10px 0 0;
  156. border-right: 1px solid #ddd
  157. }

  158. .home-first-screen .dubao h3 a {
  159. color: #4bbbfa
  160. }

  161. .home-first-screen .dubao h3 a:hover {
  162. color: #FFF
  163. }

  164. /*3*/

  165. .home-first-screen .dubao .cont {
  166. height: 14px;
  167. overflow: hidden;
  168. position: relative
  169. }

  170. .home-first-screen .dubao .cont a {
  171. display: block;
  172. line-height: 14px;
  173. color: #606060;
  174. font-size: 12px;
  175. transition: all .5s;
  176. position: absolute;
  177. left: 0;
  178. top: 0
  179. }

  180. .home-first-screen .dubao .cont a:hover {
  181. color: #000
  182. }

  183. .home-first-screen .dubao .cont a span {
  184. display: inline-block;
  185. padding: 0 15px;
  186. white-space: nowrap
  187. }

  188. .home-first-screen .parts .hf-title {
  189. font-size: 12px;
  190. padding: 10px 0 20px;
  191. margin-bottom: 0;
  192. height: 16px;
  193. overflow: hidden;
  194. position: relative
  195. }

  196. .home-first-screen .parts .hf-title strong {
  197. color: #525252;
  198. margin-right: 5px;
  199. font-size: 16px;
  200. margin-left: 10px
  201. }

  202. .home-first-screen .parts .hf-title strong:before {
  203. content: '';
  204. display: inline-block;
  205. width: 3px;
  206. height: 16px;
  207. vertical-align: middle;
  208. background: #8e8f90;
  209. margin-right: 6px;
  210. margin-top: -2px
  211. }

  212. .home-first-screen .parts .hf-title strong a {
  213. font-weight: 400;
  214. color: #161616
  215. }

  216. .home-first-screen .parts .hf-title strong a:hover {
  217. color: #4bbbfa
  218. }

  219. .home-first-screen .parts .hf-title span {
  220. font-weight: 400;
  221. color: #d5d5d5
  222. }

  223. .home-first-screen .parts .hf-title .more {
  224. display: block;
  225. position: absolute;
  226. right: 10px;
  227. top: 10px;
  228. font-size: 10px;
  229. text-transform: uppercase;
  230. padding: 0 5px 0;
  231. border-radius: 3px;
  232. border: 1px solid #b1afaf;
  233. color: #b1afaf;
  234. font-weight: 400;
  235. }

  236. .home-first-screen .parts .hf-title .more:hover {
  237. color: #fff;
  238. background: #4bbbfa;
  239. border-color: #4bbbfa
  240. }

  241. .home-first-screen .parts .home-first-part {
  242. background: #fff;
  243. margin-bottom: 10px;
  244. box-shadow: 0 0 1px rgba(0, 0, 0, .1);
  245. }

  246. .home-first-screen .parts .items {
  247. padding: 13px 9px 26px;
  248. }

  249. .home-first-screen .parts .items .col-md-6 {
  250. margin-bottom: 7px
  251. }

  252. .home-first-screen .parts .items a {
  253. display: block
  254. }

  255. .home-first-screen .parts .items .thumb {
  256. margin-bottom: 0px
  257. }

  258. .home-first-screen .parts .items strong {
  259. color: #606060
  260. }

  261. .home-first-screen .parts .items strong.title {
  262. display: block;
  263. line-height: 1.2em;
  264. font-size: 0.8em;
  265. height: 1.4em;
  266. overflow: hidden;
  267. text-align: center;
  268. font-weight: 400
  269. }

  270. .home-first-screen .parts .items a:hover strong {
  271. color: #4bbbfa
  272. }

  273. .home-first-screen .fanye {
  274. position: absolute;
  275. right: 15px;
  276. top: 14px;
  277. background: #fff
  278. }

  279. .home-first-screen .fanye .btn {
  280. display: inline-block;
  281. border: 1px solid #efefef;
  282. vertical-align: middle;
  283. cursor: pointer;
  284. padding-top: 3px;
  285. margin-right: -1px
  286. }

  287. .home-first-screen .fanye .btn i {
  288. vertical-align: text-bottom
  289. }

  290. .home-first-screen .fanye .btn:hover {
  291. border-color: #4bbbfa;
  292. background: #4bbbfa;
  293. color: #fff
  294. }

  295. .home-first-screen .fanye .btn.no,
  296. .home-first-screen .fanye .btn.no:hover {
  297. cursor: default;
  298. background: #fff;
  299. color: #eee;
  300. border-color: #efefef
  301. }

  302. .home-first-screen .fanye .pages {
  303. font-size: 14px;
  304. display: inline-block;
  305. vertical-align: middle;
  306. margin-right: 5px;
  307. margin-top: 4px
  308. }

  309. .home-first-screen .fanye .pages em {
  310. color: #525252;
  311. font-style: normal
  312. }

  313. .home-first-screen .home-course .hf-title {
  314. padding-bottom: 30px;
  315. border-bottom: 1px solid #ddd;
  316. position: relative
  317. }

  318. .home-first-screen .home-course .courses {
  319. margin: 7px 0 10px;
  320. position: relative;
  321. height: 120px;
  322. overflow: hidden
  323. }

  324. .home-first-screen .home-course .course-items {
  325. overflow: hidden;
  326. position: absolute;
  327. left: 0;
  328. right: 0;
  329. top: 0
  330. }

  331. .home-first-screen .home-course ul {
  332. margin: 0 10px 0 12px;
  333. list-style: none;
  334. padding-left: 0px;
  335. }

  336. .home-first-screen .home-course li {
  337. list-style-type: disc;
  338. list-style-position: inside;
  339. line-height: 20px;
  340. height: 20px;
  341. overflow: hidden;
  342. position: relative;
  343. color: #606060;
  344. font-size: 14px;
  345. margin: 6px 0
  346. }

  347. .home-first-screen .home-course li a {
  348. color: #606060
  349. }

  350. .home-first-screen .home-course li a:hover {
  351. color: #4bbbfa
  352. }

  353. /*4*/

  354. .home-first-screen .home-course li strong {
  355. font-weight: 400
  356. }

  357. .home-first-screen .home-course li span {
  358. position: absolute;
  359. right: 0;
  360. top: 0;
  361. font-size: 12px;
  362. display: inline-block;
  363. padding: 0 10px;
  364. line-height: 20px;
  365. background: #fbedd8;
  366. border-radius: 3px;
  367. color: #e2b46d;
  368. }

  369. .home-first-screen .home-menus ul {
  370. margin: 0;
  371. list-style: none;
  372. overflow: hidden;
  373. padding-left: 0px;
  374. }

  375. .home-first-screen .home-menus li {
  376. float: left;
  377. width: 33.33333333%;
  378. text-align: center
  379. }

  380. .home-first-screen .home-menus a {
  381. display: block;
  382. text-align: center;
  383. font-size: 14px;
  384. color: #606060;
  385. position: relative;
  386. line-height: 1.5;
  387. padding: 14px 5px 10px 5px;
  388. box-sizing: border-box;
  389. height: 83px;
  390. transition: all .1s
  391. }

  392. .home-first-screen .home-menus a:hover {
  393. background: #378cfb;
  394. color: #fff
  395. }

  396. .home-first-screen .home-menus a:hover i {
  397. color: #fff
  398. }

  399. .home-first-screen .home-menus a:hover:after,
  400. .home-first-screen .home-menus a:hover:before {
  401. display: none;
  402. visibility: hidden
  403. }

  404. .home-first-screen .home-menus a svg {
  405. font-size: 22px;
  406. line-height: 1.9
  407. }

  408. @media (min-width:768px) {
  409. .home-first-screen .home-menus a svg {
  410. font-size: 24px;
  411. line-height: 1.3
  412. }
  413. }

  414. .home-first-screen .home-menus a span {
  415. display: block;
  416. line-height: 2;
  417. margin-top: 5px;
  418. }

  419. .home-first-screen .home-menus li:nth-child(1) a:before,
  420. .home-first-screen .home-menus li:nth-child(2) a:before,
  421. .home-first-screen .home-menus li:nth-child(4) a:before,
  422. .home-first-screen .home-menus li:nth-child(5) a:before {
  423. content: '';
  424. display: block;
  425. position: absolute;
  426. right: 0;
  427. bottom: 0;
  428. height: 85%;
  429. border-right: 1px solid #ddd
  430. }

  431. .home-first-screen .home-menus li:nth-child(4) a:before,
  432. .home-first-screen .home-menus li:nth-child(5) a:before {
  433. bottom: auto;
  434. top: 0
  435. }

  436. .home-first-screen .home-menus li:nth-child(1) a:after,
  437. .home-first-screen .home-menus li:nth-child(2) a:after,
  438. .home-first-screen .home-menus li:nth-child(3) a:after {
  439. content: '';
  440. display: block;
  441. position: absolute;
  442. right: 0;
  443. bottom: 0;
  444. width: 85%;
  445. border-bottom: 1px solid #ddd
  446. }

  447. .home-first-screen .home-menus li:nth-child(2) a:after {
  448. width: 100%
  449. }

  450. .home-first-screen .home-menus li:nth-child(3) a:after {
  451. right: auto;
  452. left: 0
  453. }

  454. @media (min-width:768px) {
  455. .home-first-screen .parts .home-first-part {
  456. height: 168px
  457. }
  458. .home-first-screen .parts .items a {
  459. height: 130px;
  460. overflow: hidden
  461. }
  462. .home-first-screen .parts .items a strong {
  463. font-size: 14px;
  464. padding-top: 3px
  465. }
  466. .home-first-screen .dubao {
  467. padding: 11px 20px 24px 28px
  468. }
  469. .home-first-screen .dubao h3 {
  470. padding: 0 24px 0 0;
  471. margin-right: 10px
  472. }
  473. .home-first-screen .dubao .cont span {
  474. border-right: 1px solid #ddd
  475. }
  476. .home-first-screen .dubao .cont span:last-child {
  477. border-right: none
  478. }
  479. }

  480. @media (min-width:992px) {
  481. .home-first-screen {
  482. padding: 40px 0 10px
  483. }
  484. .home-first-screen .parts .col-md-3 {
  485. width: 24.998814%;
  486. }
  487. .home-first-screen .parts .col-md-3.part-first {
  488. width: 24.893559%;
  489. }
  490. .home-first-screen .images .item1 {
  491. width: 52.54237288%
  492. }
  493. .home-first-screen .images .item2 {
  494. width: 47.45762711%
  495. }
  496. }
  497. .icon {
  498. width: 1.5em;
  499. height: 1.15em;
  500. vertical-align: -0.25em;
  501. fill: currentColor;
  502. overflow: hidden;
  503. }
复制代码

在ripro/inc/codestar-framework/options目录下找到options.theme.php并搜索关键词“会员开通引导”找到,下面新加一个
  1. 'mobile2' => '分类导航-风格2',
复制代码
找到ripro根目录下的header.php文件并在</head>前插入以下内容

  1. <script src="//at.alicdn.com/t/font_1208165_7qnah1qoq8w.js"></script>
复制代码
最后我们需要找到ripro根目录下的footer.php文件并在最下面插入以下内容
  1. <style type="text/css">
  2. .icon {
  3. width: 1em; height: 1em;
  4. vertical-align: -0.15em;
  5. fill: currentColor;
  6. overflow: hidden;
  7. }
  8. </style>
复制代码
游客,如果您要查看本帖隐藏内容请回复

本站统一解压密码:www.zheyitianshi.com

0

主题

5

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-5-21
发表于 2020-1-27 11:53:18 | 显示全部楼层
鬼斧神工十分广泛受到广泛
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-2
发表于 2020-2-2 14:14:06 | 显示全部楼层
气的首页分类导航风格修改教程 [修改]
高级模式
本站统一解压密码:www.zheyitianshi.com

0

主题

3

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2020-2-28
发表于 2020-2-28 23:40:13 | 显示全部楼层
的深V是大V帅单
本站统一解压密码:www.zheyitianshi.com

0

主题

8

帖子

0

积分

一翼天使

Rank: 1

天使之心
0
注册时间
2019-12-6
发表于 2020-3-8 12:03:33 | 显示全部楼层
太厉害了大佬
本站统一解压密码:www.zheyitianshi.com

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

GMT+8, 2020-3-31 10:38 , Processed in 0.277692 second(s), 25 queries .

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

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

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