当前位置:首页技术教程【7B2主题美化】首页N格样式
!
也想出现在这里? 联系我们
内容广告区块

【7B2主题美化】首页N格样式

仅限于7B2主题,其他主题自行修改。

1.将下列代码放至模块自定义区域(主题设置-模块管理-自定义)

  1. <!-- 首页N格区块html代码 开始 -->
  2. <div id="home-row-qukuai" class=" home_row home_row_1 module-qukuai " style="background-color:;">
  3. <div class="wrapper">
  4. <div class="home-row-left content-area ">
  5. <div class="sort b2-radius" style="margin-top:-100px ;">
  6. <ul class="sort-config">
  7. <li>
  8. <div class="sort-config-item">
  9. <img class="sort-config-icon" src="https://www.guidebook.top/images/logo.svg" alt="" />
  10. <a href="https://nav.guidebook.top" target="_blank"><p class="sort-config-title">数字指南手册
  11. <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  12. </p> </a>
  13. <span class="sort-config-desc">高效工作学习生活手册</span>
  14. </div></li> <li>
  15. <div class="sort-config-item">
  16. <img class="sort-config-icon" src="https://www.guidebook.top/images/search.svg" alt="" />
  17. <a href="https://search.guidebook.top" target="_blank"><p class="sort-config-title">搜索指南
  18. <span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  19. </p> </a>
  20. <span class="sort-config-desc">聚合搜索引擎</span>
  21. </div></li> <li>
  22. <div class="sort-config-item">
  23. <img class="sort-config-icon" src="https://www.guidebook.top/images/danghui.svg" alt="" />
  24. <a href="https://www.guidebook.top" target="_blank"><p class="sort-config-title">公文写作
  25. <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  26. </p> </a>
  27. <span class="sort-config-desc">写作素材收集</span>
  28. </div></li> <li>
  29. <div class="sort-config-item">
  30. <img class="sort-config-icon" src="https://www.guidebook.top/images/news.svg" alt="" />
  31. <a href="https://nav.guidebook.top/hotnews/" target="_blank"><p class="sort-config-title">今日资讯
  32. <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  33. </p> </a>
  34. <span class="sort-config-desc">每日新闻速递</span>
  35. </div></li> <li>
  36. <div class="sort-config-item">
  37. <img class="sort-config-icon" src="https://www.guidebook.top/images/hezuoanli.svg" alt="" />
  38. <a href="/requests" target="_blank"><p class="sort-config-title">项目库
  39. <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span>
  40. </p> </a>
  41. <span class="sort-config-desc">优秀项目列表</span>
  42. </div></li> </ul>
  43. <div class="sort-blocks">
  44. <div class="bt-body">
  45. <div class="containerrr">
  46. <div class="onecad-quk-carousel">
  47. <div class="itemss">
  48. <a class="card_ZQsT- b2-radius" href="https://www.guidebook.top/337/" target="_blank">
  49. <img src="https://www.guidebook.top/images/shetuwang.png">
  50. </a><a class="card_ZQsT- b2-radius" href="http://nav.guidebook.top" target="_blank">
  51. <img src="https://www.guidebook.top/images/wxgzh1.png">
  52. </a>
  53.  
  54. <a class="card_ZQsT- b2-radius" href="https://nav.guidebook.top" target="_blank">
  55. <img src="https://www.guidebook.top/images/101.jpg">
  56. </a>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="srot-mine b2-radius">
  62. <div class="wwads-cn wwads-horizontal" data-id="147" style="width:376px; height:180px;flex-wrap:nowrap;margin-top:0px;background-color:azure;padding:0px;"></div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <!-- 首页N格区块html代码 开始 -->

2.将下列代码放至WP主题额外CSS中(WP后台-外观-自定义-额外css)

  1. /*首页N格样式代码开始*//*角标CSS*/.jiaobiao_color1{
  2. color:#fff;
  3. background-color:#03bbff;
  4. }
  5. .jiaobiao_color2{
  6. color:#fff;
  7. background-color:#ca26ff;
  8. }
  9. .jiaobiao_color3{
  10. color:#fff;
  11. background-color:#7bdcb5;
  12. }
  13. .jiaobiao_color4{
  14. color:#fff;
  15. background-color:#ff2a8e;
  16. }
  17. .jiaobiao_color5{
  18. color:#fff;
  19. background-color:#ff8f21;
  20. }
  21. .jiaobiao_color6{
  22. color:#fff;
  23. background-color:#10e396;
  24. }
  25. .tipss,.meta-post-type {
  26. position: absolute;
  27. top: 0px;
  28. right: -64px;
  29. z-index: 1;
  30. width: 150px;
  31. height: 22px;
  32. color: #fff;
  33. line-height: 25px;
  34. -webkit-transform: rotate(45deg);
  35. transform: rotate(45deg);
  36. text-align: center;
  37. font-size: 12px;
  38. }
  39. .yellow {
  40. background-color: var(--b2color);
  41. }
  42. .sort {
  43. position: relative;
  44. z-index: 3;
  45. padding: 26px;
  46. background: #fff;
  47. /* border: 1px solid #797c80; */ /* -webkit-box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */ /* box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); */ -webkit-backdrop-filter: blur(10px);
  48. backdrop-filter: blur(10px);
  49. }
  50. .sort-config {
  51. display: -webkit-box;
  52. display: -ms-flexbox;
  53. display: flex;
  54. -webkit-box-pack: justify;
  55. -ms-flex-pack: justify;
  56. justify-content: space-between;
  57. }
  58. .main {
  59. width: 1410px;
  60. margin: 0 auto;
  61. padding-bottom: 40px;
  62. }
  63. .sort-config>li {
  64. -webkit-box-flex: 1;
  65. -ms-flex: 1;
  66. flex: 1;
  67. overflow: hidden;
  68. height: 100%;
  69. }
  70. .ibanner-tips-float {
  71. position: absolute;
  72. top: -70px;
  73. left: 1096px;
  74. z-index: 24;
  75. }
  76. .sort-config-item {
  77. display: block;
  78. height: 100%;
  79. }
  80. .sort-config-item img {
  81. float: left;
  82. width: 62px;
  83. height: 62px;
  84. margin-right: 12px;
  85. }
  86. .sort-config-title {
  87. line-height: 34px;
  88. font-size: 18px;
  89. font-weight: 600;
  90. color: #2d2d2d;
  91. -webkit-transition: .3s;
  92. transition: .3s;
  93. }
  94. .sort-config-desc {
  95. float: left;
  96. line-height: 22px;
  97. font-size: 14px;
  98. color: #8e8e8e;
  99. }
  100. .sort-blocks {
  101. display: -webkit-box;
  102. display: -ms-flexbox;
  103. display: flex;
  104. -webkit-box-pack: justify;
  105. -ms-flex-pack: justify;
  106. justify-content: space-between;
  107. height: 100%;
  108. margin-top: 35px;
  109. }
  110. .sort-blocks-item {
  111. position: relative;
  112. overflow: hidden;
  113. width: 214px;
  114. height: 100%;
  115. background: #f7f9fa;
  116. border-radius: 14px;
  117. }
  118. .sort-blocks-item .blocks-item-wrap {
  119. -webkit-transition: .3s;
  120. transition: .3s;
  121. -webkit-filter: none;
  122. filter: none;
  123. }
  124. .sort-blocks-icon {
  125. display: block;
  126. width: 60px;
  127. height: 47px;
  128. margin: 18px auto 15px;
  129. background-repeat: no-repeat;
  130. background-size: cover;
  131. }
  132. .sort-blocks-title {
  133. line-height: 22px;
  134. font-size: 22px;
  135. font-weight: 600;
  136. color: #2d2d2d;
  137. letter-spacing: 1px;
  138. text-align: center;
  139. }
  140. .sort-mine-wrap img {
  141. display: flex;
  142. width: auto;
  143. }
  144. .sort-config-title .go {
  145. border-radius: 4px;
  146. color: #ffffff;
  147. font-size: 13px;
  148. -webkit-transform: scale(.9);
  149. -ms-transform: scale(.9);
  150. transform: scale(.9);
  151. font-weight: normal;
  152. padding: 2px 5px;
  153. position: absolute;
  154. line-height: 15px;
  155. margin-left: 5px;
  156. cursor: pointer;
  157. text-transform: uppercase;
  158. vertical-align: middle;
  159. margin-top: 7px;
  160. }
  161. .sort-blocks-item .blocks-hover, .sort-blocks-item .blocks-hover-title {
  162. position: absolute;
  163. top: 0;
  164. width: 100%;
  165. color: #fff;
  166. text-align: center;
  167. line-height: 22px;
  168. }
  169. .sort-blocks-item .blocks-hover {
  170. left: 0;
  171. height: 100%;
  172. padding-top: 22px;
  173. font-size: 14px;
  174. background: rgba(0,0,0,.4);
  175. -webkit-transition: .3s;
  176. transition: .3s;
  177. opacity: 0;
  178. }
  179. .sort-blocks-item .blocks-hover-tit {
  180. line-height: 18px;
  181. font-size: 18px;
  182. }
  183. .sort-blocks-item .blocks-hover-line {
  184. width: 158px;
  185. height: 1px;
  186. margin: 12px auto 8px;
  187. background: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(30%,hsla(0,0%,100%,.7)),color-stop(70%,hsla(0,0%,100%,.7)),to(hsla(0,0%,100%,.1)));
  188. background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.7) 30%,hsla(0,0%,100%,.7) 70%,hsla(0,0%,100%,.1));
  189. }
  190. .srot-mine {
  191. position: relative;
  192. width: 376px;
  193. background: -webkit-gradient(linear,left top,right top,from(#fdf8eb),to(#feeec3));
  194. background: linear-gradient(90deg,#fdf8eb,#feeec3);
  195. height: 180px;
  196. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
  197. }
  198. .srot-mine-bg {
  199. position: absolute;
  200. top: 13px;
  201. right: -13px;
  202. width: 118px;
  203. height: 78px;
  204. background: url(./Center/Assets/images/sort_zuanshi.png) no-repeat;
  205. background-size: cover;
  206. }
  207. .sort-mine-wrap {
  208. position: absolute;
  209. left: 0;
  210. top: 0;
  211. z-index: 1;
  212. width: 100%;
  213. height: 100%;
  214. padding: 12px 16px 15px;
  215. }
  216. .srot-mine-tit {
  217. display: -webkit-box;
  218. display: -ms-flexbox;
  219. display: flex;
  220. line-height: 25px;
  221. }
  222. .srot-mine-ava {
  223. width: 20px;
  224. height: 20px;
  225. border-radius: 50%;
  226. }
  227. .srot-mine-tit>span {
  228. margin-left: 9px;
  229. font-size: 15px;
  230. font-weight: 600;
  231. color: #613c14;
  232. }
  233. .srot-mine-vips {
  234. display: flex;
  235. -webkit-box-pack: justify;
  236. justify-content: space-between;
  237. width: 337px;
  238. margin: 15px 0px 5px;
  239. }
  240. .sort-vips-item {
  241. display: block;
  242. -webkit-box-flex: 1;
  243. -ms-flex: 1;
  244. flex: 1;
  245. text-align: center;
  246. }
  247. .sort-vips-icon {
  248. display: block;
  249. width: 32px;
  250. height: 36px;
  251. margin: 0 auto;
  252. -webkit-transition: .3s;
  253. transition: .3s;
  254. margin-left: 30px;
  255. }
  256. .sort-vips-tit {
  257. margin: 15px 0px;
  258. line-height: 12px;
  259. font-size: 13px;
  260. color: #613c14;
  261. margin-left: 10px;
  262. }
  263. .sort-vips-tit2-kt {
  264. margin-top: 10px;
  265. line-height: 12px;
  266. display: flex;
  267. justify-content: center;
  268. align-items: center;
  269. height: 25px;
  270. color: #ffffff;
  271. border-radius: 33px;
  272. margin-right: 10px;
  273. font-size: 14px;
  274. background-image: linear-gradient(90deg,#ffc046,#ff7d04);
  275. margin: 10px 0px 0px 9px;
  276. }
  277. .sort-vips-tit2-wk {
  278. margin-top: 10px;
  279. line-height: 12px;
  280. display: flex;
  281. justify-content: center;
  282. align-items: center;
  283. height: 25px;
  284. color: #ffffff;
  285. border-radius: 33px;
  286. margin-right: 10px;
  287. font-size: 14px;
  288. opacity: 0.5;
  289. background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%); background-blend-mode: multiply;
  290. margin: 10px 0px 0px 9px;
  291. }
  292. .bt-body {
  293. padding-bottom: 0px;
  294. background: transparent;
  295. width: calc(100% - 376px);
  296. }
  297. .b-boxs .video .s-pic{height: 189px;}
  298. .b-boxs .video .video-view {height: 186px;width: 337px; overflow: hidden; cursor: pointer;display: block;}
  299. .b-boxs .video:hover .video-view .img-none{display: none;}
  300. .b-boxs .video .video-view video{width: 337px;}
  301. .b-boxs .video:hover .video-view video{display: block;}
  302. .b-boxs .video .mark{height: 189px; display: none;}
  303. .b-boxs .video:hover .mark{display: none;}
  304. .b-boxs .video .v-down{
  305. position: absolute;
  306. top: 12px;
  307. left: 57%;
  308. z-index: 2;
  309. margin-left: 65px;
  310. padding-left: 21px;
  311. width: 45px;
  312. height: 31px;
  313. border-radius: 2px;
  314. background: url(./Center/Assets/images/video.png) -8px -77px no-repeat #007aff;
  315. color: #fff;
  316. font-size: 20px;
  317. font-size: 14px;
  318. line-height: 31px;
  319. opacity: 0;
  320. cursor: pointer;
  321. -moz-opacity: 0;
  322. -khtml-opacity: 0;
  323. }
  324. .b-boxs .video .v-down:hover {
  325. background: url() -5px -77px no-repeat #6e91e6;
  326. }
  327. .b-boxs .video .v-collect{
  328. width: 31px;
  329. height: 31px;
  330. line-height: 31px;
  331. position: absolute;
  332. left: 58%;
  333. top: 12px;
  334. margin-left: 23px;
  335. color: #333;
  336. font-size: 20px;
  337. border-radius: 2px;
  338. z-index: 2;
  339. background: url(./Center/Assets/images/video.png) -11px 5px no-repeat #fff;
  340. padding-left: 0px;
  341. cursor: pointer;
  342. filter: alpha(opacity=0);
  343. ilter: alpha(opacity=0);
  344. -moz-opacity: 0;
  345. -khtml-opacity: 0;
  346. opacity: 0;
  347. font-size: 17px;
  348. letter-spacing: 7px;
  349. }
  350. .b-boxs .video:hover .v-collect,.b-boxs .video:hover .v-down{
  351. filter: alpha(opacity=1);
  352. ilter: alpha(opacity=1);
  353. -moz-opacity: 1;
  354. -khtml-opacity: 1;
  355. opacity: 1;
  356. }
  357. .b-boxs .video .chosed{
  358. background: url(./Center/Assets/images/video.png) -11px -36px no-repeat #fff;
  359. }
  360. .b-boxs .video .title {
  361. position: absolute;
  362. bottom: 0px;
  363. left: 0px;
  364. width: 316px;
  365. height: 30px;
  366. line-height: 30px;
  367. color: #ffffff;
  368. text-align: left;
  369. z-index: 1;
  370. overflow: hidden;
  371. white-space: nowrap;
  372. -o-text-overflow: ellipsis;
  373. text-overflow: ellipsis;
  374. font-size: 12px;
  375. background: #00000075;
  376. background-color: #1677ff00;
  377. background-image: linear-gradient(-90deg, #00000000, #000000);
  378. }
  379. .b-box .audio-box {
  380. width: 340px;
  381. height: 160px;
  382. float: left;
  383. margin-right: 16px;
  384. margin-bottom: 16px;
  385. margin-top: 0px;
  386. position: relative;
  387. overflow: hidden;
  388. box-shadow: 0 0px 9px rgba(0,0,0,.1);
  389. background: #ffffff;
  390. box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  391. border-radius: 10px;
  392. }
  393. .b-boxs .video:hover .video-bq,.b-boxs .video:hover .title{
  394. display: none;
  395. }
  396. .b-boxs .video:hover .mc-bottom{
  397. display:none;
  398. }
  399. .b-boxs .video .mc-bottom{
  400. display: inline-block;
  401. position: absolute;
  402. width: 100%;
  403. height: 32%;
  404. left: 0;
  405. bottom: 0;
  406. background: #000;
  407. opacity: .4 \9 \0;
  408. background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
  409. background: -webkit-gradient(linear, bottom, top, color-stop(0, rgba(0, 0, 0, .4)), color-stop(100%, transparent));
  410. background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
  411. background: -o-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
  412. background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .4) 0, transparent 100%);
  413. background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .4)), to(transparent));
  414. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
  415. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
  416. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
  417. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .4)), to(transparent));
  418. background: linear-gradient(to top, rgba(0, 0, 0, .4) 0, transparent 100%);
  419. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
  420. -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#000000, endColorstr=#ffffff)";
  421. }
  422. .good-ppt {
  423. width: 100%;
  424. }
  425. .topic-title {
  426. height: 41px;
  427. color: #484747;
  428. text-align: left;
  429. }
  430. .wlimits {
  431. margin-right: -59px;
  432. }
  433. .topic-title .jptitle {
  434. display: inline-block;
  435. width: 280px;
  436. color: #000;
  437. letter-spacing: 2px;
  438. font-size: 24px;
  439. }
  440. .topic-title .jptitle .shiping {
  441. display: inline-block;
  442. width: 87px;
  443. height: 63px;
  444. background: url(../image/tb.png) 0px -345px no-repeat;
  445. vertical-align: -23px;
  446. }
  447. .topic-title ul {
  448. display: inline-block;
  449. float: right;
  450. }
  451. .topic-title ul li {
  452. display: inline-block;
  453. }
  454. .topic-title ul li a {
  455. display: inline-block;
  456. margin-right: 6px;
  457. padding: 0 10px;
  458. height: 35px;
  459. /* border: 1px solid #e5e5e5; */ /* background: #fff; */ color: #606060;
  460. font-size: 14px;
  461. line-height: 35px;
  462. }
  463. .topic-title ul li em {
  464. display: inline-block;
  465. height: 14px;
  466. width: 1px;
  467. background: #b7b7b7;
  468. vertical-align: -2px;
  469. }
  470. .b-boxs {
  471. margin-right: -16px;
  472. overflow: hidden;
  473. }
  474. .b-boxs .s-box {
  475. width: 337px;
  476. height: auto;
  477. float: left;
  478. margin-right: 19px;
  479. margin-bottom: 36px;
  480. position: relative;
  481. overflow: hidden;
  482. box-shadow: 0 3px 9px rgba(0,0,0,.1);
  483. background: #ffffff;
  484. }
  485. .b-boxs .s-box .s-pic {
  486. width: 100%;
  487. height: 407px;
  488. }
  489. .lazy {
  490. display: block;
  491. width: 100%;
  492. height: 100%;
  493. }
  494. @media screen and (max-width: 768px){
  495. .flickity-enabled.is-draggable {
  496. margin-top: 0px;
  497. }
  498. }
  499. .b2-menu-4 .sub-menu-0 li ul a:hover {
  500. font-weight: 500;
  501. border-radius: 3px;
  502. color: #ff416c;
  503. }
  504. .b2-menu-4 .sub-menu-0 li ul a {
  505. font-size: 16px;
  506. font-weight: 400;
  507. color: #333333;
  508. padding: 8px 0;
  509. display: flex;
  510. align-items: center;
  511. margin-top: 0px;
  512. }
  513. .containerrr { margin: 0px auto;width:100%; }
  514. @media screen and (max-width: 1366px) {
  515. .containerrr {
  516. margin: 0px auto;
  517. width: 830px;
  518. }
  519. .srot-mine {
  520. width: 355px;
  521. }
  522. }
  523. .containerrr .itemss a {
  524. display: inline-block;
  525. margin-right: 16px;
  526. width: calc(100% - 16px);
  527. height: 180px;
  528. text-align: center;
  529. }
  530. .card_ZQsT- {
  531. height: 192px;
  532. width: 128px;
  533. display: inline-block;
  534. vertical-align: top;
  535. cursor: pointer;
  536. white-space: normal;
  537. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
  538. background: #FFFFFF;
  539. overflow: hidden;
  540. position: relative;
  541. box-sizing: border-box;
  542. padding: 0px 0 16px 0;
  543. margin-right: 16px;
  544. text-decoration: none;
  545. transition: all 0.3s;
  546. }
  547. .card_ZQsT-:hover {
  548. display: inline-block;
  549. vertical-align: top;
  550. cursor: pointer;
  551. white-space: normal;
  552. box-shadow: 0 2px 5px 0 rgb(0 0 0 / 4%);
  553. background: #FFFFFF;
  554. overflow: hidden;
  555. position: relative;
  556. box-sizing: border-box;
  557. padding: 0px 0 16px 0;
  558. margin-right: 16px;
  559. text-decoration: none;
  560. transform: translateY(-3px);
  561. }
  562. .card_img{
  563. display: block;
  564. height: 180px;
  565. }
  566. .card_ZQsT- .title_3qCGt {
  567. font-size: 14px;
  568. color: #222222;
  569. height: 35px;
  570. background-color: #fff;
  571. line-height: 35px;
  572. width: 100%;
  573. position: absolute;
  574. display: block;
  575. margin-top: -35px;
  576. }
  577. .card_ZQsT- img{
  578. height: 180px;
  579. width: 100%;
  580. }
  581. .card_ZQsT- .year-tag_3Iqeg {
  582. height: 19px;
  583. min-width: 52px;
  584. width: fit-content;
  585. max-width: 100%;
  586. overflow: hidden;
  587. position: absolute;
  588. top: 6px;
  589. left: 6px;
  590. text-align: center;
  591. line-height: 19px;
  592. font-size: 12px;
  593. color: #FFFFFF;
  594. box-sizing: border-box;
  595. padding: 0 8px;
  596. border-radius: 10px;
  597. }
  598. .huodong{background:#0693e3}
  599. .remen{background:#fcb900}
  600. .jingping{background:#cf2e2e}
  601. .guanggao{background:#00d084}
  602. .tuijain{background:#ff6900}
  603. .yuliu{background:#0693e3}
  604. .onecad-quk-carousel .itemss {
  605. white-space: nowrap;
  606. width: 100%;
  607. display: flex;
  608. -webkit-overflow-scrolling: touch;
  609. -webkit-box-pack: justify;
  610. -moz-box-pack: justify;
  611. justify-content: space-between;
  612. }
  613. .onecad-quk-carousel .itemss::-webkit-scrollbar {
  614. display: none;
  615. }
  616. #OneCAD .hotUser {
  617. margin-top: 20px;
  618. }
  619. #OneCAD .hotUser .hotUser-title {
  620. position: relative;
  621. margin-bottom: 15px;
  622. width: 1180px;
  623. }
  624. #Onecad_hotuser i.b2-vrenzhengguanli {
  625. position: static;
  626. bottom: -4px;
  627. right: -4px;
  628. font-weight: 400;
  629. line-height: 25px;
  630. background: #fff;
  631. border-radius: 100%;
  632. width: 25PX;
  633. height: 25px;
  634. display: inline-block;
  635. font-size: 25px;
  636. color: #ff3a55!important;
  637. }
  638. #OneCAD .hotUser h2 {
  639. font-size: 26px;
  640. font-weight: normal;
  641. }
  642. #OneCAD .hotUser-list {
  643. display: flex;
  644. flex-wrap: wrap;
  645. margin-left: -15px;
  646. }
  647. #OneCAD .hotUser-list .itme {
  648. position: relative;
  649. width: 25%;
  650. padding-left: 15px;
  651. margin-bottom: 15px;
  652. text-align: center;
  653. }
  654. #OneCAD .hotUser-list .itme .user-vip {
  655. border-radius: 3px;
  656. display: inline-block;
  657. background: linear-gradient(180.03deg, #393F68 0%, #24263C 100%);
  658. padding: 3px 6px;
  659. font-size: 11px;
  660. line-height: 15px;
  661. height: auto;
  662. }
  663. #OneCAD .hotUser-list .itme>div {
  664. background-color: #fff;
  665. transition: all .3s;
  666. }
  667. #OneCAD .hotUser-list .itme:nth-child(4n) {
  668. margin-right: 0;
  669. }
  670. #OneCAD .hotUser-list .itme>div:hover {
  671. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  672. box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  673. -webkit-transform: translateY(-3px);
  674. -ms-transform: translateY(-3px);
  675. transform: translateY(-3px);
  676. }
  677. #OneCAD .hotUser-list .i-banner {
  678. position: relative;
  679. height: 120px;
  680. background: #ccc;
  681. }
  682. #OneCAD .hotUser-list .i-banner .i-cover {
  683. width: 100%;
  684. height: 100%;
  685. object-fit: cover;
  686. }
  687. #OneCAD .hotUser-list .i-banner .avatar-wrap {
  688. position: absolute;
  689. left: 50%;
  690. bottom: 0;
  691. margin: -42px;
  692. }
  693. #OneCAD .hotUser-list .avatar-wrap img {
  694. width: 84px;
  695. height: 84px;
  696. border-radius: 50%;
  697. object-fit: cover;
  698. }
  699. #OneCAD .hotUser-list .itme .i-content {
  700. padding: 54px 8px 8px 8px;
  701. }
  702. #OneCAD .hotUser-list .itme .i-inline {
  703. height: 28px;
  704. line-height: 28px;
  705. white-space: nowrap;
  706. overflow: hidden;
  707. }
  708. #OneCAD .hotUser-list .itme .i-username {
  709. color: #333;
  710. font-size: 16px;
  711. font-weight: bold;
  712. }
  713. #OneCAD .hotUser-list .itme .i-desc {
  714. display: inline-flex;
  715. font-size: 12px;
  716. background: #f3f3f3;
  717. padding: 5px 6px;
  718. margin: 10px 0;
  719. color: #606266;
  720. }
  721. #OneCAD .hotUser-list .itme .i-follow {
  722. font-size: 13px;
  723. margin-bottom: 10px;
  724. }
  725. #OneCAD .hotUser-list .itme .i-follow span {
  726. color: #909399;
  727. display: inline-block;
  728. position: relative;
  729. margin: 0 5px;
  730. }
  731. #OneCAD .hotUser-list .itme .i-follow span b {
  732. color: #333;
  733. font-weight: bold;
  734. margin: 0 3px;
  735. }
  736. #OneCAD .post-style-5-top {
  737. margin-top: 0;
  738. }
  739. /*首页N格样式代码结束*/
技术教程未分类

【嘉然live2d】来给网站添加一个live2d

2022-7-20 16:54:48

技术教程

【7B2主题美化】登陆弹窗美化

2022-10-20 14:55:40

版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
😊 表情
  • 眞白花音
  • 枕边童话
  • 嘉然
  • 雫るる
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索