邪性 3 gadi atpakaļ
vecāks
revīzija
560fe6a6d8
4 mainītis faili ar 31 papildinājumiem un 16 dzēšanām
  1. 12 6
      css/new_list.css
  2. 13 7
      css/new_list.less
  3. BIN
      imgs/lunbo.jpg
  4. 6 3
      xgk/xgk.html

+ 12 - 6
css/new_list.css

@@ -13,17 +13,23 @@
   border-bottom: 1px solid #e6e6e6;
 }
 .new2 .body .list-header {
-  background-color: #f03;
   position: relative;
   height: 160px;
+  margin-bottom: 20px;
+  background-size: cover;
+  -webkit-background-size: 100% 160px;
+  -moz-background-size: 100% 160px;
+  background-position: center center;
 }
-.new2 .body .list-header h3 {
+.new2 .body .list-header div {
   position: relative;
-  top: 124px;
-  margin-top: 0px;
+  top: 110px;
+  left: 10px;
+  color: #fff;
 }
-.new2 .body .list-header p {
-  position: relative;
+.new2 .body .list-header div h3 {
+  font-size: 16px;
+  margin-bottom: 5px;
 }
 .new2 .body .list .list-item:hover {
   color: #2382ff;

+ 13 - 7
css/new_list.less

@@ -14,16 +14,22 @@
   border-bottom: 1px solid #e6e6e6;
 }
 .new2 .body .list-header{
-  background-color: #f03;
   position: relative;
   height: 160px;
-  h3{
-    position: relative;
-   top: 124px;
-    margin-top: 0px;
-  }
-  p{
+  margin-bottom: 20px;
+  background-size: cover;
+-webkit-background-size: 100% 160px;
+-moz-background-size: 100% 160px;
+background-position: center center;
+  div{
     position: relative;
+    top: 110px;
+    left: 10px;
+    color: #fff;
+    h3{
+      font-size: 16px;
+      margin-bottom: 5px;
+    }
   }
 }
 .new2 .body .list .list-item:hover {

BIN
imgs/lunbo.jpg


+ 6 - 3
xgk/xgk.html

@@ -44,9 +44,12 @@
     <div class="row">
       <div class="col">
         <div class="body">
-          <div style="background-image: url();" class="list-header">
-            <h3>武汉市高三调考</h3>
-            <p>实时更新</p>
+          <!-- 背景图片建议 1130 * 160  当然前端可以修改高度 宽度按照模板应为100%(1130)-->
+          <div style="background-image: url('../imgs/lunbo.jpg');" class="list-header">
+            <div>
+              <h3>武汉市高三调考</h3>
+              <p>实时更新</p>
+            </div>
           </div>
           <div class="my-list list">
             <a target="_blank" href="http://gaokaoapp.net" class="list-item">