Ana Sayfa Keşfet Yardım
Giriş Yap
919693957
/
site
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Ağaç: 4428a537e6
Dallar Biçim İmleri
site
/
public
/
static
/
admin
/
layui2.5.6
/
main.css

main.css 12 KB
Geçmiş Ham

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 
  1. /**
    2. 

  2.  
    3. 

  3.  @Name: layuiSimpleBlog - 极简博客模板
    4. 

  4.  @Author: xuzhiwen
    5. 

  5.  @Copyright: layui.com
    6. 

  6.  
    7. 

  7.  */
    8. 

  8. 

  9. 

  10. /*end-menu-btn*/
    11. 

  11. 

  12. 

  13. 

  14. body{font: 14px 宋体 Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; overflow-x: hidden;}
    15. 

  15. .w1000{max-width: 1000px!important; margin:0 auto;}
    16. 

  16. .header{height: 120px; line-height: 120px; position: relative; font-size: 16px;}
    17. 

  17. .header .logo,.header .welcome-text,.header .nav{position: absolute; top: 0;}
    18. 

  18. .header .logo{left: 65px;}
    19. 

  19. .header .logo span{display: none;}
    20. 

  20. .header .nav{left: 250px;}
    21. 

  21. .header .nav a{color: #3f2863; margin:0 40px;}
    22. 

  22. .header .nav a.active{color: #ff7f21;}
    23. 

  23. .header .welcome-text{right: 50px;}
    24. 

  24. .header .header-down-nav{display: none;}
    25. 

  25. 

  26. 

  27. .banner{height: 600px; width: 100%; background: url(../img/banner.jpg) no-repeat; background-size:cover;}
    28. 

  28. .banner .cont{position: relative;}
    29. 

  29. .banner .title{color: #fff; position: absolute; top: 152px; left: 0;}
    30. 

  30. .banner .title h3{font-size: 80px; line-height: 88px;}
    31. 

  31. .banner .title h4{font-size: 46px;}
    32. 

  32. .banner .amount{font-size: 18px; line-height: 50px; color: #ff7f21; position: absolute; right: 20px; top: 290px;}
    33. 

  33. .banner .text{position: relative; width: 80px; display: inline-block;}
    34. 

  34. .banner .text::before { position: absolute; right: -5px; content: '\FF1A';}
    35. 

  35. 

  36. 

  37. .content{padding:100px 0 160px 0;}
    38. 

  38. .content .cont .title{margin-bottom: 60px;}
    39. 

  39. .content .cont .title a{font-size: 16px; color: #000!important;}
    40. 

  40. .content .cont .title .layui-breadcrumb span{position: relative; top: -1px; margin:0 16px;}
    41. 

  41. .content .cont .title a.active,.content .cont .title a:hover{color: #ff7f21!important;}
    42. 

  42. .content .cont .list-item .layui-fluid{padding:0;}
    43. 

  43. .content .cont .list-item .item{margin-bottom: 80px; overflow: hidden;}
    44. 

  44. .content .cont .list-item .item .img img{width: 100%;}
    45. 

  45. .content .cont .list-item .item .item-cont{padding-left: 100px;}
    46. 

  46. .content .cont .list-item .item .item-cont .go-icon{width: 33px; height: 11px; background: url(../img/jiantou.png) center center no-repeat; display: block; padding:10px 0; margin-top: 16px;}
    47. 

  47. .content .cont .list-item .item .item-cont h3{font-size: 24px; margin:20px 0;}
    48. 

  48. .content .cont .list-item .item .item-cont h3 .new-icon{width: 36px; height: 18px; line-height: 18px; text-align: center; padding:0; margin: -3px 0 0 10px;}
    49. 

  49. .content .cont .list-item .item .item-cont h5{font-size: 12px; color: #ff7f21; margin-bottom: 32px;}
    50. 

  50. .content .cont .list-item .item .item-cont p{line-height: 37px;
    51. 

  51.    display: -webkit-box;
    52. 

  52.   -webkit-box-orient: vertical;
    53. 

  53.   -webkit-line-clamp: 2;
    54. 

  54.   overflow: hidden;
    55. 

  55.   /* autoprefixer: off */
    56. 

  56.   -webkit-box-orient: vertical;
    57. 

  57.   /* autoprefixer: on */
    58. 

  58. }
    59. 

  59. .content .review-version{padding:20px; border-top: 1px dashed #dddddd;}
    60. 

  60. .content .review-version img{float: left;}
    61. 

  61. .content .review-version .form{margin-bottom: 16px;}
    62. 

  62. .content .review-version .form .layui-form-item{clear: none;}
    63. 

  63. .content .review-version .form .layui-input-block{margin-left: 70px;}
    64. 

  64. .content .review-version .form .layui-input-block .layui-btn{width: 100px; height: 40px; line-height: 40px; background: #ff7f21;}
    65. 

  65. .content .review-version .list-cont .cont{padding:40px 0 30px 0; border-bottom: 1px solid #e5e5e5;}
    66. 

  66. .content .review-version .list-cont .cont:last-child{border-bottom: 0;}
    67. 

  67. .content .review-version .list-cont .cont .text{padding-left: 70px; line-height: 22px; color: #333; } 
    68. 

  68. .content .review-version .list-cont .cont .text .tit{margin-bottom: 18px;}
    69. 

  69. .content .review-version .list-cont .cont .text .data{float: right;} 
    70. 

  70. 

  71. 

  72. .footer-wrap{border-top: 1px solid #402863;}
    73. 

  73. .footer{padding:60px 0 80px 0; position: relative; overflow: hidden;}
    74. 

  74. .footer .qrcode{float: left;}
    75. 

  75. .footer .practice-mode{position: absolute; right: 0; overflow: hidden;}
    76. 

  76. .footer .practice-mode img{float: left;  padding-right: 28px;}
    77. 

  77. .footer .practice-mode .text{color: #3f2863; float: left;}
    78. 

  78. .footer .practice-mode .text h4{font-size: 20px; line-height: 60px;}
    79. 

  79. .footer .practice-mode .text p{line-height: 32px;}
    80. 

  80. .footer .practice-mode .text p span{padding-left: 24px;}
    81. 

  81. 

  82. 

  83. 

  84. 

  85. 

  86. 

  87. /*whisper*/
    88. 

  88. .whisper-content{padding:40px 0 100px 0;}
    89. 

  89. .whisper-content .item-box{background: #f9f9f9; margin-bottom: 20px;}
    90. 

  90. .whisper-content .cont{max-width: 800px; margin:0 auto;}
    91. 

  91. .whisper-content .cont .item-box .item{padding:50px 46px 20px 54px;}
    92. 

  92. .whisper-content .cont .whisper-list .whisper-title{height: 20px; line-height: 20px; margin-bottom: 20px;}
    93. 

  93. .whisper-content .cont .whisper-list .whisper-title i{position: relative; top: 1px; margin-right: 5px;}
    94. 

  94. .whisper-content .cont .whisper-list .whisper-title span{color: #ff7f21;}
    95. 

  95. .whisper-content .cont .whisper-list .whisper-title span.hour{margin-right: 20px;}
    96. 

  96. .whisper-content .whisper-list .text-cont{line-height: 24px; margin-bottom: 28px;}
    97. 

  97. .whisper-content .whisper-list .op-list{margin-top: 30px; overflow: hidden;}
    98. 

  98. .whisper-content .whisper-list .op-list .like{ -webkit-user-select: none;
    99. 

  99. -moz-user-focus: none;
    100. 

  100. -moz-user-select: none;}
    101. 

  101. .whisper-content .whisper-list .op-list .like.active{color: #ff7f21;}
    102. 

  102. .whisper-content .whisper-list .op-list p{float: left; cursor: pointer; color: #999999;}
    103. 

  103. .whisper-content .whisper-list .op-list p.off{float: right; -webkit-user-select: none;
    104. 

  104. -moz-user-focus: none;
    105. 

  105. -moz-user-select: none;}
    106. 

  106. .whisper-content .whisper-list .op-list p.off span{margin-right: 5px;}
    107. 

  107. .whisper-content .whisper-list .op-list p.like{margin-right: 50px;}
    108. 

  108. .whisper-content .whisper-list .img-box{overflow: hidden;}
    109. 

  109. .whisper-content .whisper-list .img-box img{float: left; margin: 0px 18px 18px 0;}
    110. 

  110. .whisper-content .whisper-list .img-box img:last-child{margin-right: 0;}
    111. 

  111. /*end-whisper*/
    112. 

  112. 

  113. 

  114. 

  115. 

  116. 

  117. 

  118. /*leacots*/
    119. 

  119. .leacots-content .review-version{padding:0; border-top: 0;}
    120. 

  120. .leacots-content .review-version .form .layui-form-item{clear: both;}
    121. 

  121. .leacots-content .item-box{background: transparent;}
    122. 

  122. .leacots-content .review-version .form{margin: 70px 0;}
    123. 

  123. .leacots-content .review-version .form textarea{border-color: #402760;}
    124. 

  124. .leacots-content .review-version .form .layui-input-block{margin-left: 0;}
    125. 

  125. .leacots-content .review-version .banner-img{float: none;  width: 100%;}
    126. 

  126. .leacots-content .review-version .volume{color: #3f2469;}
    127. 

  127. .leacots-content .review-version .volume span{padding-left: 30px; color: #f37d25;}
    128. 

  128. .leacots-content .review-version .list-cont .cont{max-width: 100%;}
    129. 

  129. /*end-leacots*/
    130. 

  130. 

  131. 

  132. 

  133. /*details*/
    134. 

  134. .details-content .article-cont img{float: none; width: 100%;}
    135. 

  135. .details-content .article-cont .title{text-align: center; margin-bottom: 0;}
    136. 

  136. .details-content .article-cont .title h3{font-size: 24px; margin-bottom: 36px;}
    137. 

  137. .details-content .article-cont .title p{padding:0;}
    138. 

  138. .details-content .article-cont .title p.cont-info{text-indent: 0;}
    139. 

  139. .details-content .article-cont .title p .data{margin-right: 26px;}
    140. 

  140. .details-content .article-cont .title p .types{color: #ff7f21;}
    141. 

  141. .details-content .article-cont p{line-height: 24px; padding:30px 0 30px 5px; color: #333; text-indent: 40px;}
    142. 

  142. .details-content .article-cont .btn-box{text-align: center; margin-top: 50px;}
    143. 

  143. /*end-details*/
    144. 

  144. 

  145. 

  146. /*album*/
    147. 

  147. .album-content .img-info{margin-top: 66px; overflow: hidden; font-size: 16px; margin-bottom: 126px;}
    148. 

  148. .album-content .img-info img{float: left; padding-right: 60px;}
    149. 

  149. .album-content .img-info .title{line-height: 30px; margin-top: 124px; padding-left: 20px;}
    150. 

  150. .album-content .img-info .title .data{color: #ff7f21;}
    151. 

  151. .album-content .img-info .title .data span{padding-left: 35px;}
    152. 

  152. .album-content .img-list{overflow: hidden; padding-bottom: 50px;}
    153. 

  153. .album-content .img-list .item{float: left; width: 100%;}
    154. 

  154. .album-content .img-list .layui-laypage{margin: 50px 0;}
    155. 

  155. .album-content .img-list .space>*{padding: 55px;}
    156. 

  156. .album-content .img-list .layui-col-space80{padding: 40px;}
    157. 

  157. .album-content .img-list .item img{width: 100%;}
    158. 

  158. .album-content .img-list .cont-text{padding-left: 10px;}
    159. 

  159. .album-content .img-list .cont-text .data{line-height: 55px; color: #ff7f21;}
    160. 

  160. .album-content .img-list .cont-text .briefly{line-height: 24px; margin-top: 16px;}
    161. 

  161. /*end-album*/
    162. 

  162. 

  163. 

  164. /*about*/
    165. 

  165. .about-content{background: #faf8fb;}
    166. 

  166. .about-content .item{padding-bottom: 100px;}
    167. 

  167. .about-content .item h3{font-size: 24px; color: #3f2863; line-height: 100px;}
    168. 

  168. .about-content .item.info .cont{overflow: hidden;}
    169. 

  169. .about-content .item.info img{float: left; height: 220px; margin-right:86px; }
    170. 

  170. .about-content .item.info p{line-height: 50px; margin-top: 15px;}
    171. 

  171. .about-content .item.info p{font-size: 16px;}
    172. 

  172. .about-content .item.tool .cont-box{text-align: center;}
    173. 

  173. .about-content .item.tool .cont-box img{ }
    174. 

  174. .about-content .item.tool .cont-box p{line-height: 56px;}
    175. 

  175. .about-content .item.contact .cont{overflow: hidden;}
    176. 

  176. .about-content .item.contact .cont img{width: 110px; height: 110px; float: left; margin:0 100px;}
    177. 

  177. .about-content .item.contact .cont .text{line-height: 36px;}
    178. 

  178. /*end-about*/
    179. 

  179. 

  180. @media screen and (max-width: 1200px){
    181. 

  181.   .header .logo{left: 20px;}
    182. 

  182.   .header .nav{left: 150px;}
    183. 

  183.   .header .nav a{margin: 0 20px;}
    184. 

  184.   .content .cont .title{padding-left:10px;}
    185. 

  185.   .content .cont .list-item .item .img{padding:0 10px;}
    186. 

  186.   .content .cont .list-item .item .item-cont{padding:0 20px;}
    187. 

  187.   .content .cont .list-item .item .item-cont h3{margin:15px 0; font-size: 22px;}
    188. 

  188.   .content .cont .list-item .item .item-cont h5{margin-bottom: 10px;}
    189. 

  189.   .content .cont .list-item .item .item-cont p{line-height: 30px;}
    190. 

  190.   .content .cont .list-item .item .item-cont .go-icon{margin-top: 5px;}
    191. 

  191.   .content .cont .list-item .item{margin-bottom: 50px;}
    192. 

  192.   .content{padding:60px 0 60px 0;}
    193. 

  193.   .whisper-content{padding:0 0 60px 0;}
    194. 

  194.   .details-content .article-cont .title{padding:0;}
    195. 

  195.   .details-content .article-cont .title h3{font-size: 22px;}
    196. 

  196. }
    197. 

  197. @media screen and (max-width: 1000px){
    198. 

  198.   .leacots-content{padding:0 20px 40px 20px;}
    199. 

  199.   .album-content .img-info img{width: 100%; padding-right: 0; margin-bottom: 20px;}
    200. 

  200.   .album-content .img-info{margin-top: 0px; margin-bottom: 50px;}
    201. 

  201.   .album-content .img-list .space>*{padding:30px;}
    202. 

  202. }
    203. 

  203. @media screen and (max-width: 768px){
    204. 

  204.   .header .nav,.header .welcome-text{display: none;}
    205. 

  205.   .banner .amount{line-height: 40px; }
    206. 

  206.   .banner .title{top: 245px;}
    207. 

  207.   .banner .title h3{font-size: 40px; line-height: 44px;}
    208. 

  208.   .banner .title h4{font-size: 24px;}
    209. 

  209.   .footer{padding-left: 0;}
    210. 

  210.   .footer .qrcode{float: none; margin-bottom: 40px; margin-left: 10px;}
    211. 

  211.   .footer .practice-mode{position: relative; margin-left: 10px;}
    212. 

  212.   .banner .title{top: 290px; left: 20px;}
    213. 

  213.   .banner .amount{left: 20px; top: 210px; line-height: 30px;}
    214. 

  214.   .whisper-content .cont .item{padding:30px;}
    215. 

  215.   .whisper-content .cont .item-box .item{padding:30px;}
    216. 

  216.   .content .review-version .list-cont .cont .text{padding-left:0; line-height: 22px; color: #333; } 
    217. 

  217.   .content .review-version .list-cont .cont .text .tit{line-height: 50px; margin-bottom: 0;}
    218. 

  218.   .content .review-version .list-cont .cont .text .tit .name{margin-left: 20px;}
    219. 

  219.   .content .review-version .list-cont .cont .text .ct{margin-top: 20px;}
    220. 

  220.   .leacots-content .review-version .form{margin:40px 0;}
    221. 

  221.   .album-content .img-list .space>*{padding:10px;}
    222. 

  222.   .album-content .img-list .layui-laypage{margin: 50px 0 0 0;}
    223. 

  223.   .album-content .img-list #demo{text-align: center;}
    224. 

  224.   .about-content .item.info img{margin-right: 0; float: none; height: auto; width: 100%;}
    225. 

  225.   .about-content .item.info p{padding-left:20px;}
    226. 

  226.   .about-content .item{padding-bottom: 40px;}
    227. 

  227.   .about-content .item h3{padding-left: 20px;}
    228. 

  228.   .about-content .item.contact .cont img{margin:0 30px 0 20px;}
    229. 

  229.   /*menu-btn*/
    230. 

  230.   .menu { width: 50px; height: 40px; position: relative; cursor: pointer;}
    231. 

  231.   .menu:before, .menu:after { content: ""; display: block; width: 50px; height: 6px; background: #ff7f21; border-radius: 8px; position: absolute; left: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
    232. 

  232.   .menu:before { top: 0px; box-shadow: 0 34px #ff7f21;}
    233. 

  233.   .menu:after { bottom: 17px; }
    234. 

  234.   .menu.on:before { top: 17px; box-shadow: none; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
    235. 

  235.   .menu.on:after { bottom: 17px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
    236. 

  236.   .menu-btn{position: absolute; top: 40px; right: 20px;}
    237. 

  237.   .header .header-down-nav { width: 100%; position: absolute; top: 120px; z-index: 2; left: 0; padding: 0; border-radius: 0;}
    238. 

  238.   .header .header-down-nav {background: #ff7f21;}
    239. 

  239.   .header .header-down-nav .layui-nav-item a{padding:0 40px;}
    240. 

  240.   .header .header-down-nav li {display: block;}
    241. 

  241.   .header .header-down-nav li a{font-size: 16px;}
    242. 

  242. @media screen and (max-width: 320px){
    243. 

  243.   .whisper-content .cont .item img{width: 100%;}
    244. 

  244. }
    245.