淘宝首页布局练习

于 2020-11-11 10:11:51 发布
阅读量478 收藏
点赞数
分类专栏： web前端 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V________/article/details/109612979
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/test8_17_2.css">
</head>

<body>
    <!-- 页面最顶部header -->
    <header>
        <!-- 最左侧 -->
        <div>
            <ul class="H_left">
                <li><a href="#1">亲，请登录</a></li>
                <li><a href="#2">免费注册</a></li>
                <li><a href="#3">手机逛淘宝</a></li>
            </ul>
        </div>
        <!-- z最右侧 -->
        <div class="H_right">
            <select name="mytao" id="mytao">
                <option value="mytao1" selected>我的淘宝</option>
                <option value="mytao2">我淘宝</option>
                <option value="mytao3">我淘宝</option>
            </select>
            <select name="gouwu" id="gouwu">
                <option value="gouwu1" selected>购物车</option>
                <option value="gouwu2">购物</option>
                <option value="gouwu3">购物</option>
            </select>

            <select name="shoucang" id="shoucang">
                <option value="shoucang1" selected>收藏夹</option>
                <option value="shoucang2">收藏</option>
                <option value="shoucang3">收藏</option>
            </select>

            <select name="fenlei" id="fenlei">
                <option value="fenlei1" selected>商品分类</option>
                <option value="fenlei2">商品分</option>
                <option value="fenlei3">商品分</option>
            </select>

            <select name="maijia" id="maijia">
                <option value="maijia1" selected>卖家中心</option>
                <option value="maijia2">卖家中</option>
                <option value="maijia3">卖家中</option>
            </select>

            <select name="lianxi" id="lianxi">
                <option value="lianxi1" selected>联系客服</option>
                <option value="lianxi2">联系客</option>
                <option value="lianxi3">联系客</option>
            </select>

            <select name="daohang" id="daohang">
                <option value="daohang1" selected>网站导航</option>
                <option value="daohang2">网站导</option>
                <option value="daohang3">网站导</option>
            </select>
        </div>
    </header>
    <!-- 文章主体 -->
    <main>
        <!-- 主体头部 -->
        <header>
            <img src="./img/TaoBao/images/tapbaow.png" alt="淘宝网">
            <!-- 淘宝网右边全部 -->
            <div class="right_total">
                <!-- 中部最上方 -->
                <div>
                    <a href="#31">宝贝</a>
                    <a href="#32">天猫</a>
                    <a href="#33">店铺</a>
                </div>
                <!-- 中部中间 -->
                <div>
                    <input type="text" placeholder="搜索"><button>搜索</button>
                    <p>高级搜索</p>
                </div>
                <!-- 中部最下方 -->
                <div>
                    <div>
                        <a href="#41">潮流T恤</a>
                        <a href="#42">潮流T恤</a>
                        <a href="#43">潮流T恤</a>
                        <a href="#44">潮流T恤</a>
                        <a href="#45">潮流T恤</a>
                        <a href="#46">潮流T恤</a>
                        <a href="#47">潮流T恤</a>
                        <a href="#48">潮流T恤</a>
                        <a href="#49">潮流T恤</a>
                        <a href="#410">潮流T恤</a>
                        <a href="#411">潮流T恤</a>
                    </div>
                    <p>更多&nbsp;&nbsp;&gt;</p>
                </div>
            </div>
        </header>
        <!-- header下部白色区域 -->
        <div class="behind_header">
            <div>
                <p>主题市场</p>
                <img src="./img/TaoBao/images/menu-item-ham.png" alt="菜单">
            </div>
            <div>
                <ul>
                    <li><a href="#50">天猫</a></li>
                    <li><a href="#51">聚划算</a></li>
                    <li><a href="#52">天猫超市</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href="#34">淘抢购</a></li>
                    <li><a href="#25">淘抢购</a></li>
                    <li><a href="#24">淘抢购</a></li>
                    <li><a href="#50">淘抢购</a></li>
                    <li><a href="#51">淘抢购</a></li>
                    <li><a href="#52">淘抢购</a></li>
                    <li><a href="#51">淘抢购</a></li>
                    <li><a href="#52">淘抢购</a></li>
                </ul>
            </div>
        </div>
        <!-- 轮播图整部分 -->
        <div class="all">
            <!-- all左边 -->
            <div class="left_box">
                <!-- all左边上面部分 -->
                <div class="left_box_top">
                    <!-- 左边上面部分的左侧 -->
                    <div class="left_nav">
                        <ul>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                            <li><i></i>
                                <p>学习/卡券/本地服务</p><em>&gt;</em>
                            </li>
                        </ul>
                        <img src="./img/TaoBao/images/menu-bottom.png" alt="原创设计">
                    </div>
                    <!-- 左边上面部分的右侧 -->
                    <div class="right_za">
                        <!-- y右侧的上部 -->
                        <div class="za_top">
                            <!-- 右侧上部的左侧 -->
                            <div>
                                <img src="./img/TaoBao/images/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg" alt="潮流货集">
                                <img src="./img/TaoBao/images/mzyj.png" alt="八大">
                            </div>
                            <!-- 右侧上部的右侧 -->
                            <div></div>
                        </div>
                        <!-- y右侧的下部 -->
                        <div class="za_bottom">
                            <!-- 右侧下部的左侧 -->
                            <div class="box1">
                                <div>
                                    <div>
                                        <img src="./img/TaoBao/images/tianCat.gif" alt="天猫动图">
                                        <p>天猫必逛</p>
                                        <p>天猫必逛,天猫必逛逛</p>
                                    </div>
                                    <div>
                                        <span>3</span><span>/6</span>
                                    </div>
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/zero-point-one.png" alt="星级好睡眠">
                                    </figure>
                                    <figure>
                                        <figcaption>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/zero-point-one.png" alt="星级好睡眠">
                                    </figure>
                                    <figure>
                                        <figcaption>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/zero-point-one.png" alt="星级好睡眠">
                                    </figure>
                                    <figure>
                                        <figcaption>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                            <p>星级好睡眠</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/zero-point-one.png" alt="星级好睡眠">
                                    </figure>

                                </div>
                            </div>
                            <div class="box2">
                                <p>今日热卖</p>
                                <img src="./img/TaoBao/images/zero-point-one.png" alt="星级好睡眠">
                            </div>
                            <!-- 右侧下部的右侧 -->
                            <div class="box3"></div>
                        </div>
                    </div>
                </div>
                <!-- all左边下面部分 -->
                <div class="left_box_bottom">
                    <div>
                        <span></span>
                        <div>
                            <p>书呆子</p>
                            <p>书呆戴子子</p>
                            <p><i></i>人气000000</p>
                        </div>
                    </div>
                    <div>
                        <span></span>
                        <div>
                            <p>书呆子</p>
                            <p>书呆戴子子</p>
                            <p><i></i>人气000000</p>
                        </div>
                    </div>

                    <div>
                        <span></span>
                        <div>
                            <p>书呆子</p>
                            <p>书呆戴子子</p>
                            <p><i></i>人气000000</p>
                        </div>
                    </div>

                    <div>
                        <span></span>
                        <div>
                            <p>书呆子</p>
                            <p>书呆戴子子</p>
                            <p><i></i>人气000000</p>
                        </div>
                    </div>

                    <div>
                        <span></span>
                        <div>
                            <p>书呆子</p>
                            <p>书呆戴子子</p>
                            <p><i></i>人气000000</p>
                        </div>
                    </div>

                </div>
            </div>
            <!-- all右边 -->
            <div class="right_box">
                <div>
                    <figure>
                        <img src="./img/TaoBao/images/login-header.png" alt="淘宝网">
                        <figcaption>
                            Hi!你好
                        </figcaption>
                    </figure>
                    <div>
                        <a href="#45"><i></i>领淘金币抵钱</a>
                        <p>或去</p>
                        <a href="#67">会员俱乐部</a>
                    </div>
                    <div>
                        <p><a href="#67">登录</a></p>
                        <p><a href="#68">注册</a></p>
                        <p><a href="#69">开店</a></p>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href="#34">论坛</a></li>
                        <li><a href="#34">论坛</a></li>
                        <li><a href="#34">论坛</a></li>
                        <li><a href="#34">论坛</a></li>
                        <li><a href="#34">论坛</a></li>
                    </ul>
                    <a href="#89">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a>
                    <a href="#79">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a>
                </div>
                <div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                    <div><i></i>
                        <p>充话费</p>
                    </div>
                </div>
                <div>
                    <div>
                        <h1>阿里APP</h1>
                        <p>更多&nbsp;&nbsp;&gt;</p>
                    </div>
                    <div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                        <div><i></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 热卖单品上方全部 -->
        <div class="Total">
            <!-- 左边 -->
            <div class="Left">
                <!-- 我常逛的 -->
                <div class="Often">
                    ——————<h1><i></i>我常逛的</h1>——————
                    <p>更多&nbsp;&gt;</p>
                </div>
                <!-- 我常逛的下面 -->
                <div class="behind_Often">
                    <div class="behind_Often_l">
                        <div>
                            <img src="./img/TaoBao/images/jnrirem.png" alt="XXXX">
                            <div>
                                <h1>热门TOP</h1>
                                <ul>
                                    <li><a href="#91">童装新款</a></li>
                                    <li><a href="#92">童装新款</a></li>
                                    <li><a href="#93">童装新款</a></li>
                                    <li><a href="#94">童装新款</a></li>
                                    <li><a href="#95">童装新款</a></li>
                                    <li><a href="#96">童装新款</a></li>
                                    <li><a href="#97">童装新款</a></li>
                                    <li><a href="#98">童装新款</a></li>
                                    <li><a href="#99">童装新款</a></li>
                                    <li><a href="#910">童装新款</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="manytu">
                            <div class="T1">
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/stock.png" alt="xxxx">
                                        <figcaption>
                                            <p>XXXXX</p>
                                        </figcaption>
                                    </figure>
                                    <figure>
                                        <img src="./img/TaoBao/images/stock.png" alt="xxxx">
                                        <figcaption>
                                            <p>XXXXX</p>
                                        </figcaption>
                                    </figure>
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="xxxx">
                                    </figure>
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="xxxx">
                                    </figure>
                                </div>
                            </div>
                            <div class="B1">
                                <div>
                                    <img src="./img/TaoBao/images/yiwjmm.png" alt="xxxx">
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/stock.png" alt="XXX">
                                    </figure>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/stock.png" alt="XXX">
                                    </figure>

                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="behind_Often_l">
                        <div>
                            <img src="./img/TaoBao/images/jnrirem.png" alt="XXXX">
                            <div>
                                <h1>热门TOP</h1>
                                <ul>
                                    <li><a href="#91">童装新款</a></li>
                                    <li><a href="#92">童装新款</a></li>
                                    <li><a href="#93">童装新款</a></li>
                                    <li><a href="#94">童装新款</a></li>
                                    <li><a href="#95">童装新款</a></li>
                                    <li><a href="#96">童装新款</a></li>
                                    <li><a href="#97">童装新款</a></li>
                                    <li><a href="#98">童装新款</a></li>
                                    <li><a href="#99">童装新款</a></li>
                                    <li><a href="#910">童装新款</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="manytu">
                            <div class="T1">
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/stock.png" alt="xxxx">
                                        <figcaption>
                                            <p>XXXXX</p>
                                        </figcaption>
                                    </figure>
                                    <figure>
                                        <img src="./img/TaoBao/images/stock.png" alt="xxxx">
                                        <figcaption>
                                            <p>XXXXX</p>
                                        </figcaption>
                                    </figure>
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="xxxx">
                                    </figure>
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="xxxx">
                                    </figure>
                                </div>
                            </div>
                            <div class="B1">
                                <div>
                                    <img src="./img/TaoBao/images/yiwjmm.png" alt="xxxx">
                                </div>
                                <div>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/stock.png" alt="XXX">
                                    </figure>
                                    <figure>
                                        <figcaption>
                                            <p>XXXXX</p>
                                            <p>XXXXX</p>
                                        </figcaption>
                                        <img src="./img/TaoBao/images/stock.png" alt="XXX">
                                    </figure>

                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="Total1">
                    <!-- 新款裤子 -->
                    <div class="New">
                        <img src="./img/TaoBao/images/large-top.jpg" alt="XXX">
                    </div>
                    <!-- 时尚爆料王 -->
                    <div class="Fashion">
                        ——————<h1><i></i>时尚爆料王</h1>——————
                        <p>更多&nbsp;&gt;</p>
                    </div>

                    <div>
                        <div class="BOX1">
                            <!-- 上面 -->
                            <div class="BOX1_t">
                                <img src="./img/TaoBao/images/fashion-logo.png" alt="">
                            </div>
                            <!-- 下面 -->
                            <div class="BOX1_b">
                                <!-- 左边 -->
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="XXXX">
                                        <figcaption>
                                            XXXX
                                        </figcaption>
                                    </figure>
                                </div>
                                <!-- 右边 -->
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                        <figcaption>
                                            XXXXxx
                                        </figcaption>
                                    </figure>
                                    <figure>
                                        <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                        <figcaption>
                                            XXXXxxx
                                        </figcaption>
                                    </figure>

                                </div>
                            </div>
                        </div>
                        <div class="BOX2">
                            <!-- 上面 -->
                            <div class="BOX2_t">
                                <img src="./img/TaoBao/images/fashion-logo.png" alt="">
                            </div>
                            <!-- 下面 -->
                            <div class="BOX2_b">
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxxx
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                        <div class="BOX1">
                            <!-- 上面 -->
                            <div class="BOX1_t">
                                <img src="./img/TaoBao/images/fashion-logo.png" alt="">
                            </div>
                            <!-- 下面 -->
                            <div class="BOX1_b">
                                <!-- 左边 -->
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/pcldmzzi.png" alt="XXXX">
                                        <figcaption>
                                            XXXX
                                        </figcaption>
                                    </figure>
                                </div>
                                <!-- 右边 -->
                                <div>
                                    <figure>
                                        <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                        <figcaption>
                                            XXXXxx
                                        </figcaption>
                                    </figure>
                                    <figure>
                                        <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                        <figcaption>
                                            XXXXxxx
                                        </figcaption>
                                    </figure>

                                </div>
                            </div>
                        </div>
                        <div class="BOX2">
                            <!-- 上面 -->
                            <div class="BOX2_t">
                                <img src="./img/TaoBao/images/fashion-logo.png" alt="">
                            </div>
                            <!-- 下面 -->
                            <div class="BOX2_b">
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxx
                                    </figcaption>
                                </figure>
                                <figure>
                                    <img src="./img/TaoBao/images/shoes.png" alt="XXXX">
                                    <figcaption>
                                        XXXXxxx
                                    </figcaption>
                                </figure>
                            </div>
                        </div>

                    </div>
                    <!-- 街头潮流 -->
                    <div class="jietou">
                        <img src="./img/TaoBao/images/large-top.jpg" alt="XXX">
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="Right">
                <!-- 右边上方 -->
                <div class="Right_Top">
                    <div>
                        <img src="./img/TaoBao/images/tkbktbtc.png" alt="淘宝头条">
                        <p>更多&nbsp;&nbsp;&gt;</p>
                    </div>
                    <div>
                        <img src="./img/TaoBao/images/xifauv.png" alt="XXX">
                        <div>
                            <h1>更多更多更多更多</h1>
                            <p>更多更多更多更多更多更多更多更多更多更多更多更多</p>
                        </div>
                    </div>
                </div>
                <!-- 右边下部 -->
                <div class="Right_Bottom">
                    <img src="./img/TaoBao/images/ybhkho.png" alt="有好货">
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="./img/TaoBao/images/red-woman.png" alt="XXXX">
                        <figcaption>
                            <h1>丹麦丹麦丹麦丹麦丹麦</h1>
                            <p>丹麦丹麦丹麦丹麦丹麦丹麦丹麦丹麦麦丹麦丹麦</p>
                            <i>0&nbsp;人说好</i>
                        </figcaption>
                    </figure>
                    <div>
                        <img src="./img/TaoBao/images/change.png" alt="刷新">
                        <p>换一组看看</p>
                    </div>

                </div>
            </div>
        </div>
        <!-- 热卖单品 -->
        <div class="hot">
            <!-- 第一一层 -->
            <div class="first">
                ——————<h1><i></i>热卖单品</h1>——————
            </div>
            <div class="second">
                <ul>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                    <li>客厅灯</li>
                </ul>
            </div>
            <div class="third">
                <div class="BB1">
                    <div class="third_l">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                                <p>月销2笔</p>
                                <p>高档高档高档高档高档高档高档高档高档高档高档</p>
                            </figcaption>
                        </figure>
                        <div>
                            <p>评级 0</p>
                            <p>删除 0</p>
                        </div>
                    </div>
                    <div class="third_r">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>

                    </div>
                </div>
                <div class="BB1">
                    <div class="third_l">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                                <p>月销2笔</p>
                                <p>高档高档高档高档高档高档高档高档高档高档高档</p>
                            </figcaption>
                        </figure>
                        <div>
                            <p>评级 0</p>
                            <p>删除 0</p>
                        </div>
                    </div>
                    <div class="third_r">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>

                    </div>
                </div>
                <div class="BB1">
                    <div class="third_l">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                                <p>月销2笔</p>
                                <p>高档高档高档高档高档高档高档高档高档高档高档</p>
                            </figcaption>
                        </figure>
                        <div>
                            <p>评级 0</p>
                            <p>删除 0</p>
                        </div>
                    </div>
                    <div class="third_r">
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>
                        <figure>
                            <img src="./img/TaoBao/images/yiwjmm.png" alt="XXX">
                            <figcaption>
                                <h1>￥799.00</h1>
                            </figcaption>
                            <div>
                                <p>包邮</p>
                                <p>月销2笔</p>
                            </div>    
                        </figure>
                    </div>
                </div>
            </div>
            <div class="four">
                <img src="./img/TaoBao/images/add-three.png" alt="XXX">
                <img src="./img/TaoBao/images/add-three.png" alt="XXX">
                <img src="./img/TaoBao/images/add-three.png" alt="XXX">

            </div>
        </div>
    </main>
</body>

</html>

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;

}
a {
    text-decoration: none;
}
p,h1,figure {
    margin: 0px;
}
button {
    outline: none;
    border: none;
}
input{
    outline: none;
    padding: 3px;
}
body>header a {
    color: #8e8989;
}
body>header a:hover {
    color: #f24000;
}
body>header {
    height: 35px;
    padding: 0 120px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;    
}
.H_left {
    display: flex;
    width: 220px;
    justify-content: space-between;
}
.H_right>select{
    width: 80px;
    border: 0px;
    background-color: #f5f5f5;
    outline: 0px;
    color: #8e8989;
}
.H_right>select:nth-child(2),.H_right>select:nth-child(3) {
    text-align: center;
}
.H_right>select>option {
    position: fixed;
    z-index: 2;
}
main>header>img {
    height: 65px;
    margin-top: 5px;
}
main>header {
    height: 100px;
    background-color: white;
    padding: 26px 120px 0;
    display: flex;
}
.right_total {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 100px;
    height: 100px;
}
.right_total>div:nth-child(1) {
    height: 25px;
}
.right_total>div:nth-child(1) a {
    display: inline-block;
    width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #ff5400;
    font-size: 14px;
}
.right_total>div:nth-child(1) a:hover {
    color: white;
    font-weight: bold;
    background-color: #ff5400;
}
.right_total>div:nth-child(2) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.right_total>div:nth-child(2)>input {
    width: 595px;
    height: 26px;
    border: 2px solid #ff5400;
    background-color: white;
    padding-left: 30px;
}
.right_total>div:nth-child(2)>button {
    width: 120px;
    height: 36px;
    border: 2px solid #ff5400;
    background-color: #ff5400;
    color: white;
    font-weight: bold;
}
::-webkit-input-placeholder {
    color: #b4b7b7;
}
.right_total>div:nth-child(2)>p {
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin-left: 10px;
    color: #666679;
}
.right_total>div:nth-child(3) {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    width: 752px;
    font-size: 14px;
    color: #666679;
}
.right_total>div:nth-child(3)>div>a {
    color: #666679;
    margin-right: 5px;
}
.behind_header {
    height: 34px;
    color: white;
    padding: 0 120px;
    display: flex;
    font-weight: bold;
}
.behind_header>div:nth-child(1) {
    width: 180px;
    height: 34px;
    padding: 0 5px;
    background-color: #ff6103;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.behind_header>div:nth-child(1)>img {
    height: 14px;
    width: 14px;
}
.behind_header>div:nth-child(n+2) {
    display: flex;
    align-items: center;
}
.behind_header>div:nth-child(2)>ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 230px;
}
.behind_header>div:nth-child(3)>ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 575px;
    border-left:1px solid gray;
}
.behind_header>div:nth-child(2) a {
    color: #ff6103;
}
.behind_header>div:nth-child(3) a {
    color: #3c3c66;
    font-size: 12px;
}
.before_often_guang {
    padding: 0 120px;
    background-color: #f1f1f1;
}
.all {
    padding: 0 120px;
    background-color: #f1f1f1;
    display: flex;
}
.left_nav {
    width: 190px;
    height: 520px;
    background-color: #ff6103;
    color: white;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 10px;
}
.left_nav>ul {
    height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
.left_nav>ul>li {
    height: 18px;
    padding: 0 10px;
    display: flex;

}
.left_nav>ul>li>i {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.left_nav>img {
    width: 190px;
    height: 40px;
}
.left_nav>ul>li>p {
    flex: 1;
}
.left_nav>ul>li>em {
    font-style: normal;
}
.za_top {
    overflow: hidden;
}
.za_top>div {
    margin: 10px;
    font-size: 0px;
    flex: 1;

}
.za_top>div>img:nth-child(1) {
    width: 604px;
    height: 280px;
    margin-right: 10px;
    flex: 1;
}
.za_top>div>img:nth-child(2) {
    width: 160px;
    height: 280px;
}
.left_box_top {
    display: flex;
}
.za_bottom {
    margin: 0 10px 10px 10px ;
}
.box1 {
    flex: 1;
}
.box1>div:nth-child(1) {
    /* width: 520px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    border-bottom: 2px solid #c12c26;
    flex: 1;

}
.box1>div:nth-child(1)>div:nth-child(1) {
    width: 225px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666691;
}
.box1>div:nth-child(1)>div:nth-child(1)>p:nth-of-type(1) {
    font-size: 14px;
    font-weight: bold;
    color: black;
}
.box1>div:nth-child(1)>div:nth-child(2)>span:nth-child(1) {
    color: #c12c26;
}
.box1>div:nth-child(2) {
    height: 200px;
    /* width: 520px; */
    background-color: white;
    font-size: 14px;
    display: flex;
    flex: 1;

} 
.box1>div:nth-child(2)>figure {
    width: 150px;
    height: 200px;
}
.box1>div:nth-child(2)>figure:nth-child(-n+3) {
    border-right: 1px solid #f1f1f1;
}
.box1>div:nth-child(2)>figure>img  {
    width: 100%;
    height: 130px;   
}
.box1>div:nth-child(2)>figure>figcaption>p:nth-child(1) {
    color: #c12c26;
    margin: 3px 0 4px 10px;  
}
.box1>div:nth-child(2)>figure>figcaption>p:nth-child(2) {
    color: black;
    margin-bottom: 4px;
    margin-left: 10px;  
}
.box1>div:nth-child(2)>figure>figcaption>p:nth-child(3) {
    color: #c0c0c0;
    margin-left: 10px;  
}
.za_bottom {
    display: flex;
}
.box2 {
    margin-left: 10px;
}
.box2>p {
    font-size: 12px;
    color: #a1a1a1;
    margin: 2px 0;
}
.left_box_bottom {
    background-color: white;
    /* width: 890px; */
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 10px;
}
.left_box_bottom>div {
    display: flex;
    flex-direction: row;
    width: 180px;
    justify-content: center;
}
.left_box_bottom>div>span {
    display: inline-block;
    height: 50px;
    width: 50px;
    padding: 5px;
    border: 1px solid #f1f1f1;
    border-radius: 50%;
    background-image: url("../img/TaoBao/images/chungao.png");
    background-clip: content-box;
    margin-right: 10px;
}
.left_box_bottom>div>div>p:nth-child(1) {
    font-size: 14px;
    font-weight: bold;
}
.left_box_bottom>div>div>p:nth-child(2) {
    font-size: 12px;
    margin: 4px 0 7px ;
}
.left_box_bottom>div>div>p:nth-child(3) {
    font-size: 12px;
    color: #99999c;
    display: flex;
    align-items: center;
}
.left_box_bottom>div>div>p:nth-child(3)>i {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-top: 1px;

}
.left_box_bottom>div:nth-child(1)>div>p:nth-child(-n+2) {
    color: #9a745f;
}
.left_box_bottom>div:nth-child(2)>div>p:nth-child(-n+2) {
    color: #81c1a0;
}
.left_box_bottom>div:nth-child(3)>div>p:nth-child(-n+2) {
    color: #72a5f6;
}
.left_box_bottom>div:nth-child(4)>div>p:nth-child(-n+2) {
    color: #846fc7;
}
.left_box_bottom>div:nth-child(5)>div>p:nth-child(-n+2) {
    color: #e2575e;
}
.left_box,.right_za,.left_box_bottom {
    flex: 1;
}
.right_box {
    width: 295px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    background-color: white;
}
.right_box>div:nth-child(1) {
    padding: 15px 15px 22px 15px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 2px solid #f1f1f1;
}
.right_box>div:nth-child(1)>figure>figcaption {
    text-align: center;
}
.right_box>div:nth-child(1)>div:nth-of-type(1) {
    width: 185px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}
.right_box>div:nth-child(1)>div:nth-of-type(1) i {
    display: inline-block;
    width: 20px;
}
.right_box>div:nth-child(1)>div:nth-of-type(1)>a {
    color: #ff5701;
}
.right_box>div:nth-child(1)>div:nth-of-type(2)>p {
    width: 75px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #ff5701;
}
.right_box>div:nth-child(1)>div:nth-of-type(2) {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.right_box>div:nth-child(1)>div:nth-of-type(2) a {
    color: white;
    font-weight: bold;
}
.right_box>div:nth-child(2) {
    padding: 15px 15px 22px 15px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 2px solid #f1f1f1;
    height: 72px;
}
.right_box>div:nth-child(2)>ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    color: #666666;
}
.right_box>div:nth-child(2)>ul a {
    color: #666666;
    padding: 6px;
    padding-top: 0px;
    display: inline-block;
    box-sizing: border-box;

}
.right_box>div:nth-child(2)>ul a:hover {
    color: #3c3c3c;
    font-weight: bold;
    border-bottom: 1px solid #ff5701;
}
.right_box>div:nth-child(2)>a:nth-of-type(1) {
    margin:  10px 0;
}
.right_box>div:nth-child(2)>a {
    color: #666666;

}
.right_box>div:nth-child(2)>a:hover {
    color: #ff5701;
}
.right_box>div:nth-child(3) {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    border-bottom: 2px solid #f1f1f1;
}
.right_box>div:nth-child(3)>div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 14px;
    color: #666666;
    align-items: center;
    width: 73px;
    height: 66px;
    box-sizing: border-box;
    
}

.right_box>div:nth-child(3)>div>i {
    display: inline-block;
    margin: 5px 0;
    height: 25px;
    width: 21px;
    background-image: url(../img/TaoBao/images/phone.png);
}
.right_box>div:nth-child(4) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 15px ;
}
.right_box>div:nth-child(4)>div:nth-child(1) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 300px;
    margin-top: 5px;

}
.right_box>div:nth-child(4)>div:nth-child(1)>h1 {
    flex: 1;
    font-size: 16px;
}
.right_box>div:nth-child(4)>div:nth-child(2) i {
    height: 32px;
    width: 32px;
    display: inline-block;
    background-image: url(../img/TaoBao/images/app-logo.png);
}
.right_box>div:nth-child(4)>div:nth-child(2)>div {
    width: 50px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right_box>div:nth-child(4)>div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;    
}
.Total {
    display: flex;
    flex-direction: row;
    padding: 10px 120px 5px;
    background-color: #f1f1f1;
}
.Right {
    width: 295px;
}
.Right_Top {
    height: 90px;
    padding: 10px 15px;
    margin-bottom: 10px;
    color: #797979;
    background-color: white;
}
.Right_Bottom {
    height: 765px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;

}
.Right_Bottom>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30px;
}
.Left {
    width: 974px;
    flex: 1;
    margin-right: 10px;
    width: 985px;
    flex-direction: column;
}
.Right_Top>div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 12px;
}
.Right_Top>div:nth-child(2) {
    display: flex;
    flex-direction: row;
}
.Right_Top>div:nth-child(2)>div>h1 {
    font-size: 14px;
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
}
.Right_Top>div:nth-child(2)>div>p {
    font-size: 12px;
    color: 797979;
}
.Right_Bottom>img {
    width: 155px;
    margin: 20px 0 0 10px;
}
.Right_Bottom>figure {
    display: flex;
    padding: 0px 10px;
    margin-top: 10px;
}
.Right_Bottom>figure>img {
    height: 100px;
    margin-right: 10px;
}
.Right_Bottom>figure>figcaption {
    display: flex;
    flex-direction: column;
    font-size: 14px;

}
.Right_Bottom>figure>figcaption>h1 {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
}
.Right_Bottom>figure>figcaption>p {
    color: #797979;
    line-height: 1.5;
    margin: 5px 0;

}
.Right_Bottom>figure>figcaption>i {
    font-style: normal;
    color: #68acf5;
}
.Often {
    color: #e7e7e7;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}
.Often>h1 {
    font-size: 18px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}
.Often>h1>i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("../img/TaoBao/images/i-shopping-icon.png");
}
.Often>p {
    font-size: 12px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: black;
    background-color: white;
    border: 1px solid white;
    border-radius: 20px;
    position: absolute;
    bottom:3px;
    right: 5px;
}
.behind_Often_l {
    height: 358px;
    width: 482px;
    padding-bottom: 10px;
    font-size: 0px;
    display: flex;
    flex-direction: row;
}

.behind_Often {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.behind_Often_l>div:nth-child(1)>img  {
    width: 100px;
    height: 100px;
}
.behind_Often_l>div:nth-child(1)>div>h1  {
    font-size: 14px;
    color: white;
}
.behind_Often_l>div:nth-child(1)>div {
    height: 250px;
    width: 80px;
    padding: 0 10px;
    padding-top: 9px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #ff0080;
}

.behind_Often_l>div:nth-child(1)>div a {
    display: inline-block;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    background-color: #ff5a9e;

}
.behind_Often_l>div:nth-child(1)>div li {
    /* background-color: #ff5a9e; */
    margin-top: 3px;
}
.manytu {
    width: 382px;
    border: 2px solid #ffc0d9;
}
.T1 {
    display: flex;
    flex-direction: row;
    font-size: 0px;
}
.T1>div:nth-child(1) {
    display: flex;
    flex-direction: column;
}
.T1>div:nth-child(1)>figure:nth-child(-n+2) {
    padding: 10px;
    height: 80px;
    width: 80px;
    background-color: white;
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
}
.T1>div:nth-child(1)>figure:nth-child(-n+2)>img {
    width: 80px;
    height: 70px;
}
.T1>div:nth-child(1)>figure:nth-child(-n+2) p {
    color: #797979;
    font-size: 14px;
}
.T1>div:nth-child(n+2)>figure {
    width: 121px;
    height: 190px;
    padding: 10px 10px 0 10px;
    text-align: center;
    display: flex;
    flex-direction: column;  
    align-items: center;
    background-color: white;
    border-bottom: 1px solid #f1f1f1;
}
.T1>div:nth-child(n+2)>figure p {
    font-size: 14px;
    color: #797979;

}
.T1>div:nth-child(n+2)>figure>img {
    height: 145px;
    width: 110px;
}
.B1 {
    display: flex;
}
.B1>div:nth-child(1) {
    width: 220px;
    height: 133px;
    padding: 10px;
    border-right: 1px solid #f1f1f1;
    background-color: white;
}
.B1>div:nth-child(1)>img {
    width: 100%;
    height: 100%;
}
.B1>div:nth-child(2) {
    padding: 10px;
    background-color: white;
    width: 140px;
}
.B1>div:nth-child(2) img {
    width: 60px;
    height: 53px;
}
.B1>div:nth-child(2) p {
    font-size: 14px;
    color: #797979;
    margin-right: 10px;
}
.B1>div:nth-child(2)>figure {
    height: 65px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.B1>div:nth-child(2)>figure:nth-child(1) {
    border-bottom: 1px solid #f1f1f1;

}
.New>img {
    width: 99.9%;
    height: 77px;
    margin-top: 10px;
}
.Fashion {
    color: #e7e7e7;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}
.Fashion>h1 {
    font-size: 18px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}
.Fashion>h1>i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("../img/TaoBao/images/i-shopping-icon.png");
}
.Fashion>p {
    font-size: 12px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: black;
    background-color: white;
    border: 1px solid white;
    border-radius: 20px;
    position: absolute;
    bottom:3px;
    right: 5px;
}
.BOX1 {
    width: 250px;
    height: 260px;
    background-color: white;
    border: 1px solid #f1f1f1;
}
.BOX2_t>img {
    height: 35px;
    border-bottom: 1px solid #f1f1f1;

}
.BOX1_b {
    padding: 10px;
    width: 90px;
    height: 200px;
    border-right: 1px solid #f1f1f1;
    display: flex;
}
.BOX1_t>img {
    width: 250px;
    height: 35px;
    border-bottom: 1px solid #f1f1f1;
}
.BOX1_b>div:nth-child(1)>figure>figcaption {
    background-color: #ff0055;
    height: 40px;
    padding: 0 5px;
    color: white;
}
.BOX1_b>div:nth-child(2) {
    padding: 10px;
    margin-left: 25px;
}
.BOX1_b>div:nth-child(2) img {
    width: 90px;
    height: 70px;
}
.BOX2 {
    width: 220px;
    height: 260px;
    background-color: white;
   
}
.BOX2_b {
    padding: 10px ;
    padding-bottom: 0px;
    display: flex;
    flex-wrap: wrap;
}
.BOX2_b>figure {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.BOX2_b img {
    width: 90px;
    height: 70px;
}
.BOX2_b>figure>figcaption {
    color: black;
    flex: 1;
}
.Total1>div:nth-child(3) {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
}
.jietou>img {
    width: 99.9%;
    height: 77px;
    margin-top: 10px;
}
.Total1 {
    border-top: 1px solid #b9c1ea;
    border-right: 1px solid #b9c1ea;

}
.hot {
    padding: 0 120px;
    background-color: #f1f1f1;
}
.first {
    color: #e7e7e7;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: white;

}
.first>h1 {
    font-size: 18px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}
.first>h1>i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("../img/TaoBao/images/i-shopping-icon.png");
}
.second>ul{
    background-color: white;
    display: flex;
    color: #6c6c6c;
    font-size: 12px;
    justify-content: space-around;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f1f1;

}
.second>ul>li {
    display: inline-block;
    width: 40px;
    text-align: center;
    padding: 0px 8px;
    border-right: 1px solid #6c6c6c;

}
.second>ul>li:nth-last-child(1) {
    border: 0px;
}
.BB1 {
    display: flex;
    width: 427px;
    height: 375px;
}
.third {
    display: flex;
}
.third_l,.third_r{
    padding: 10px;
    background-color: white;
    color: #9e7f6c;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 2px solid #f1f1f1;
    border-right: 2px solid #f1f1f1;
    box-sizing: border-box;

}
.third_l img {
    height: 215px;
    width: 215px;
}
.third_l>div {
    width: 80px;
    display: flex;
    justify-content: space-between;
    bottom: 0px;
}
.third_l h1 {
    color: #f40;
    margin: 5px 0;
    font-size: 14px;
}
.third_r h1 {
    color: #f40;
    margin: 5px 0;
    font-size: 12px;
}
.third_l figcaption>p:nth-child(3) {
    margin: 10px 0;
}
.third_r img {
    height: 120px;
    width: 140px;
}
.third_r>figure>div {
    display: flex;
}
.third_r>figure>div>p:nth-child(1) {
    width: 25px;
    color: white;
    background-color: yellowgreen;
    margin-right: 5px;
}
.third_r>figure:nth-child(1) {
    border-bottom: 2px solid #f1f1f1;
    box-sizing: border-box;
    padding-bottom: 10px ;
}
.four {
    font-size: 0px;
}
.four>img {
    padding: 10px 0;
    width: 419px;
    background-color: white;

}
.four>img:nth-child(2) {
    padding: 10px;
}
V________
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
djangoTwitter:一个基于Twitter搜索Api的小型django网站，为丹麦技术大学的一个学校项目创建
05-22
#djangoTwitter 一个小型的django网站，它基于Twitter搜索Api为丹麦技术大学的一个学校项目创建。 设置 之前的任何的Twitter的API函数可以在网站被使用，人们必须从获得私有访问令牌并将它们插入到twitter_project /逻辑/ twitterApi.py上线-10- 13 。 consumer_key = 'XXXXXXXXXXXXXXXXXXXXXXXXX' consumer_secret = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' access_token_key = 'XXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' access_token_secret = 'XXXXXXXXXXXXXXX
use sentences perfectly
albert的专栏
02-16 2万+
1. Its not like that.不是那样的。 这句话是用来辟谣的。当别人误会了一件事的来龙去脉，你就可以跟他说Its not like that.「不是那样的。」当然随着语气及情境的不同，Its not like that.这句 话也有可能是你用来硬拗的藉口。 2. There is nothing good playing. 没好电影可看 这里的Theres nothing g
vlayout打造淘宝首页多布局展示
杨的博客
08-06 5493
前言 VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。在讲解vlayout之前我们看一下淘宝首页是如何布局的，这里我们用的是Android SDK tools下的工具uiautomatorviewer.bat查看布局。那么接下来我先说一下uiautomatorviewer.bat工具的简单用法。  ...
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
HTML+CSS 练习——天猫首页
dark_cy的博客
08-03 1516
　　前端小白的练习 　　主要就是练练布局、加深加深对各种 css 属性功能和用发的记忆 　　基本实现了天猫首页的所有布局效果吧（个别没有实现，感觉不用 js 搞不了），具体效果如下视频 ...
天猫首页布局练习（HTML+CSS）.zip
08-02
纯 HTML 和 CSS 实现的天猫首页布局效果（实现了绝大部分效果）。资源文件包括源码、素材图片、字体图标文件等
淘宝首页布局实战相关源码
04-03
淘宝首页布局练习实战源码，纯Html+Css页面，可以用来学习前端通用的布局方式。学习经典的双飞翼布局模式。 淘宝首页布局练习实战源码，纯Html+Css页面，可以用来学习前端通用的布局方式。学习经典的双飞翼布局模式...
CSS仿淘宝首页导航条布局效果
10-31
CSS仿淘宝首页导航条布局效果
网站布局练习div模板
04-02
网站布局练习div模板
仿美团、淘宝首页布局
09-24
仿美团、淘宝首页布局，实现当前流行的首页布局。
小练习05HTML+CSS-淘宝小店铺页面
05-12
小练习05HTML+CSS-淘宝小店铺页面
flex布局练习，仿手机淘宝首页
yangchu199608的博客
02-11 4698
看了大神的flex教程，决定写个假手淘开心一下！我肯定三下五除二就能写完的！对！没错！~~~ 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 结果半夜都还没睡。。。。。 都是下面这条链接害的（微笑.jpg）： http://www.ruanyifeng.com/blog/2015/07/flex-gra
常用编码：Shift_JIS, GBK,EUCKR,Big5,UTF8,CP1252
hellofeiya的专栏
12-27 3万+
(1) Shift_JIS Shift_JIS是一个日本电脑系统常用的编码表。它能容纳全角及半角拉丁字母、平假名、片假名、符号及日语汉字。 它被命名为Shift_JIS的原因，是它在放置全角字符时，要避开原本在0xA1-0xDF放置的半角假名字符。 在微软及IBM的日语电脑系统中，即使用了这个编码表。这个编码表称为CP932。 目录  [隐藏]  1字节结构2S
文字编码和Unicode
热门推荐
fengzhishang2019的专栏
08-15 3万+
谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词 这是一篇程序员写给程序员的趣味读物。所谓趣味是指可以比较轻松地了解一些原来不清楚的概念，增进知识，类似于打RPG游戏的升级。整理这篇文章的动机是两个问题： 问题一： 使用Windows记事本的“另存为”，可以在GBK、Unicode、Unicode big endian和UTF-8这几种编码方式间相互转换。同样是txt文
Html+css仿淘宝页面练习
weixin_30369041的博客
03-31 1793
常用的样式; 1), 设置网页置顶 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } 默认是有边距的,设置所有的外边距为0px 2 ),设置链接无下划线 Html代码 1 t...
CSS布局欣赏：淘宝首页布局效果
tasty
10-06 2200
我们首先看最终的效果图： 　　此效果应用的图片共3张，应该说用3张或是2和是最优化了；假如就用一张就有点变态了；呵呵…… 　　测试代码，CSS和内容都没有优化，但思路应该是对的！ 　　CSS代码：  Example Source Code [www.21shipin.com] /* 子鼠 www.zishu.cn */ body{ margin:10px;
HTML+CSS简单的淘宝首页框架布局小练（三）
Tina_dl的博客
04-07 3761
接着完善淘宝的首页框架（嘿嘿，小傻猫日常） 具体代码见下 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV框架首页</title> <link href="../CSS/text4.c...
css移动端布局练习
最新发布
09-16
CSS移动端布局练习是用于设计和开发适应移动设备的网页的练习。移动设备的屏幕尺寸较小，需要针对不同尺寸的设备进行响应式布局，以保证页面在不同设备上的显示效果和用户体验。 在进行CSS移动端布局练习时，需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值