lovecoding
/
VIP20


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!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>Document</title>
    <!-- 引入样式重置文件 -->
    <link rel="stylesheet" href="css/common.css">


    <!-- 
        引用字体图标  字体图标就是字体，所以可以通过调整字体的css调整字体大小 颜色 等
        1 下载 将后缀为ttf、woff、woff2、iconfont.css四个文件 复制到项目目录下
        2 引入iconfont.css
        3 应用于页面 （可以查看demo文件）
    -->
    <link rel="stylesheet" href="font/iconfont.css">


    <!--引入外部css文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>


<body>
    <!-- 顶部导航 -->
    <!-- nav是灰色通栏显示的容器 -->
    <div class="nav">
        <!-- 宽度是1199 居中的元素 -->
        <div class="nav-center">
            <!-- 居左的容器 -->
            <div class="nav-left">
                <a href="#" class="welcome">您好，欢迎进入包图购物网</a>
                <a href="#">登录</a>
                <a href="#" class="active">注册</a>
            </div>

            <!-- 居右的容器 -->
            <div class="nav-right">
                <a href="#">设为首页 ☆</a>
                <a href="#" class="active">加入收藏</a>
                <a href="#">客户服务 </a>
                <a href="#">关注官方微博：</a>
            </div>
        </div>
    </div>

    <!-- 头部header -->
    <div class="header">
        <div class="header-logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="header-search">
            <!-- 上 搜索 -->
            <div class="search-box">
                <input type="text" placeholder="618活动">
                <button>搜索</button>
            </div>


            <!-- 下 列表 -->
            <div class="search-list">
                <a href="#">时尚女鞋</a>
                <a href="#">简易家具</a>
                <a href="#">仙女公主裙</a>
                <a href="#">BF风裤子</a>
            </div>
        </div>
        <div class="header-cart">
            <img src="images/cart.png" alt="">
            <span>购物车物品</span>
        </div>
    </div>

    <!-- 水平分类菜单 -->
    <ul class="hor-menu">
        <li>商城首页</li>
        <li class="new-icon-box">
            所有商品
            <img class="new-icon" src="images/new.png" alt="">
        </li>
        <li>团购专区</li>
        <li class="new-icon-box">
            秒杀专区
            <img class="new-icon" src="images/hot.png" alt="">
        </li>
        <li>实体店</li>
        <li>用户实拍</li>
    </ul>

    <!-- 轮播图 -->
    <!-- 通栏显示 -->
    <div class="slide">
        <!-- 居中布局 -->
        <div class="slide-center">
            <!-- 左侧菜单 -->
            <div class="menu">
                <h2 class="menu-title">全部商品分类</h2>
                <ul class="menu-list-box">
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <img src="images/icon.png" alt="">
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <img src="images/icon.png" alt="">
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <img src="images/icon.png" alt="">
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <img src="images/icon.png" alt="">
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <!-- <img src="images/icon.png" alt=""> -->
                            <span class="iconfont icon-muyingleimu"></span>
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                    <li class="menu-list clearfix">
                        <!-- 15+6+6 = 27 -->
                        <div class="img-box">
                            <!-- <img src="images/icon.png" alt=""> -->
                            <span class="iconfont icon-chongwu"></span>
                        </div>
                        <div class="content-box">
                            <div class="contente-title">美容洗护</div>
                            <div class="content-list">洗发 | 沐浴 | 牙膏 | 洁面 | 卫生巾 |</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 限时秒杀 -->
    <div class="com-center activity-center clearfix">
        <!-- 左边拼单团购 -->
        <div class="activity group">
            <!-- 标题 -->
            <div class="activity-title">
                <div class="activity-title-text">拼单团购</div>
            </div>
            <!-- 列表 -->
            <ul class="ac-list-box">
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 右边限时秒杀 -->
        <div class="activity seckill">
            <!-- 标题 -->
            <div class="activity-title">
                <div class="activity-title-text">拼单团购</div>
            </div>
            <!-- 列表 -->
            <ul class="ac-list-box">
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
                <li class="ac-pro-list">
                    <img src="images/img01.png" alt="">
                    <div class="pro-name">美妆商彩妆</div>
                    <div class="pro-price">团购价：<span>￥0：00</span></div>
                    <div class="pro-btn">
                        已结束
                        <div class="btn-icon"></div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <!-- 美容洗护 -->
    <!-- 有灰色背景通栏显示 -->
    <div class="c-content">
        <!-- 居中 -->
        <div class="com-center">
            <!-- 标题 -->
            <div class="c-content-title">
                美容洗护
            </div>
            <!-- 内容 -->
            <div>
                <!-- hot -->
                <div class="c-hot-box">

                </div>
                <!-- 专区 -->
                <div class="c-sp-area">

                </div>
                <!-- 商品 -->
                <div class="c-pro">
                    <ul>
                        <li class="c-pro-list c-pro-list-1">1</li>
                        <li class="c-pro-list">2</li>
                        <li class="c-pro-list">3</li>
                        <li class="c-pro-list">4</li>
                        <li class="c-pro-list">5</li>
                    </ul>
                </div>
                <!-- 热卖品牌 -->
                <div class="c-brand">

                </div>
            </div>
        </div>
    </div>


</body>

</html>