news.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /* 织梦无忧网 做最好的织梦整站模板下载网站 Www.dedecms51.com */
  2. /* QQ:379144319 */
  3. /* 仿站:www.dedecms51.com */
  4. /* 素材:www.dedecms51.com */
  5. .news-list {
  6. margin-bottom: 35px;
  7. border-bottom: 1px solid #e8e8e8
  8. }
  9. .list-one {
  10. display: block;
  11. padding: 30px 0px;
  12. transition: all .3s linear;
  13. -webkit-box-sizing: border-box;
  14. -moz-box-sizing: border-box;
  15. box-sizing: border-box;
  16. }
  17. .news-list > ul > li:nth-child(odd) {
  18. background: #f7f7f7;
  19. }
  20. .list-one:hover {
  21. }
  22. .list-one-img {
  23. display: inline-block;
  24. vertical-align: top;
  25. border: 2px solid #eaeaea;
  26. font-size: 0;
  27. }
  28. .list-one-img a {
  29. display: inline-block;
  30. border: 1px solid #fff;
  31. overflow: hidden;
  32. }
  33. .list-one-img img {
  34. width: 374px;
  35. height: 218px;
  36. transition: all .65s ease;
  37. }
  38. .list-one-img img:hover {
  39. transform: scale(1.08);
  40. -ms-transform: scale(1.08); /* IE 9 */
  41. -moz-transform: scale(1.08); /* Firefox */
  42. -webkit-transform: scale(1.08); /* Safari 和 Chrome */
  43. -o-transform: scale(1.08); /* Opera */
  44. }
  45. .list-one-words {
  46. float: right;
  47. display: inline-block;
  48. vertical-align: top;
  49. width: 63%;
  50. }
  51. .words-title {
  52. margin-bottom: 14px;
  53. height: 24px;
  54. line-height: 24px;
  55. font-size: 24px;
  56. white-space: nowrap;
  57. overflow: hidden;
  58. text-overflow: ellipsis;
  59. }
  60. .words-title a {
  61. color: #333;
  62. transition: all .2s linear;
  63. }
  64. .words-title a:hover {
  65. color: #3d649b;
  66. }
  67. .news-belong {
  68. margin-bottom: 10px;
  69. line-height: 12px;
  70. }
  71. .news-belong span {
  72. margin-right: 21px;
  73. font-size: 12px;
  74. color: #7b7b7b;
  75. }
  76. .words-info {
  77. color: #878787;
  78. height: 72px;
  79. line-height: 24px;
  80. font-size: 14px;
  81. border-top: 1px dashed #c5c5c5;
  82. padding-top: 22px;
  83. margin-bottom: 37px;
  84. display: -webkit-box;
  85. -webkit-line-clamp: 3;
  86. -webkit-box-orient: vertical;
  87. overflow: hidden;
  88. }
  89. .words-view {
  90. display: inline-block;
  91. width: 98px;
  92. height: 28px;
  93. line-height: 28px;
  94. text-align: center;
  95. background: #e8e8e8;
  96. font-size: 0;
  97. transition: all .2s linear;
  98. }
  99. .words-view span {
  100. font-family: '宋体';
  101. }
  102. .words-view a {
  103. display: block;
  104. font-size: 12px;
  105. color: #797979;
  106. transition: all .2s linear;
  107. }
  108. .words-view:hover {
  109. background: #1754a3;
  110. }
  111. .words-view:hover a {
  112. color: #fefefe;
  113. }
  114. @media (max-width: 75em) {
  115. .list-one-words {
  116. width: 56%;
  117. }
  118. }
  119. @media (max-width: 62em) {
  120. .list-one-words {
  121. width: 43%;
  122. }
  123. }
  124. @media (max-width: 48em) {
  125. .news-list {
  126. margin-bottom: 40px;
  127. }
  128. .list-one-img {
  129. margin-bottom: 14px;
  130. }
  131. .list-one {
  132. padding: 20px;
  133. text-align: center;
  134. }
  135. .list-one-words {
  136. float: none;
  137. width: 100%;
  138. text-align: left;
  139. }
  140. .words-title {
  141. margin-bottom: 6px;
  142. height: 16px;
  143. line-height: 16px;
  144. font-size: 16px;
  145. }
  146. .news-belong {
  147. margin-bottom: 6px;
  148. }
  149. .words-info {
  150. height: 54px;
  151. line-height: 18px;
  152. font-size: 12px;
  153. padding-top: 8px;
  154. margin-bottom: 12px;
  155. display: -webkit-box;
  156. -webkit-line-clamp: 3;
  157. -webkit-box-orient: vertical;
  158. overflow: hidden;
  159. }
  160. .words-view {
  161. width: 84px;
  162. height: 24px;
  163. line-height: 24px;
  164. }
  165. }
  166. @media (max-width: 34em) {
  167. .list-one {
  168. padding: 15px 0;
  169. text-align: left;
  170. }
  171. .list-one-img img {
  172. max-width: 100%;
  173. height: auto;
  174. transition: all .65s ease;
  175. }
  176. }
  177. @media (max-width: 768px) {
  178. .inner-menu a {
  179. width: 50%;
  180. }
  181. .inner-con {
  182. margin-top: 10px;
  183. }
  184. }