Inicio Explorar Ayuda
Iniciar sesión
lovecoding
/
VIP28
9
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

day:6

e hace 1 año
padre
9aae1cc972
commit
a7cafa06a2
Se han modificado 5 ficheros con 271 adiciones y 0 borrados
Dividir vista Mostrar estadísticas de diff
  1. 178 0
      day6/demo.css
  2. 93 0
      day6/demo.html
  3. BIN
      day6/images/LOGO-3.png
  4. BIN
      day6/images/banner.png
  5. BIN
      day6/images/logo.png

+ 178 - 0
day6/demo.css
Ver fichero 

@@ -0,0 +1,178 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+#header {
 
+    width: 100%;
 
+    height: 35px;
 
+    background: #00f;
 
+}
 
+#header .contain {
 
+    width: 1089px;
 
+    height: 100%;
 
+    background: #f00;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+}
 
+#header .contain .login {
 
+    width: 230px;
 
+    height: 100%;
 
+    background: #ff0;
 
+    float: left;
 
+}
 
+#header .contain .list {
 
+    width: 230px;
 
+    height: 100%;
 
+    background: #0f0;
 
+    float: right;
 
+}
 
+/* 上半部分 */
 
+#main .shop-top .part-one {
 
+    width: 100%;
 
+    height: 201px;
 
+}
 
+#main .shop-top .part-one .container {
 
+    width: 1089px;
 
+    height: 100%;
 
+    margin: 0 auto;
 
+}
 
+#main .shop-top .part-one .container .container-top {
 
+    width: 100%;
 
+    height: 115px;
 
+    background: #00f;
 
+    overflow: hidden;
 
+}
 
+/* logo盒子 */
 
+#main .shop-top .part-one .container .container-top .logo {
 
+    width: 176px;
 
+    height: 49px;
 
+    float: left;
 
+}
 
+#main .shop-top .part-one .container .container-top .logo img {
 
+    width: 100%;
 
+    height: 100%;
 
+    margin: 25px;
 
+}
 
+/* 搜索盒子 */
 
+#main .shop-top .part-one .container .container-top .search {
 
+    width: 536px;
 
+    height: 100%;
 
+    margin-left: 123px;
 
+    background: #f00;
 
+    float: left;
 
+}
 
+/* 购物车 */
 
+#main .shop-top .part-one .container .container-top .car {
 
+    width: 90px;
 
+    height: 100%;
 
+    margin-left: 52px;
 
+    background: #ff0;
 
+    float: left;
 
+}
 
+#main .shop-top .part-one .container .container-bottom {
 
+    width: 100%;
 
+    height: 86px;
 
+    background: #0ff;
 
+} 
+/* 第二部分 */
 
+#main .shop-top .part-two {
 
+    width: 100%;
 
+    height: 576px;
 
+    background: url("./images/banner.png") no-repeat;
 
+}
 
+#main .shop-top .part-two .dialogList {
 
+    width: 260px;
 
+    height: 546px;
 
+    background: rgba(0, 0, 0, .3);
 
+    color: #fff;
 
+    margin-left: 415px;
 
+}
 
+/* 第三部分 */
 
+#main .shop-top .part-three {
 
+    width: 1200px;
 
+    height: 376px;
 
+    background: #f00;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+}
 
+#main .shop-top .part-three .list-one {
 
+    width: 590px;
 
+    height: 316px;
 
+    background: #ff0;
 
+    float: left;
 
+    margin-top: 36px;
 
+}
 
+#main .shop-top .part-three .list-top {
 
+    width: 100%;
 
+    height: 35px;
 
+    background: purple;
 
+}
 
+#main .shop-top .part-three .list-bottom {
 
+    width: 100%;
 
+    height: 254px;
 
+    margin-top: 27px;
 
+    background: #0f0;
 
+}
 
+#main .shop-top .part-three .list-two {
 
+    width: 590px;
 
+    height: 316px;
 
+    background: #ff0;
 
+    float: left;
 
+    margin-top: 36px;
 
+    margin-left: 20px;
 
+}
 
+/* 下半部分 */
 
+#main .shop-bottom {
 
+    width: 100%;
 
+    height: 100%;
 
+    background: #eee;
 
+}
 
+#main .shop-bottom .part-four {
 
+    width: 1200px;
 
+    height: 554px;
 
+    background: #ff0;
 
+    margin: 0 auto;
 
+}
 
+#main .shop-bottom .part-five {
 
+    width: 1200px;
 
+    height: 554px;
 
+    background: #f00;
 
+    margin: 0 auto;
 
+}
 
+#main .shop-bottom .part-six {
 
+    width: 1200px;
 
+    height: 554px;
 
+    background: #0ff;
 
+    margin: 0 auto;
 
+}
 
+.titleMain {
 
+    width: 100%;
 
+    height: 77px;
 
+    background: #00f;
 
+}
 
+.shopMain {
 
+    width: 100%;
 
+    height: 477px;
 
+    background: #0f0;
 
+}
 
+#main .shop-bottom .part-seven {
 
+    width: 1200px;
 
+    height: 99px;
 
+    margin: 0 auto;
 
+}
 
+#main .shop-bottom .part-seven  img {
 
+    width: 129px;
 
+    height: 36px;
 
+    display: block;
 
+    margin: 30px auto 0;
 
+}
 
+/* 页尾 */
 
+#footer {
 
+    width: 1200px;
 
+    height: 377px;
 
+    background: #f00;
 
+    margin: 0 auto;
 
+}

+ 93 - 0
day6/demo.html
Ver fichero 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="./demo.css">
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <!-- 头部 -->
 
+        <div id="header">
 
+            <div class="contain">
 
+                <div class="login"></div>
 
+                <div class="list"></div>
 
+            </div>
 
+        </div>
 
+        <!-- 内容 -->
 
+        <div id="main">
 
+            <!-- 白色背景部分 -->
 
+            <div class="shop-top">
 
+                <!-- 第一部分 -->
 
+                <div class="part-one">
 
+                    <div class="container">
 
+                        <div class="container-top">
 
+                            <!-- logo标签 -->
 
+                            <div class="logo">
 
+                                <img src="./images/logo.png" alt="">
 
+                            </div>
 
+                            <!-- 搜索框 -->
 
+                            <div class="search"></div>
 
+                            <!-- 购物车 -->
 
+                            <div class="car"></div>
 
+                        </div>
 
+                        <div class="container-bottom">
 
+
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <!-- 第二部分 -->
 
+                <div class="part-two">
 
+                    <!-- 蒙层列表 -->
 
+                    <div class="dialogList">1</div>
 
+                </div>
 
+                <!-- 第三部分 -->
 
+                <div class="part-three">
 
+                    <!-- 商品列表1 -->
 
+                    <div class="list-one">
 
+                        <div class="list-top">
 
+                            
+                        </div>
 
+                        <div class="list-bottom">
 
+                            
+                        </div>
 
+                    </div>
 
+                    <!-- 商品列表2 -->
 
+                    <div class="list-two">
 
+                        
+                        <div class="list-top">
 
+                            
+                        </div>
 
+                        <div class="list-bottom">
 
+                            
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="shop-bottom">
 
+                <!-- 第四部分 -->
 
+                <div class="part-four">
 
+                    <div class="titleMain"></div>
 
+                    <div class="shopMain"></div>
 
+                </div>
 
+                <!-- 第五部分 -->
 
+                <div class="part-five">
 
+                    <div class="titleMain"></div>
 
+                    <div class="shopMain"></div>
 
+                </div>
 
+                <!-- 第六部分 -->
 
+                <div class="part-six">
 
+                    <div class="titleMain"></div>
 
+                    <div class="shopMain"></div>
 
+                </div>
 
+                <!-- 第七部分 -->
 
+                <div class="part-seven">
 
+                    <img src="./images/LOGO-3.png" alt="">
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div id="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

BIN
day6/images/LOGO-3.png
Ver fichero


BIN
day6/images/banner.png
Ver fichero


BIN
day6/images/logo.png
Ver fichero