淘宝静态页面

最新推荐文章于 2022-05-16 22:14:11 发布

置顶 LQKaiLSY

最新推荐文章于 2022-05-16 22:14:11 发布

阅读量901

点赞数

文章标签： css

本文链接：https://blog.csdn.net/LQKaiYAO/article/details/104430476

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style02.css">
    <style type="text/css">

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="top-nav-wrap">
            <div class="top-nav">
                <ul class="top-nav-l">
                    <li class="top-nav-menu china">
                        <span class="c-span">中国大陆</span>
                        <span class="bg-pic xsj-pic"></span>
                        <input</span>
                    </li>
                    <li class="top-nav-menu login-sign">
                        <a href="#" class="login">亲，请登录</a>
                        <a href="#" class="sign">免费注册</a>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="top-nav-r">
                    <li class="top-nav-menu my-taobao">
                        <a href="#">我的淘宝</a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                    <li class="top-nav-menu shop-car">
                        <a href="#">
                            <span class="bg-pic shopCar-pic"></span>
                            <span>购物车</span>
                        </a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                    <li class="top-nav-menu like">
                        <a href="#">
                            <span class="bg-pic like-pic"></span>
                            <span>收藏夹</span>
                        </a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                    <li class="top-nav-menu goods">
                        <a href="#">商品分类</a>
                    </li>
                    <li class="top-nav-menu cut-off">
                        <span>|</span>
                    </li>
                    <li class="top-nav-menu seller">
                        <a href="#">卖家中心</a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                    <li class="top-nav-menu customer">
                        <a href="#">联系客服</a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                    <li class="top-nav-menu web-nav">
                        <a href="#">
                            <span class="bg-pic web-nav-pic"></span>
                            <span>网站导航</span>
                        </a>
                        <span class="bg-pic xsj-pic"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="search-wrap">
            <div class="search-con">
                <div class="logo-box"></div>
                <div class="search-box">
                    <div class="search-t">
                        <div class="search-tab">
                            <ul>
                                <li class="select">宝贝</li>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ul>
                        </div>
                        <div class="search-panel">
                            <a href="#" class="sousuo"></a>
                            <form action="">
                                <div class="btn">
                                    <button class="submit">搜索</button>
                                </div>
                                <div class="search-inp-box">
                                    <div class="search-inp">
                                        <input class="mingyuan" type="text" name="" placeholder="名媛小香风外套">
                                    </div>
                                </div>
                            </form>
                            <a href="#" class="camera"></a>
                        </div>
                    </div>
                    <div class="search-bl">
                        <a href="#" class="active">新款连衣裙</a>
                        <a href="#">四件套</a>
                        <a href="#">潮流T恤</a>
                        <a href="#">时尚女鞋</a>
                        <a href="#" class="active">短裤</a>
                        <a href="#">半身裙</a>
                        <a href="#">男士外套</a>
                        <a href="#">墙纸</a>
                        <a href="#">行车记录仪</a>
                        <a href="#">新款男鞋</a>
                        <a href="#">耳机</a>
                        <a href="#">时尚女包</a>
                        <a href="#">沙发</a>
                    </div>
                </div>
                <div class="code-box">
                    <a href="#" class="code"></a>
                </div>
            </div>
        </div>
        <div class="screen-nav">
            <div class="screen-nav-con">
                <h2>主题市场</h2>
                <ul>
                    <li><a href="#">天猫</a></li>
                    <li><a href="#">聚划算</a></li>
                    <li><a href="#">天猫超市</a></li>
                </ul>
                <ul>
                    <li><a href="#">|</a></li>
                    <li><a href="#">淘抢购</a></li>
                    <li><a href="#">电器城</a></li>
                    <li><a href="#">司法拍卖</a></li>
                    <li><a href="#">淘宝心选</a></li>
                    <li><a href="#">兴农扶贫</a></li>
                </ul>
                <ul>
                    <li><a href="#">|</a></li>
                    <li><a href="#">飞猪旅行</a></li>
                    <li><a href="#">智能生活</a></li>
                    <li><a href="#">苏宁易购</a></li>
                </ul>
            </div>
        </div>
        <div class="screen-box">
            <div class="main">
                <div class="main-inner">
                    <div class="inner-left">
                        <ul>
                            <li>
                                <a href="#">女装</a> /
                                <a href="#">男装</a> /
                                <a href="#">内衣</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鞋靴</a> /
                                <a href="#">箱包</a> /
                                <a href="#">配件</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">童装玩具</a> /
                                <a href="#">孕产</a> /
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家电</a> /
                                <a href="#">数码</a> /
                                <a href="#">手机</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美妆</a> /
                                <a href="#">洗护</a> /
                                <a href="#">保健品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">珠宝</a> /
                                <a href="#">眼镜</a> /
                                <a href="#">手表</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">运动</a> /
                                <a href="#">户外</a> /
                                <a href="#">乐器</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">游戏</a> /
                                <a href="#">动漫</a> /
                                <a href="#">影视</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美食</a> /
                                <a href="#">生鲜</a> /
                                <a href="#">零食</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鲜花</a> /
                                <a href="#">宠物</a> /
                                <a href="#">农资</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">面料采集</a> /
                                <a href="#">装修</a> /
                                <a href="#">建材</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家具</a> /
                                <a href="#">家饰</a> /
                                <a href="#">家访</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">汽车</a> /
                                <a href="#">二手车</a> /
                                <a href="#">用品<a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">办公</a> /
                                <a href="#">DIY</a> /
                                <a href="#">五金电子</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">百货</a> /
                                <a href="#">餐厨</a> /
                                <a href="#">家庭保健</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">学习</a> /
                                <a href="#">卡券</a> /
                                <a href="#">本地服务</a>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-content">
                        <div class="pic-box">
                            <img class="img01" src="./微信图片_20200218105723.png" alt="">
                        </div>
                        <div class="inner-mall">
                            <div class="head">
                                <img class="img02" src="./微信图片_20200218105951.png" alt="">
                                <a href="#">
                                    <img class="img03" src="./微信图片_20200218110032.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="inner-right">
                        <a href="#">
                            <img class="img04" src="./微信图片_20200218105803.png" alt="">
                        </a>
                        <div class="hot">
                            <a href="#">
                                <img class="img05" src="./微信图片_20200218110114.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="member">
                    <div class="member-head">
                        <div class="head">
                            <a href="#">
                                <img class="img06" src="./微信图片_20200218145600.png" alt="">
                            </a>
                        </div>
                        <div class="message">
                            <a href="#">网上有害信息举报</a>
                        </div>
                        <div class="notice">
                            <div class="title">
                                <ul>
                                    <li><a href="#">公告</a></li>
                                    <li><a href="#">规则</a></li>
                                    <li><a href="#" class="active">论坛</a></li>
                                    <li><a href="#">安全</a></li>
                                    <li><a href="#">公益</a></li>
                                </ul>
                            </div>
                            <div class="content">
                                <ul>
                                    <li>
                                        <a href="#" class="active">淘宝1212大促招商</a>
                                    </li>
                                    <li><a href="#">在线职业培训招商</a></li>
                                    <li><a href="#">金秋超值购招商</a></li>
                                    <li><a href="#">运营神器年中大促</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="module">
                            <ul>
                                <li>
                                    <a href="#">
                                        <span class="icon1"><img class="img07" src="./微信图片_20200218173928.png"></span>
                                        <p>充话费</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon2"> <img class="img07" src="./微信图片_20200218174008.png"></span>
                                        <p>旅行</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon3"><img class="img07" src="./微信图片_20200218174039.png"></span>
                                        <p>车险</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon4"><img class="img07" src="./微信图片_20200218174107.png"></span>
                                        <p>游戏</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon5"><img class="img07" src="./微信图片_20200218174141.png"></span>
                                        <p>彩票</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon6"><img class="img07" src="./微信图片_20200218174214.png"></span>
                                        <p>电影</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon7"><img class="img07" src="./微信图片_20200218174254.png"></span>
                                        <p>酒店</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="icon8"><img class="img07" src="./微信图片_20200218174325.png"></span>
                                        <p>理财</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="module1">
                            <h1 class="h1">阿里APP<a class="more">更多</a></h1>
                            <span class="incon9"><img class="img08" src="./微信图片_20200219112815.png"></span>
                            <span class="incon9"><img class="img08" src="./微信图片_20200219112902.png"> </span>
                            <span class="incon9"><img class="img08" src="./微信图片_20200219112937.png"> </span>
                            <span class="incon9"><img class="img08" src="./微信图片_20200219113026.png"> </span>
                            <span class="incon9"><img class="img08" src="./微信图片_20200219113108.png"> </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="layer">
            <div class="layer-inner">
                <div class="tbh-discover-goods">
                    <h2 class="h2"><img src="./微信图片_20200219155358.png"> 与品质生活不期而遇</h2>
                    <div>
                        <div class="tp">
                            <img class="mg" src="./微信图片_20200219162756.png">
                            <div>
                                <li class="lz">可折叠加厚双面使用榻榻米床垫</li>
                                <li class="lz">可以折叠的榻榻米床垫,</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png"> 107 人说好</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg1" src="./微信图片_20200219170729.png">
                            <div>
                                <li class="tx">Puma Defy 赛琳娜限定</li>
                                <li class="tx">设计上继续主打高街风格</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png"> 8 人说好</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="./微信图片_20200219170759.png">
                            <div>
                                <li class="xt">大豆家 方头奶奶鞋</li>
                                <li class="xt">一脚蹬设计，方便日常的穿脱。</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png">3758 人说好</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg" src="./微信图片_20200219193654.png">
                            <div>
                                <li class="lz">王族珠宝 磨砂光面推拉手镯</li>
                                <li class="lz">磨砂间接光面的设计，个</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png"> 12 人说好</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="./微信图片_20200219194021.png">
                            <div>
                                <li class="xt">小仙女的花环，甘那许蛋糕模具</li>
                                <li class="xt">选用液态硅胶制作而成,</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png"> 6 人说好</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="./微信图片_20200219194704.png">
                            <div>
                                <li class="xt">办公室午睡神器</li>
                                <li class="xt">专为午睡设计，使用起来</li>
                                <li class="lz1"><img src="./微信图片_20200219180011.png">3 人说好</li>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tbh-shopping">
                    <h2 class="h2"><img src="./微信图片_20200221094110.png"> 献给可爱的你</h2>
                    <div>
                        <div class="tp">
                            <img class="mg" src="./微信图片_20200221094303.png">
                            <div>
                                <li class="lz">“2017新款潮女士双肩包韩版时尚休闲百搭pu软皮背包”</li>
                                <li class="lz1"><img src="./微信图片_20200221101400.png"> 时髦挖掘机</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg1" src="./微信图片_20200221095453.png">
                            <div>
                                <li class="tx">“美国艾蒂宝趴趴枕午睡枕趴睡枕学生小午睡神器”</li>
                                <li class="lz1"><img src="./微信图片_20200221095750.png">爱逛***01</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="微信图片_20200221095908.png">
                            <div>
                                <li class="xt">“香港进口特产美心原味鸡蛋卷32大条礼盒装儿童”</li>
                                <li class="lz1"><img src="./微信图片_20200221100010.png">放飞自我的兔小姐</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg" src="./微信图片_20200221100447.png">
                            <div>
                                <li class="lz">“秋冬季棉拖鞋包跟厚底情侣家居防滑保暖居家男”</li>
                                <li class="lz1"><img src="./微信图片_20200221100520.png">不喜***扰哈</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="./微信图片_20200221100749.png">
                            <div>
                                <li class="xt">“原创品牌日系学生单肩女包百搭休闲文艺小清新”</li>
                                <li class="lz1"><img src="./微信图片_20200221101400.png">时髦挖掘机</li>
                            </div>
                        </div>
                        <div class="tp">
                            <img class="mg2" src="./微信图片_20200221101115.png">
                            <div>
                                <li class="xt">“格莱达大容量保温杯男士保温壶户外不锈钢车载”</li>
                                <li class="lz1"><img src="./微信图片_20200221101124.png">潮流女孩girl</li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layer">
            <div class="up">
                <div class="gg">
                    <img class="img09" src="./微信图片_20200221110023.png">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

代码如下
* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

html,
body {
    width: 100%;
    background-color: #f4f4f4;
    color: #3c3c3c;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper .top-nav-wrap {
    width: 100%;
    height: 50px;
}

.wrapper .top-nav-wrap .top-nav {
    width: 1190px;
    height: 35px;
    margin: 0 auto;
}

.wrapper .top-nav-wrap .top-nav .top-nav-l {
    float: left;
}

.wrapper .top-nav-wrap .top-nav .top-nav-r {
    float: right;
}

.wrapper .top-nav-wrap .top-nav ul li {
    float: left;
    margin-right: 7px;
}

.wrapper .top-nav-wrap .top-nav a {
    color: #6c6c6c;
    font-size: 13px;
    line-height: 35px;
    padding: 0 6px;
}

.wrapper .top-nav-wrap .top-nav a:hover {
    color: #f40;
}

.wrapper .top-nav-wrap .top-nav .china {
    color: #3c3c3c;
    line-height: 35px;
    font-size: 13px;
}

.wrapper .top-nav-wrap .top-nav .bg-pic {
    display: inline-block;
    width: 6px;
    height: 3px;
    background-size: 100% 100%;
    vertical-align: middle;
}

.wrapper .top-nav-wrap .top-nav .c-span {
    padding: 0 6px;
}

.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic {
    background-image: url(./微信图片_20200217174122.png);
}

.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic {
    background-image: url(./微信图片_20200217174220.png);
    width: 30px;
    height: 30px;
}

.wrapper .top-nav-wrap .top-nav .bg-pic.like-pic {
    background-image: url(./微信图片_20200217174253.png);
    width: 30px;
    height: 30px;
}

.wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic {
    background-image: url(./微信图片_20200217174333.png);
    width: 30px;
    height: 30px;
}

.wrapper .top-nav-wrap .top-nav .cut-off span {
    line-height: 35px;
    color: #ddd;
}

.wrapper .top-nav-wrap .ad-wrap .ad {
    width: 1190px;
    margin: 0 auto;
}

.wrapper .top-nav-wrap .ad-wrap img {
    width: 100%;
    height: 70px;
}

.wrapper .search-wrap {
    width: 100%;
    height: 110px;
    padding-top: 24px;
    background-color: #fff;
}

.wrapper .search-wrap .search-con {
    position: relative;
    width: 1190px;
    height: 110px;
    margin: 0 auto;
}

.wrapper .search-wrap .search-con .logo-box {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 110px;
    background-image: url('./微信图片_20200217183427.png');
    background-size: 100% 100%;
}

.wrapper .search-wrap .search-con .search-box {
    display: inline-block;
    width: 690px;
    height: 110px;
    vertical-align: top;
    margin-left: 25px;
}

.wrapper .search-wrap .search-con .search-box .search-t {
    width: 690px;
    height: 70px;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-tab {
    height: 22px;
    margin-left: 17px;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li {
    float: left;
    width: 44px;
    height: 22px;
    color: #f40;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    margin-right: 4px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.mingyuan {
    width: 540px;
    height: 35px;
}

div.search-bl {
    font-size: 12px;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li.select {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
}

.wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li:hover {
    background-color: #ffeee5;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel {
    width: 690px;
    height: 40px;
    position: relative;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn {
    width: 74px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    border: none;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn button {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp-box {
    width: 612px;
    height: 36px;
    border: 2px solid #ff5000;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp {
    width: 613px;
    height: 36px;
    overflow: hidden;
}

.wrapper .search-wrap .search-con .search-box .search-t .search-panel .search-inp input {
    width: 590px;
    height: 36px;
    padding: 0px 30px;
    border: none;
    outline: 0;
    text-indent: 10px;
}

.wrapper .search-wrap .search-con .search-box .sousuo,
.wrapper .search-wrap .search-con .search-box .camera {
    display: inline-block;
    position: absolute;
}

.wrapper .search-wrap .search-con .search-box .sousuo {
    width: 30px;
    height: 30px;
    top: 5px;
    left: 10px;
    background-image: url('./微信图片_20200218094755.png');
    background-size: 100% 100%;
}

.wrapper .search-wrap .search-con .search-box .camera {
    width: 35px;
    height: 35px;
    top: 2px;
    right: 90px;
    background-image: url('./微信图片_20200218095055.png');
    background-size: 100% 100%;
}

.wrapper .search-wrap .search-con .search-box .search-bl {
    width: 690px;
    height: 40px;
}

.wrapper .search-wrap .search-con .search-box .search-bl a {
    font-size: 12px;
    margin-right: 8px;
    color: #666;
}

.wrapper .search-wrap .search-con .search-box .search-bl a.active,
.wrapper .search-wrap .search-con .search-box .search-bl a:hover {
    color: #ff5000;
}

.wrapper .search-wrap .search-con .code-box {
    display: inline-block;
    width: 150px;
    height: 108px;
    border: 1px solid #eee;
    vertical-align: top;
    margin-left: 40px;
    position: relative;
}

.wrapper .search-wrap .search-con .code-box .phone {
    color: #ff5000;
    font-size: 14px;
    line-height: 20px;
    margin-left: 6px;
}

.wrapper .search-wrap .search-con .code-box .code {
    display: inline-block;
    width: 155px;
    height: 110px;
    background: url('./微信图片_20200217194806.png') no-repeat;
    background-size: 100% 100%;
}

.wrapper .search-wrap .search-con .code-box .close {
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    position: absolute;
    display: inline-block;
    top: 0;
    left: -18px;
    border: 1px solid #eee;
    color: #ddd;
    font-size: 14px;
}

.wrapper .screen-nav {
    width: 1190px;
    height: 30px;
    background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
    margin: 0 auto;
}

.wrapper .screen-nav .screen-nav-con {
    width: 100%;
    height: 100%;
}

.wrapper .screen-nav .screen-nav-con h2 {
    float: left;
    color: #fff;
    font-size: 16px;
    width: 190px;
    height: 100%;
    background-color: #ff5000;
    text-align: center;
    line-height: 30px;
}

.wrapper .screen-nav .screen-nav-con ul {
    float: left;
}

.wrapper .screen-nav .screen-nav-con ul li {
    float: left;
    margin: 0 3px;
    padding: 0 4px;
    position: relative;
}

.wrapper .screen-nav .screen-nav-con ul li a {
    line-height: 30px;
    color: #fff;
    font-weight: 700;
}

.wrapper .screen-nav .screen-nav-con ul li:hover::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url('.') no-repeat;
    background-size: center;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -15px;
}

.wrapper .screen-box {
    width: 1190px;
    height: 525px;
    margin: 0 auto;
}

.wrapper .screen-box .main {
    float: left;
    width: 890px;
    height: 525px;
}

.wrapper .screen-box .main .main-inner {
    width: 890px;
    height: 522px;
}

.wrapper .screen-box .main .main-inner .inner-left {
    float: left;
    width: 190px;
    height: 522px;
    border: 1px solid #f40;
    background-color: #fff;
    border-top: none;
}

.wrapper .screen-box .main .main-inner .inner-left ul li {
    width: 145px;
    height: 32px;
    padding-left: 25px;
    padding-right: 19px;
    position: relative;
}

.wrapper .screen-box .main .main-inner .inner-left ul li a {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 32px;
}

.wrapper .screen-box .main .main-inner .inner-left ul li span {
    display: inline-block;
    width: 19px;
    height: 35px;
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -16px;
    background-image: url('./微信图片_20200218111419.png');
    background-size: 100% 100%;
}

.wrapper .screen-box .main .main-inner .inner-left ul li:hover {
    background-color: #ffe4dc;
}

.wrapper .screen-box .main .main-inner .inner-left ul li:hover a {
    color: #ff5000;
}

.wrapper .screen-box .main .main-inner .inner-content {
    float: left;
    width: 525px;
    height: 522px;
}

.wrapper .screen-box .main .main-inner .inner-content .pic-box {
    padding: 8px;
}

.img01 {
    width: 504px;
}

.wrapper .screen-box .main .main-inner .inner-content .inner-mall {
    width: 520px;
    height: 230px;
    padding: 0 8px;
}

.img02,
.img03 {
    width: 252px;
    height: 230px;
}

.wrapper .screen-box .main .main-inner .inner-content .inner-mall .tm {
    font-size: 12px;
    color: #666;
}

.wrapper .screen-box .main .main-inner .inner-right {
    float: left;
    padding: 8px;
    width: 156px;
    height: 510px;
}

.wrapper .screen-box .main .main-inner .inner-right .hot {
    font-size: 12px;
    margin-top: 11px;
}

.wrapper .screen-box .main .main-bottom {
    width: 890px;
    height: 100px;
}

.img04 {
    width: 157px;
}

.img05 {
    width: 160px;
    height: 225px;
}

.wrapper .screen-box .main .main-bottom .content {
    background-color: #fff;
    padding: 14px 12px;
    margin-top: 10px;
    position: relative;
}

.wrapper .screen-box .main .main-bottom .content .logo-box {
    width: 180px;
    height: 73px;
    background-image: url('./微信图片_20200218105723.png');
    background-size: 100% 100%;
}

.img06 {
    width: 100%;
    height: 145px;
}

.wrapper .screen-box .main .main-bottom .content a {
    position: absolute;
    top: 14px;
    left: 200px;
}

.wrapper .screen-box .main .main-bottom .content a img {
    float: left;
}

.wrapper .screen-box .main .main-bottom .content a h4 {
    margin-top: 2px;
    margin-left: 144px;
    color: #333;
    line-height: 28px;
    font-size: 16px;
    height: 28px;
}

.wrapper .screen-box .main .main-bottom .content a h4:hover {
    color: #ff5000;
}

.wrapper .screen-box .main .main-bottom .content a p {
    margin-left: 144px;
    color: #999;
    height: 36px;
    overflow: hidden;
    line-height: 14px;
    margin-top: 3px;
}


/*右侧部分*/

.wrapper .screen-box .col-right {
    float: left;
    width: 300px;
}

.wrapper .screen-box .col-right .member {
    width: 300px;
    height: 505px;
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    margin-top: 10px;
}

.wrapper .screen-box .col-right .member .member-head {
    width: 300px;
    height: 274px;
}

.wrapper .screen-box .col-right .member .member-head .head {
    width: 100%;
    height: 145px;
    text-align: center;
}

.wrapper .screen-box .col-right .member .member-head .info {
    display: block;
    width: 290px;
    height: 17px;
    color: #3c3c3c;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
}

.wrapper .screen-box .col-right .member .member-head .head a {
    display: inline-block;
    width: 100%;
    height: 145px;
    border-radius: 50%;
    background-image: url('./img/tx.jpg');
    background-size: 100% 100%;
}

.wrapper .screen-box .col-right .member .member-head p {
    width: 70px;
    height: 30px;
    text-align: center;
    line-height: 20px;
}

.wrapper .screen-box .col-right .member .member-head p a {
    display: inline-block;
    width: 72px;
    height: 17px;
    border-radius: 9px;
    background-color: #ffe4db;
    font-size: 12px;
    color: #ff5000;
    padding: 0 29px;
    position: relative;
}

.wrapper .screen-box .col-right .member .member-head p a span {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    top: 0;
    left: 10px;
}

.wrapper .screen-box .col-right .member .member-head p a.icon span {
    background-image: url('./微信图片_20200218173928.png');
    background-position: 0 -572.5px;
}

.wrapper .screen-box .col-right .member .member-head p a.club span {
    background-image: url('./img/pics.png');
    background-position: 0 -528px;
}

.wrapper .screen-box .col-right .member .member-foot {
    width: 290px;
    height: 40px;
    text-align: center;
    padding-top: 10px;
}

.wrapper .screen-box .col-right .member .member-foot a {
    display: inline-block;
    height: 25px;
    width: 75px;
    background: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
    border-radius: 4px;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    color: #fff;
    font-weight: 700;
}

.wrapper .screen-box .col-right .member .member-foot a.login {
    width: 92px;
}

.wrapper .screen-box .col-right .message {
    width: 100%;
    height: 26px;
}

.wrapper .screen-box .col-right .message a {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #ffe4dd;
    color: #f40;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    position: relative;
}

.wrapper .screen-box .col-right .message a span {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 9px;
    right: 52px;
    background-image: url('./img/ysj.png');
    background-size: 100% 100%;
}

.wrapper .screen-box .col-right .notice {
    height: 98px;
    width: 100%;
    padding-top: 10px;
}

.wrapper .screen-box .col-right .notice ul li {
    float: left;
}

.wrapper .screen-box .col-right .notice .title {
    height: 24px;
    width: 95%;
    padding: 0 8px;
}

.wrapper .screen-box .col-right .notice .title li {
    width: 32px;
    height: 20px;
    margin: 0 10px;
    text-align: center;
}

.wrapper .screen-box .col-right .notice .title li a {
    color: #3c3c3c;
    font-size: 13px;
    line-height: 20px;
    padding: 0 2px;
}

.wrapper .screen-box .col-right .notice .title li a.active {
    font-weight: 700;
    border-bottom: 2px solid #f40;
}

.wrapper .screen-box .col-right .notice .title li a:hover,
.wrapper .screen-box .col-right .notice .content li a.active,
.wrapper .screen-box .col-right .notice .content li a:hover {
    color: #f40;
}

.wrapper .screen-box .col-right .notice .content {
    width: 94%;
    height: 50px;
    padding: 9px;
}

.wrapper .screen-box .col-right .notice .content li {
    width: 130px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.wrapper .screen-box .col-right .notice .content li a {
    font-size: 12px;
    color: #3c3c3c;
}

.wrapper .screen-box .col-right .module {
    width: 100%;
    height: 150px;
}

.wrapper .screen-box .col-right .module ul li {
    float: left;
    width: 72px;
    height: 75px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.wrapper .screen-box .col-right .module ul li:hover {
    border: 1px solid #f40;
}

.wrapper .screen-box .col-right .module ul li a {
    display: block;
    text-align: center;
    margin-top: 10px;
}

.wrapper .screen-box .col-right .module ul li a span {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('./img/ysj.png');
}

.img07 {
    width: 30px;
    height: 30px;
}

.module1 {
    width: 286px;
    height: 76px;
    border: 1px solid #eee;
}

.num {
    width: 286px;
    height: 30px;
    text-align: center;
    line-height: 20px;
}

.h1 {
    font-size: 14px;
    padding-left: 14px;
    height: 30px;
    line-height: 30px;
    position: relative;
    z-index: 2
}

.more {
    position: absolute;
    right: 10px;
    font-size: 12px;
    font-weight: 400;
}

.img08 {
    margin: 0px 4px;
}

.wrapper .screen-box .col-right .module ul li a p {
    color: #333;
    font-size: 12px;
}

.tbh-discover-goods {
    width: 590px;
    float: left;
    height: 658px;
    background-color: #fff;
}

.tbh-shopping {
    width: 590px;
    float: left;
    height: 658px;
    background-color: #fff;
    margin: 0px 0px 0px 10px;
}

.layer {
    width: 1190px;
    margin: 0 auto;
}

.layer-inner {
    height: 660px;
    margin-top: 10px;
}

.tp {
    float: left;
    cursor: pointer;
}

.h2 {
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mg {
    width: 180px;
    height: 200px;
    margin: 0px 0px 0px 20px;
}

.mg1,
.mg2 {
    width: 180px;
    height: 200px;
}

.lz {
    text-align: left;
    font-size: 13px;
    width: 185px;
    margin: 0px 0px 0px 20px;
}

.tx {
    text-align: center;
    font-size: 13px;
    width: 185px;
}

.xt {
    text-align: left;
    font-size: 13px;
    width: 185px;
}

.lz1 {
    margin: 12px;
    height: 28px;
    width: 166px;
    color: #35b1ff;
}

.layer {
    width: 1190px;
    margin: 0 auto;
}

.gg {
    height: 150px;
}

.up {
    background-color: #fff;
    margin-top: 10px;
    height: 200px;
}

.img09 {
    margin: 0px 52px;
}