轮播图布局

3_项目/css/common.css

@@ -17,4 +17,8 @@ table{border-collapse:collapse;border-spacing:0;}
   /* 外廓  input鼠标选中去掉蓝边*/
   input{
     outline: none;
+  }
+  .commen-center{
+    width: 1199px;
+    margin:0 auto;
   }

3_项目/css/index.css

@@ -103,7 +103,7 @@
 .menu-box{
     height: 50px;
     width: 1199px;
-    background: #f00;
+    /* background: #f00; */
     margin:0 auto;
 
 }
@@ -111,7 +111,7 @@
     float: left;
     width:145px;
     height: 50px;
-    background: yellow;
+    /* background: yellow; */
     color: #606060 ;
     font-size: 14px;
     line-height: 50px;
@@ -134,4 +134,21 @@
     position: absolute;
     right: 34px;
     top: -9px;
+}
+.slide-box{
+    height: 546px;
+    /* background: #f00; */
+    background: url(../images/bg.png) center 0;
+}
+.slide-center{
+    height: 546px;
+    /* background: #0f0; */
+    position: relative;
+}
+.slide-menu{
+    width: 260px;
+    height: 596px;
+    background: purple;
+    position: absolute;
+    top:-50px;
 }

3_项目/index.html

@@ -76,6 +76,17 @@
             <li>客户实拍</li>
         </ul>
     </div>
+    <!-- 轮播图 -->
+    <!-- 通栏显示 -->
+    <div class="slide-box">
+        <!-- 居中 -->
+        <div class="commen-center slide-center ">
+            <!-- 左侧菜单 -->
+            <div class="slide-menu">
+                
+            </div>
+        </div>
+    </div>