lovecoding
/
VIP24


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包图网</title>
    <!-- 引入common.css 公共css文件 样式重置 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入页面css -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 导航  -->
    <div id="nav">
        <!-- 中间内容区域 -->
        <div class="nav-center">
            <!-- 左边 -->
            <div class="nav-left">
                <a href="#" class="nav-left-first">您好，欢迎进入包图购物网</a>
                <a href="#">登录</a>
                <span>|</span>
                <a href="#" class="active">注册</a>
            </div>
            <!-- 右边 -->
            <div class="nav-right">
                <a href="#">设为首页 ☆</a>
                <span>|</span>
                <a href="#" class="active">加入收藏</a>
                <span>|</span>
                <a href="#">客户服务 </a>
                <span>|</span>
                <a href="#" >关注官方微博：</a>
            </div>
        </div>
    </div>
    <!-- 头部开始 -->
    <div class="header">
        <!-- 左边logo -->
        <img class="header-logo" src="images/logo.png" alt="">
        <!-- 中间的搜索容器 -->
        <div class="search-box">
            <!--上边是搜索框 -->
            <div class="header-search">
                <!-- placeholder 占位 -->
                <input class="search-text" placeholder="618活动" type="text">
                <button class="search-btn">搜索</button>
            </div>

            <!-- 下边是列表 -->
            <div class="header-list">
                <a href="#">时尚女鞋</a>
                <a href="#">简易家具</a>
                <a href="#">仙女公主裙</a>
                <a href="#">BF风裤子</a>
            </div>

        </div>
        <!-- 右边的购物车 -->
        <div class="cart-box">
            <img src="images/cart.png" alt="">
            <span>购物车物品</span>
        </div>
    </div>
    <!-- 菜单开始 -->
    <div class="menu-box">
        <ul class="menu">
            <li>商城首页</li>
            <li class="active">
                所有商品
                <img src="images/news.png" alt="">
            </li>
            <li>团购专区</li>
            <li>秒杀专区</li>
            <li>实体店</li>
            <li>客户实拍</li>
        </ul>
    </div>
    <!-- 轮播图 -->
    <!-- 通栏显示 -->
    <div class="slide-box">
        <!-- 居中 -->
        <div class="commen-center slide-center ">
            <!-- 左侧菜单 -->
            <div class="slide-menu">
                <h2 class="slide-menu-title">全部商品分类</h2>
                <ul class="slide-menu-list">
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="slide-list">
                        <div class="slide-list-left">
                            <img src="images/icon1.png" alt="">
                        </div>
                        <div class="slide-list-right">
                            <h3 class="slide-right-title">美容洗护</h3>
                            <div class="slide-right-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                </ul>
            </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>


</body>
</html>