布局

3_项目/css/index.css

@@ -190,4 +190,82 @@
     color: #fff;
     margin:10px 0 10px 0;
 
+}
+.group-box{
+    height: 408px;
+    /* background: #f00; */
+}
+.pindan{
+    width: 590px;
+    /* background: #0f0; */
+    float: left;
+    margin-top:41px;
+}
+.seckill{
+    width: 590px;
+    /* background: #0f0; */
+    float: right;
+    margin-top:41px;
+
+}
+.group-title{
+    border-bottom: 2px solid #6F26BD;
+}
+.group-title-txt{
+    width: 125px;
+    height: 34px;
+    line-height: 34px;
+    background: #6F26BD;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    margin-bottom: 1px;
+}
+.group-list{
+    margin-top:19px;
+}
+.group-list li{
+    width: 186px;
+    height: 311px;
+    /* background: #f00; */
+    float: left;
+    margin-right: 10px;
+}
+.content{
+    background: #F4F4F4;
+    height: 800px;
+}
+.meirong-title{
+    font-size: 26px;
+    color:#E74079 ;
+    text-align: center;
+    height: 80px;
+    line-height: 80px;
+}
+.hot{
+    width: 118px;
+    height: 476px;
+    background: #f00;
+    float: left;
+}
+.hufu{
+    width: 194px;
+    height: 476px;
+    background: #0f0;
+    float: left;
+
+}
+.meirong-list{
+    width: 594px;
+    height: 476px;
+    background: #00f;
+    float: left;
+
+}
+.hot-brand{
+    width: 292px;
+    height: 476px;
+    background: #E74079;
+    float: left;
+
 }

3_项目/index.html

@@ -143,6 +143,79 @@
             </div>
         </div>
     </div>
+    <!-- 拼单团购 -->
+    <div class="commen-center group-box">
+        <!-- 拼单团购 -->
+        <div class="pindan">
+            <div class="group-title">
+                <div class="group-title-txt">拼单团购</div>
+            </div>
+            <ul class="group-list">
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+    
+            </ul>
+        </div>
+        <!-- 秒杀 -->
+        <div class="seckill">
+            <div class="group-title">
+                <div class="group-title-txt">拼单团购</div>
+            </div>
+            <ul class="group-list">
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+                <li>
+                    <img src="images/img01.png" alt="">
+                    <div>美妆商彩妆</div>
+                    <div>团购价：￥0.00</div>
+                </li>
+    
+            </ul>
+        </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content">
+        <!-- 美容洗护 -->
+        <div class="commen-center">
+            <!-- 标题 -->
+            <div class="meirong-title">美容洗护</div>
+            <!-- 内容 -->
+            <div class="meirong-content">
+                <!-- 最热 -->
+                <div class="hot"></div>
+                <!-- 美容护肤 -->
+                <div class="hufu"></div>
+                <!-- 列表 -->
+                <div class="meirong-list"></div>
+                <!-- 热卖品牌 -->
+                <div class="hot-brand"></div>
+            </div>
+        </div>
+    </div>
+
+