写好楼层顶部

web/shang_shopping/css/index.css

@@ -230,6 +230,7 @@
     height:458px;
     width: 690px;
     margin: 0 10px;
+    font-size: 0;
 }
 
 .main_content .slide-other{
@@ -358,3 +359,79 @@
 }
 
 /* endregion 主要内容区结束 */
+
+/* region 秒杀 */
+.seckill{
+    margin-top: 10px;
+    font-size: 0;
+}
+.seckill a{
+    float: left;
+}
+
+.seckill a:not(:last-child){
+    margin-right: 11px;
+}
+/* endregion 秒杀结束 */
+
+/* region 楼层 */
+.floor .floor_nav{
+    margin-top:48px ;
+    height:34px;
+    border-bottom: 2px solid #DD302D;
+}
+
+.floor .floor_nav span{
+    line-height: 34px;
+    height: 34px;
+    font-size: 20px;
+    color: #000000;
+    font-weight: bold;
+}
+
+.floor .floor_nav dl dt{
+    float: left;
+    color: #DD302D;
+    height: 34px;
+    line-height: 34px;
+}
+
+.floor .floor_nav dl dt a:link,.floor .floor_nav dl dt a:visited{
+    color:red;
+}
+
+.floor .floor_nav dl dt a:hover{
+    color: white;
+    background-color: red;
+}
+
+.floor .floor_nav dl dd{
+    float: left;
+    height: 34px;
+    line-height: 34px;
+    margin-left:20px ;
+}
+
+.floor .floor_nav dl dd:before{
+    content: "|";
+    width: 1px;
+    position: relative;
+    right: 10px;
+}
+
+.floor .floor_nav dl dd a:link,.floor .floor_nav dl dd a:visited
+{
+    font-size: 16px;
+    color: #666666;
+}
+
+.floor .floor_nav dl dd a:hover
+{
+    color: red;
+}
+
+.floor .floor_info{
+    height:432px;
+    background-color: skyblue;
+}
+/* endregion 楼层结束 */

web/shang_shopping/index.html

@@ -361,6 +361,34 @@
             </div>
         </div>
     </div>
+    <!--秒杀-->
+    <div class="seckill">
+        <div class="container float_clear">
+            <a href="#"><img src="./images/seckill.png" alt="秒杀"></a>
+            <a href="#"><img src="./images/banner1.png" alt="秒杀图片1"></a>
+            <a href="#"><img src="./images/banner2.png" alt="秒杀图片2"></a>
+            <a href="#"><img src="./images/banner3.png" alt="秒杀图片3"></a>
+            <a href="#"><img src="./images/baner4.png" alt="秒杀图片3"></a>
+        </div>
+    </div>
+    <!--楼层-->
+    <div class="floor">
+        <div class="container">
+            <div class="floor_nav float_clear">
+                <span class="float_left">家用电器</span>
+                <dl class="float_right float_clear">
+                    <dt><a href="#">热门</a></dt>
+                    <dd><a href="#">大家电</a></dd>
+                    <dd><a href="#">生活电器</a></dd>
+                    <dd><a href="#">厨房家电</a></dd>
+                    <dd><a href="#">应季家电</a></dd>
+                    <dd><a href="#">空气/净水</a></dd>
+                    <dd><a href="#">高端家电</a></dd>
+                </dl>
+            </div>
+            <div class="floor_info"></div>
+        </div>
+    </div>
 
 </body>
 </html>