淘宝伪网页简单复原

最新推荐文章于 2024-06-21 16:29:17 发布
最新推荐文章于 2024-06-21 16:29:17 发布
阅读量932 收藏 6
点赞数 4
分类专栏： html+css 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57826863/article/details/121715067
版权

html和css还有放图片的文件夹要在一个目录底下

改成自己的电脑路径┗|｀O′|┛ 嗷~~

字体图标可以从icomoon或者iconfont上白嫖，我没找完嘿嘿

P.S没整的完全一样，随便看看

HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="taobao.css">
    <link rel="icon" href="tb图标.ico">
</head>

<body>

    <!-- 头部最顶上 -->
    <div class="dingdakuang" class="clearfix">
        <div class="header w">
            <ul class="fl">
                <li class="head1 p6">
                    <span class="mr7">中国大陆</span>
                    <span class="ys xing jiantou"></span>
                </li>
                <li class="head2 p6">
                    <a href="#" class="denglu mr7">亲,请登录</a>
                    <a href="#" class="mr7 zt">免费注册</a>
                </li>
                <li>
                    <a href="#" class="p6 zt">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#" class="p6 zt">我的淘宝</a>
                    <span class="ys xing jiantou"></span>
                </li>
                <li class="mr7 p6">
                    <span class="ys mr5"></span>
                    <a href="#" class="zt">购物车</a>
                </li>
                <li class="mr7">
                    <a href="#" class="zt">
                        <span class="ys xing mr5"></span>
                        收藏夹</a>
                    <span class="ys xing jiantou"></span>
                </li>
                <li>
                    <a href="#" class="p6 zt">商品分类</a>
                </li>
                <li class="line">
                    |
                </li>
                <li class="p6">
                    <a href="#" class="zt">千牛卖家中心</a>
                    <span class="ys xing jiantou"></span>
                </li>
                <li class="p6">
                    <a href="#" class="zt">联系客服</a>
                    <span class="ys xing jiantou"></span>
                </li>
            </ul>
        </div>
    </div>


    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix w">
            <h1 class="fl"><a href="#">淘宝网</a></h1>

            <div class="code fr">
                <span class="c5 xz">下载淘宝</span>
                <img src="image/code.png" alt="">
            </div>
            <div class="search">
                <ul class="searchTab clearfix">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>

                <div class="searchContent clearfix">
                    <form action="#">
                        <div class="searchBox fl">
                            <input type="text">
                            <div class="placeholder">
                                <i class="ys"></i>
                                <span>双肩包</span>
                            </div>
                            <span class="ys camera"></span>
                        </div>
                        <div class="btn fl">
                            <button>搜索</button>
                        </div>
                    </form>
                </div>
                <div class="hotkey">
                    <a href="#">新款连衣裙</a>
                    <a href="#">四件套</a>
                    <a href="#" class="c5">潮流T恤</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>
                    <a href="#">时尚女包</a>
                    <a href="#">沙发</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav" class="w clearfix">
        <h2 class="fl">主题市场</h2>
        <ul class="fl">
            <li><a href="#" class="ysr pb">天猫</a></li>
            <li><a href="#" class="ysr pb">聚划算</a></li>
            <li><a href="#" class="ysg pb">天猫超市</a></li>
            <li class="line1">|</li>
            <li><a href="#" class="bh pb">司法拍卖</a></li>
            <li><a href="#" class="bh pb">飞猪旅行</a></li>
            <li><a href="#" class="bh pb">天天特卖</a></li>
            <li class="line1">|</li>
            <li><a href="#" class="bh pb">造点新货</a></li>
            <li><a href="#" class="bh pb">苏宁易购</a></li>
            <li><a href="#" class="bh pb">淘宝心选</a></li>
            <li><a href="#" class="bh pb">智能生活</a></li>
        </ul>
    </div>
    <!-- 首屏内容 -->
    <div id="firstScreen" class="w clearfix">
        <!-- 左边的内容 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">
                <ul>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">女装</a> <span class="jl"> / </span><a href="#" class="zs">内衣</a> <span
                            class="jl"> / </span><a href="#" class="zs">家居</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">女鞋</a> <span class="jl"> / </span><a href="#" class="zs">男鞋</a> <span
                            class="jl"> / </span><a href="#" class="zs">箱包</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">母婴</a> <span class="jl"> / </span><a href="#" class="zs">童装</a> <span
                            class="jl"> / </span><a href="#" class="zs">玩具</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">男装</a><span class="jl"> / </span><a href="#" class="zs">运动户外</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">美妆</a><span class="jl"> / </span><a href="#" class="zs">彩妆</a><span
                            class="jl"> / </span><a href="#" class="zs">个护</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#">手机</a><span class="jl"> / </span><a href="#">数码</a><span class="jl"> / </span><a
                            href="#">企业</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">大家电</a><span class="jl"> / </span><a href="#" class="zs">生活电器</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">零食</a><span class="jl"> / </span><a href="#" class="zs">生鲜</a><span
                            class="jl"> / </span><a href="#" class="zs">茶酒</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">厨具</a><span class="jl"> / </span><a href="#" class="zs">收纳</a><span
                            class="jl"> / </span><a href="#" class="zs">清洁</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">家纺</a><span class="jl"> / </span><a href="#" class="zs">家饰</a><span
                            class="jl"> / </span><a href="#" class="zs">鲜花</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">图书音像</a><span class="jl"> / </span><a href="#" class="zs">文具</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">医药保健</a><span class="jl"> / </span><a href="#" class="zs">进口</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">汽车</a><span class="jl"> / </span><a href="#" class="zs">二手车</a><span class="jl"> / </span><a href="#" class="zs">用品</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="zs">房产</a><span class="jl"> / </span><a href="#" class="zs">装修家具</a><span
                            class="jl"> / </span><a href="#" class="zs">建材</a>
                    </li>
                    <li>
                        <span class="ys jm tp"></span>
                        <a href="#" class="wp zs">手表</a><span class="jl"> / </span><a href="#" class="zs">眼镜</a><span
                            class="jl"> / </span><a href="#" class="zs">珠宝饰品</a>
                    </li>
                </ul>
            </div>
            <!-- 图片1 -->
            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img">
                        <a href="#"><img src="image/tb首屏.jpg"></a>
                    </div>
                    <button class="ys lb"></button>
                    <button class="ys rb"></button>
                    <div class="circle">
                        <span class="red"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
            </div>
            <!-- 图片2 -->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="text clearfix">
                        <img src="image/天猫.png" class="fl tm">
                        <span class="fl bg">理想生活上天猫</span>
                        <span class="fr ym"><span class="nu1">1</span class="nu5">/5</span>
                    </div>
                    <div class="img">
                        <a href="#"><img src="image/tb首屏1.webp" class="img1"></a>
                        <a href="#"><img src="image/tb首屏2.webp" class="img2"></a>
                    </div>
                    <button class="ys lb"></button>
                    <button class="ys rb"></button>
                </div>
            </div>
        </div>
        <!-- 右边的内容 -->
        <div class="firstRight fr">
            <!-- 用户 -->
            <div class="wuwu">
                <div class="user">
                    <a href="#" class="avatar"><img src="image/tb首屏4.jpg"></a>
                    <p class="username">Hi!你好</p>
                </div>
                <div class="btn">
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                    <button class="shop">开店</button>
                </div>
            </div>
            <div class="tupian"><img src="image/tb首屏3.webp"></div>
            <!-- 公告区 -->
            <div class="notice">
                <div class="gg"><span class="gg1">公告</span><span class="gg2">新鲜事儿都在这里~</span></div>
                <div class="gz"><a href="#" class="gz1">规则</a><a href="#" class="gz2">淘宝网市场管理与违规处理规范</a></div>
                <div class="rd1"><a href="#" class="gz1">热点</a><a href="#" class="gz2">关于推进“清明”账号乱象专项整治的通知</a></div>
                <div class="rd2"><a href="#" class="gz1">热点</a><a href="#" class="gz2">《淘宝平台违禁信息管理规则》</a></div>
            </div>
            <!-- 图标区 -->
            <div class="bth">
                <div class="ys xx"><a href="#"></a></div>
                <div class="ys xx"><a href="#"></a></div>
                <div class="ys xx"><a href="#"></a></div>
                <div class="ys xx1"><a href="#"></a></div>
                <p>收藏的宝贝</p>
                <p>买过的店铺</p>
                <p>收藏的店铺</p>
                <p>我的足迹</p>
            </div>
        </div>

        <!-- 有好货和猜你喜欢 -->
        <div id="sp" class="w cleafix">
            <!-- 有好货 -->
            <div class="goods1 fl">
                <div class="head clearfix">
                    <span>有好货</span>
                    <img src="image/quanmkb.png">
                </div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="image/yhh1.webp"></a>
                        <div class="p1">
                            <h4><a href="#">同车同伴车载头枕腰靠</a></h4>
                            <p class="text"><a
                                    href="#">一路行车，如果是不适相伴，那可能会酿成一些不可挽回的后果，所以您需要带上舒适陪伴您行车，这款能四季呵护您脊椎腰椎的腰靠无疑能给您带来行车途中的舒适体验，它的面料都是选用优质的运动针织面料，更亲近您的皮肤不会产生静电，它还能缓解您驾驶途中的疲劳感，让您一路舒适相伴。</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p1">
                            <a href="#"><img src="image/yhh2.webp"></a>
                            <h4><a href="#">SINOMAX海绵床垫 </a></h4>
                            <p class="text"><a
                                    href="#">来自香港的品牌——赛诺，床垫采用优质海绵制造，比棉絮更舒服，贴合身体，触感舒适，同时具有吸音的效果，带来安静的睡眠，充分释放身体压力，给予恰到好处的支撑。</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p1">
                            <a href="#"><img src="image/yhh3.webp"></a>
                            <h4><a href="#">好孩子 儿童安全座椅</a></h4>
                            <p class="text"><a href="#">侧撞防护系统，搭配宽大的座舱面积设计，保障乘坐安全又舒适。</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="p1">
                            <a href="#"><img src="image/yhh4.webp"></a>
                            <h4><a href="#">只需翻转一下，就能安排你</a></h4>
                            <p class="text"><a href="#">用这个计时器，做饭学习，任何事都能提高效率噢</a></p>
                        </div>
                    </li>
                    <li>
                        <div class="p1">
                            <a href="#"><img src="image/yhh5.webp"></a>
                            <h4><a href="#">鬼塚虎 麂皮材质运动鞋</a></h4>
                            <p class="text"><a href="#">此款跑鞋采用了麂皮材质打造鞋面，提供出色的缓震性能，缔造出色缓降性能。</a></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div id="xh" class="w cleafix">
            <div class="goods2 fl">
                <div class="head2 clearfix">
                    <span>猜你喜欢</span>
                    <img src="image/gxtj.png">
                </div>
                <ul class="list1">
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt1.webp"></a>
                            <h4><a href="#">红色实木长方托盘 茶盘 日式茶盘 茶具 果盘 托盘 婚礼盘订做</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>19.55</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt2.webp"></a>
                            <h4><a href="#">春秋全棉美式保暖针织盖毯加厚纯棉沙发毯子毛毯北欧航空毯午睡毯</a></h4>
                            <p class="info">
                                <span c5lass="price"><em>¥</em>199</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt3.webp"></a>
                            <h4><a href="#">长方陶瓷饭盒卡通三格多格陶瓷碗带盖便当盒三件套微波炉加热餐盒</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>20</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt4.webp"></a>
                            <h4><a href="#">日式抽屉收纳盒内置分格整理盒神器桌面文具厨房里面的小分隔盒子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>5.3</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt5.webp"></a>
                            <h4><a href="#">包邮家用陶瓷盘子圆形菜盘 创意碗盘骨瓷西餐具牛扒盘 清新水果盘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>59</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt6.webp"></a>
                            <h4><a href="#">铸铁锅日式炖锅煲汤锅寿喜锅煲仔饭干锅无涂层老式加厚生铁锅通用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>38</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt7.webp"></a>
                            <h4><a href="#">Lototo日式陶瓷水果沙拉碗创意盘子面碗深盘大菜碗家用餐具早餐盘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>26.9</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt8.webp"></a>
                            <h4><a href="#">智慧夫人日式硅胶冰格带盖子创意大冰块模具制冰盒辅食盒冷冻盒子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12.8</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt9.webp"></a>
                            <h4><a href="#">纯白长方陶瓷平盘欧式面包盘蛋糕托盘甜品盘寿司刺身盘酒店展示盘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>19.8</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt10.webp"></a>
                            <h4><a href="#">衣服收纳箱透明塑料储物箱特大号收纳盒箱子整理箱玩具被子储物盒</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>33</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt11.webp"></a>
                            <h4><a href="#">不锈钢胡椒研磨器家用手动陶瓷芯磨白黑胡椒粒粉花椒研磨瓶调料罐</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>9.5</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt12.webp"></a>
                            <h4><a href="#">厨房防油溅锅盖带手柄防油溅网罩不锈钢防油网防油爆网盖油隔油盖</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>11.9</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt13.webp"></a>
                            <h4><a href="#">纯白陶瓷鱼盘蒸鱼盘子 厚边椭圆形家用碟子大号 餐厅饭店酒店餐具</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>21</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt14.webp"></a>
                            <h4><a href="#">厨房食品收纳盒饺子盘塑料盘子水饺盘托盘速冻冷冻长方形冰柜专用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>7.6</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt15.webp"></a>
                            <h4><a href="#">陶瓷日式调料罐套装调味瓶组合北欧高颜值盐罐创意厨房带盖糖罐子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>69.9</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt16.webp"></a>
                            <h4><a href="#">餐桌隔热垫欧式耐热锅垫美式碗菜垫子长方形餐盘垫软木西餐垫家用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>14.8</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt17.webp"></a>
                            <h4><a href="#">现货 日本制美浓烧复古小兵手工粗陶梨花餐盘菜碗咖啡茶杯深钵</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>68</span>
                            </p>
                        </div>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt18.webp"></a>
                            <h4><a href="#">朵颐长柄木质锅铲勺炒菜木铲子不粘锅专用家用木勺子大汤勺调味勺</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>26</span>
                            </p>
                        </div>
                    </li>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt19.webp"></a>
                            <h4><a href="#">大号PP塑料家用方形双层火锅淘菜篮水果沥水盘洗菜盆水杯茶杯托盘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>11.8</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt20.webp"></a>
                            <h4><a href="#">大不锈钢盆圆形洗菜盆家用特大号加厚洗澡不锈钢大盆超大洗衣服盆</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt21.webp"></a>
                            <h4><a href="#">摩登主妇日式小菜碟子调味碟碗碟蘸酱料调料酱油醋碟盘子家用餐具</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>9.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt22.webp"></a>
                            <h4><a href="#">朵颐欧式陶瓷收纳罐筷子勺收纳筒创意筷子架餐具收纳盒厨房储物罐</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>78</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt23.webp"></a>
                            <h4><a href="#">创意家用可爱彩色小叉水果叉水果签 陶瓷不锈钢点心叉甜品叉套装</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt24.webp"></a>
                            <h4><a href="#">304不锈钢碗架沥水架单层碗碟架厨房收纳置物架沥水篮漏水篮筷架</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>88</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt25.webp"></a>
                            <h4><a href="#">器昔|日式手工刷花餐盘 创意餐盘日式盘子果盘 家用陶瓷餐具碗碟</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>69</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt26.webp"></a>
                            <h4><a href="#">陶瓷调味罐日式创意厨房调味盒套装组合装盐糖味精调料盒调料罐子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>19.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt27.webp"></a>
                            <h4><a href="#">创意日式陶瓷碗拉面碗家用大碗泡面碗沙拉碗复古米饭碗汤碗斗笠碗</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>43</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt28.webp"></a>
                            <h4><a href="#">14CM厨房夹缝置物架卫生间窄缝收纳置物架冰箱窄柜厕所角落整理架</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>38</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt29.webp"></a>
                            <h4><a href="#">加厚不锈钢饺子盘 双层沥水水饺盘 不锈钢盘子 托盘圆盘 多用盘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt30.webp"></a>
                            <h4><a href="#">2件套北欧茶色玻璃碗米饭碗双耳沙拉碗麦片碗甜品碗家用耐热防烫</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>6.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt31.webp"></a>
                            <h4><a href="#">餐铃吧台桌铃传菜钟铃 上菜出菜叫单铃铛抢答器</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>11.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt32.webp"></a>
                            <h4><a href="#">雅刻丽浴室置物架防水卫生间客厅收纳架卧室储物架洗手间拖鞋架子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>55</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt33.webp"></a>
                            <h4><a href="#">创意欧式陶瓷盘西餐意面盘圆形菜盘子点心盘水果沙拉盘平盘家用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>28</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt34.webp"></a>
                            <h4><a href="#">日本进口多功能果蔬削皮器土豆山药去皮削皮刀蔬菜胡萝卜刮皮神器</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12.5</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt35.webp"></a>
                            <h4><a href="#">贵州烙锅小吃平底生铁铸铁炸土豆加厚罗锅家用商用电磁炉能用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>26.8</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt36.webp"></a>
                            <h4><a href="#">手动家用蒜泥捣蒜压蒜器大蒜蒜蓉蒜头姜蒜搅碎机打蒜搅蒜切蒜神器</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>10.68</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt37.webp"></a>
                            <h4><a href="#">盘子菜碟家用日式复古创意个性彩色方盘点心盘沙拉盘高淳陶瓷餐具</a></h4>
                                <span class="price"><em>¥</em>19.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt38.webp"></a>
                            <h4><a href="#">可伸缩洗菜盆淘菜盆厨房水槽沥水篮菜篮子洗水果盆滤水家用洗菜器</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>12.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt39.webp"></a>
                            <h4><a href="#">传统陶土单柄煨汤瓦罐养生立汤煲砂锅明火老式炖肉煮粥小瓦罐商用</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>20</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt40.webp"></a>
                            <h4><a href="#">韩国爆款不沾烤肉锅一人食多功能迷你烧烤炉家用酒精烤盘户外便携</a></h4>
                                <span class="price"><em>¥</em>158</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt41.webp"></a>
                            <h4><a href="#">出口美国窑变经典美式格子碗盘草帽造型面碗面碗汤碗沙拉碗釉下</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>35</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt42.webp"></a>
                            <h4><a href="#">日本天妇罗油炸锅家用土豆小炸锅煤气燃气电磁炉通用迷你铁锅不粘</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>69</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt43.webp"></a>
                            <h4><a href="#">304不锈钢筷子家用防滑耐高温防霉高档一人一筷儿童公筷商用快子</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>11.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt44.webp"></a>
                            <h4><a href="#">北欧ins茶水分离陶瓷马克杯带盖勺情侣对杯礼盒简约办公过滤茶杯</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>20.16</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt45.webp"></a>
                            <h4><a href="#">鞋托架鞋柜收纳神器简易省空间塑料分层一体式鞋架整理鞋子收纳架</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>23.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt46.webp"></a>
                            <h4><a href="#">食品级小学生餐垫硅胶餐垫可折叠餐布防水防油渍隔热儿童午餐桌布</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>26.8</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt47.webp"></a>
                            <h4><a href="#">调味罐单个家用大玻璃盐罐子北欧组合装厨房调料盒日式套装佐料瓶</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>7.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt48.webp"></a>
                            <h4><a href="#">马克杯带盖复古水杯办公室创意茶缸定制怀旧经典仿搪瓷杯杯子陶瓷</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>9.9</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt49.webp"></a>
                            <h4><a href="#">厨房收纳盒整理盒收纳筐厨具锅具收纳置物架下水槽神器橱柜收纳架</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>14</span>
                            </p>
                        </div>
                    </li>

                    <li>
                        <div class="p2">
                            <a href="#"><img src="image/gt50.webp"></a>
                            <h4><a href="#">耐高温茶具套装家用耐热陶瓷水具日式水杯套装客厅待客复古泡茶壶</a></h4>
                            <p class="info">
                                <span class="price"><em>¥</em>88</span>
                            </p>
                        </div>
                    </li>
                </ul>
                <!-- end -->
                <div id="end" class="w clearfix">
                    <span><img src="image/QQ图片20211203165448.png"></span>
                </div>
            </div>
        </div>



        <!-- 右侧固定定位导航 -->
        <div id="tool">
            <span class="ys"></span>
            <div class="btnn">
                <a href="#" class="c4">品质 好货</a>
                <a href="#" class="c6 active pa">猜你 喜欢</a>
                <a href="#" class="c7 item6">反馈</a>
                <a href="#" class="c7 pa zh">暴恐 举报</a>

            </div>
        </div>

        <!-- 最下main -->
        <div id="xm" class="w clearfix">
            <div class="xf fl">
                 <div class="tt">
                     <span class="ys"></span>
                     <h2>消费者保障</h2>
                 </div>
                 <ul class="list2 fl">
                     <li><a href="#">保障范围</a></li>
                     <li><a href="#">退货退款流程</a></li>
                     <li><a href="#">服务中心</a></li>
                     <li><a href="#">更多特色服务</a></li>
                 </ul>
            </div>
            <div class="xf fl">
                <div class="tt">
                    <span class="ys"></span>
                    <h2>新手上路</h2>
                </div>
                <ul class="list2 fl">
                    <li><a href="#">新手专区</a></li>
                    <li><a href="#">消费警示</a></li>
                    <li><a href="#">交易安全</a></li>
                    <li><a href="#">24小时在线帮助</a></li>
                    <li><a href="#">免费开店</a></li>
                </ul>
            </div>
            <div class="xf fl">
                <div class="tt">
                    <span class="ys"></span>
                    <h2>付款方式</h2>
                </div>
                <ul class="list2">
                    <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>
            </div>
            <div class="xf fl">
                <div class="tt">
                    <span class="ys"></span>
                    <h2>淘宝特色</h2>
                </div>
                <ul class="list2">
                    <li><a href="#">手机淘宝</a></li>
                    <li><a href="#">旺旺/旺信</a></li>
                    <li><a href="#">大众评审</a></li>
                </ul>
            </div>
        </div>

</body>

</html>

CSS代码

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?aaqjzo');
    src:  url('fonts/icomoon.eot?aaqjzo#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?aaqjzo') format('truetype'),
      url('fonts/icomoon.woff?aaqjzo') format('woff'),
      url('fonts/icomoon.svg?aaqjzo#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  


.ys {
    font-family: 'icomoon';
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

body {
    background-color: #eae8eb;
    font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    color: #3c3c3c;
    height: 2190px;
}

.w {
    /* 版心 */
    width: 1190px;
    margin: auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.dingdakuang {
    height: 35px;
    background-color: #f5f5f5;
    margin-top: 0px;
}

a {
    text-decoration: none;
}

.header {
    height: 35px;
    line-height: 35px;
}

li {
    display: inline-block;
    list-style: none;
}

.header .denglu {
    color: #f22e00;
}

.ys {
    color: #f40;
}

.mr7 {
    margin: 0px 7px 0px 0px;
}

.p6 {
    padding: 0px 6px;
}

.zt {
    color: #6c6c6c;
}

.line {
    color: #DDDDDD;
    padding: 0px 5px;
}

.xing {
    color: #9c9c9c;
}

.jiantou {
    width: 12px;
    height: 6px;
    margin: 16px 0px 0px;
}

.header li a:hover {
    color: #f40;
}

.mr5 {
    margin: 0px 5px 0px 0px;
}

.c5 {
    color: #ff5000;
}

/* 头部搜索 */
#headSearch {
    padding: 24px 0 10px 0;
}

#headSearch h1 a {
    display: block;
    width: 190px;
    height: 58px;
    background: url(image/logo.png) center no-repeat;
    text-indent: -9999px;
    /* 首行缩进 */
    overflow: hidden;
    margin: 0 0 0 22px;
    padding: 58px 0 0;
}

#headSearch .code {
    position: relative;
    width: 90px;
    height: 113px;
    border: 1px solid #eae8eb;
    margin-right: 110px;
    background-color: #fff;
}

#headSearch .code img {
    width: 79px;
    height: 82px;
    margin: 5px 6px 0 6px;
}


#headSearch .search {
    width: 630px;
    margin: auto;

}

#headSearch .searchTab {
    height: 22px;
    padding-left: 17px;
}

#headSearch .searchTab li {
    float: left;
    width: 36px;
    line-height: 22px;
    margin-right: 4px;
    text-align: center;
    color: #f40;
    cursor: pointer;
}

.xz {
    margin: 4px 19px 0px 19px;
    text-align: center;
}

#headSearch .searchTab li:hover {
    background-color: #ffeee5;
}

#headSearch .searchTab li.active {
    color: #fff;
    font-weight: blod;
    background-image: linear-gradient(to right, #ff9000, #ff5000);
    /* 线性渐变 */
    border-radius: 6px 6px 0 0;
}

#headSearch .searchContent {
    height: 40px;
}

#headSearch .searchBox {
    width: 554px;
    height: 40px;
    box-sizing: border-box;
    border: 2px solid #ff5000;
    border-right: none;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    position: relative;
}

#headSearch .searchBox input {
    width: 490px;
    height: 36px;
    line-height: 36px;
    outline: none;
    border: none;
    text-indent: 10px;
    position: absolute;
    z-index: 1;
    background-color: transparent;
}

#headSearch .placeholder {
    position: absolute;
    top: 10px;
    left: 14px;
}

#headSearch .placeholder i {
    color: #9c9c9c;
    vertical-align: 1px;
}

#headSearch .camera {
    font-size: 28px;
    color: #9c9c9c;
    position: absolute;
    right: 20px;
    top: -2px;
    cursor: pointer;
}

#headSearch .searchContent button {
    width: 74px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    border: none;
    background-image: linear-gradient(to right, #ff9000, #ff5000);
    border-radius: 0 20px 20px 0;
}

#headSearch .hotkey {
    height: 25px;
    line-height: 25px;
}

#headSearch .hotkey a:hover {
    color: #ff5000;
}

/* 导航 */

#nav h2 {
    width: 190px;
    height: 30.56px;
    line-height: 30px;
    font-size: 16px;
    color: #ff6200;
    text-align: center;
    background-color: #ffffff;
    border-top-left-radius: 15px;
    border: none;
}

#nav ul {
    width: 1000px;
    background-color: #ffffff;
    border-top-right-radius: 15px;
}

#nav ul li {
    float: left;
    line-height: 30px;
    margin: 0 7px;
    font-size: 14px;
    color: #333333;
}

#nav ul li .ysr {
    color: #ff0036;
    font-weight: 700;
    font-size: 16px;
}

#nav ul li .ysg {
    color: #33c900;
    font-weight: 700;
    font-size: 16px;
}

.line1 {
    margin: 0 0 0 7px;
}

.bh:hover {
    color: #ff5000;
}

.pb {
    padding: 0 5px;
}

/* <!-- 首屏内容 --> */

#firstScreen {
    width: 1190px;
    height: 4500px;
    background-color: #ffffff;
    border-radius: 0 0 15px 15px;
}

.firstLeft {
    width: 773px;
    height: 526px;
}

.firstLeft .sideNav {
    width: 212px;
    height: 526px;
}


.firstLeft .img1Box {
    width: 520px;
    height: 280px;
    margin-top: 10px;
}

.firstLeft .img1Box img {
    border-radius: 12px;
}

.firstLeft .pic {
    width: 520px;
    position: relative;
}

.firstLeft .pic button {
    width: 20px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    cursor: pointer;
    border: none;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    margin-top: -15px;
    display: none;
}

.firstLeft button.rb {
    right: 0;
    border-radius: 15px 0 0 15px;
}

.firstLeft button.lb {
    left: 0px;
    border-radius: 0 15px 15px 0;
}

.firstLeft .pic:hover button {
    display: block;
}

.firstLeft .pic .circle {
    width: 70px;
    height: 30px;
    border-radius: 10px;
    position: absolute;
    bottom: 15px;
    height: 13px;
    text-align: center;
    font-size: 0;
    left: 50%;
    margin-left: -39px;
    font-size: 0px;
    background-color: rgba(255, 255, 255, .3);
    text-align: center;
}

.firstLeft .pic .circle span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin: 0 3px;
    margin-top: 2px;
    cursor: pointer;
}

.firstLeft .pic .circle .red {
    background-color: #ff5000;
}

.firstLeft .img2Box {
    width: 520px;
    height: 218px;
    margin-top: 10px;
}


.firstLeft .img2Box .text {
    height: 24px;
}

.firstLeft .img2Box .tm {
    height: 24px;
    line-height: 24px;
}

.firstLeft .img2Box .text .bg {
    color: #999;
    margin-left: 10px;
    width: 84px;
    height: 14.5px;
    line-height: 22px;
}

.firstLeft .img2Box.text .ym {
    width: 19.2px;
    height: 24px;
    position: absolute;
    top: 1px;
    right: 2px;
}



.firstLeft .img2Box .nu1 {
    width: 7.04px;
    height: 15.5px;
    color: #ff1648;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.firstLeft .img2Box .nu5 {
    color: #3c3c3c;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.firstLeft .img2Box .text .tm {
    width: 74px;
    height: 22px;
}

.firstLeft .img2Box .img {
    background-color: #f3f3f3;
    border-radius: 20px;
    padding: 4px 0 0 0;
}

.firstLeft .img2Box .img1 {
    width: 251px;
    height: 190px;
    border-radius: 12px;
    margin-left: 6px;
    margin-top: 2px;
    margin-right: 3px;
}

.firstLeft .img2Box .img2 {
    width: 251px;
    height: 190px;
    border-radius: 12px;
    margin-top: 2px;
}

.sideNav ul li {
    height: 20px;
    font-size: 14px;
    margin: 0 0 14px;
    transition: background-color 0.3s;
}

.sideNav ul {
    padding: 6px 0 3px 18px;
}

.jm {
    font-size: 16px;
    color: #666;
}

.nav .sideNav ul li .wp {
    margin: 0px;
}

.nav .sideNav ul li .tp {
    height: 16px;
    margin: 0 12px 0 0;
    font-size: 16px;
    color: #666;
}

.sideNav ul li .zs {
    color: #666;
    height: 17px;
}

.sideNav ul li .jl {
    padding: 0 8px;
}

.sideNav ul li:hover {
    color: #f40;
}

.sideNav ul a:hover {
    color: #f40;
    text-decoration: underline;
}

.sideNav ul span:hover {
    color: #f40;
}

/* youbian */
.firstRight {
    width: 384px;
    height: 516px;
    margin: 10px 18px 0 0;
    background-color: #f3f3f3;
    border-radius: 12px;
}

.firstRight .wuwu {
    width: 384px;
    height: 124px;
    margin-top: 17.5px;
}

.firstRight .user {
    position: relative;
    display: block;
    width: 384px;
    height: 71px;
}

.firstRight .user img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-clip: padding-box;
    line-height: 50px;
    cursor: pointer;
    margin-left: 167px;
}

.firstRight .user .username {
    width: 384px;
    font-size: 12px;
    margin: 4px 0 0;
    display: block;
    height: 17px;
    line-height: 17px;
    text-align: center;
}

.firstRight .wuwu .btn {
    width: 384px;
    height: 42px;
    margin: 11px 0 0;
    padding: 0 0 0 14px;
}


.firstRight .wuwu .btn .login {
    float: left;
    color: #ffffff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
    background-repeat: repeat-x;
    border: none;
    text-align: center;
    width: 128px;
    height: 32px;
    line-height: 32px;
    margin: 0 6px 0 0;
    background-clip: padding-box;

}

.firstRight .wuwu .btn .register {
    float: left;
    line-height: 32px;
    width: 108px;
    margin-right: 6px;
    text-align: center;
    color: #FFF;
    background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
    background-repeat: repeat-x;
    border-radius: 4px;
    background-clip: padding-box;
    font-size: 16px;
    border: none;
}

.firstRight .wuwu .btn .shop {
    float: left;
    line-height: 32px;
    width: 108px;
    margin-right: 6px;
    text-align: center;
    color: #FFF;
    background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
    background-repeat: repeat-x;
    border-radius: 4px;
    background-clip: padding-box;
    font-size: 16px;
    border: none;
}

.firstRight .tupian {
    float: left;
    width: 356px;
    height: 141px;
    border: 0px;
    margin-left: 14px;
    border-radius: 4px;
}

.firstRight .notice {
    float: left;
    width: 370px;
    height: 100px;
    margin-left: 14px;
}

.firstRight .notice div {
    display: inline-block;
}

.firstRight .notice .gg {
    float: left;
    width: 370px;
    height: 16px;
    line-height: 16px;
    margin: 17px 0 14px 0;
}

.firstRight .notice .gg .gg1 {
    float: left;
    width: 24px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #3c3c3c;
}

.firstRight .notice .gg .gg2 {
    float: left;
    width: 108px;
    margin-left: 6px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: #3c3c3c;
}

.firstRight .notice .gz1 {
    height: 18px;
    width: 32px;
    line-height: 18px;
    border-radius: 2px;
    background-color: rgba(255, 174, 174, .2);
    opacity: .8;
    text-align: center;
    font-size: 12px;
    color: #FF5000;
    font-weight: 700;
    float: left;
}

.firstRight .notice .gz2 {
    font-size: 12px;
    color: #666;
    margin: 0 0 0 8px;
    float: left;
    width: 295px;
    height: 18px;
    line-height: 18px;
}

.firstRight .bth {
    position: relative;
    float: left;
    width: 372px;
    height: 53px;
    margin: 20px 0 0 20px;
    color: #3c3c3c;
    margin-bottom: 5px;
}

.firstRight .bth div {
    display: inline-block;
}

.firstRight .bth .xx {
    width: 60px;
    height: 36px;
    color: #3c3c3c;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    margin-right: 30px;
}

.firstRight .bth .xx1 {
    width: 60px;
    height: 36px;

    text-align: center;
    font-size: 40px;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    margin-right: 4px;
}

.firstRight .bth p {
    display: inline-block;
    width: 60px;
    height: 17px;
    color: #333333;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    margin-right: 30px;
}

#sp .goods1 {
    float: left;
    width: 1190px;
    height: 340px;
    padding: 10px 0 0;
}

#sp .goods1 .head {
    width: 1170px;
    height: 24px;
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#sp .goods1 .head span {
    width: 72px;
    height: 24px;
    font-size: 24px;
    color: #111;
    font-weight: bold;
    line-height: 24px;
}

#sp .goods1 .head img {
    margin: 4px 0 0 6px;
    height: 20px;
}

/* .tupian */
#sp .goods1 ul {
    width: 1190px;
    height: 267px;
}

#sp .goods1 ul li {
    float: left;
    width: 215px;
    height: 264px;
    margin-left: 20px;
}

#sp .goods1 ul li img {
    width: 215px;
    height: 215px;
    background-color: #000;
    border-radius: 20px;
    border: none;
}

#sp .goods1 ul li .p1 {
    width: 205px;
    height: 49px;
    padding: 0 4px 0 6px;
}

#sp .goods1 ul li h4 a {
    font-size: 16px;
    color: #333333;
    line-height: 16px;
    margin-top: 10px;
    font-weight: normal;
    width: 198px;
    overflow: hidden;
    height: 16px;

}

#sp .goods1 ul li .text {
    width: 182px;
    height: 15px;
    margin-top: 8px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 15px;
    color: #999999;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#sp .goods1 ul li a:hover{
    background-color: white;box-shadow: rgba(0, 0, 0, .1) 5px 5px 5px 1px;
}

/* cainixihuan */
#xh .goods2 .head2 {
    float: left;
    width: 1190px;
    height: 24px;
    padding: 0 0 0 20px;
    margin: 19px 0;
}

#xh .goods2 .head2 span {
    width: 96px;
    height: 24px;
    font-size: 24px;
    color: #111;
    font-weight: bold;
    line-height: 24px;
}

#xh .goods2 .head2 img {
    width: 65px;
    margin: 4px 0 0 6px;
    height: 20px;
}

/* shebiaoge */
#xh .goods2 .list1 {
    width: 1190px;
    height: 3280px;
}


#xh .goods2 ul li {
    width: 215px;
    height: 326px;
    float: left;
    padding: 7px 7px 0 7px;
    margin: 0 0 2px 7px;
    color: #6c6c6c;
}

#xh .goods2 ul li:hover {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#xh .goods2 ul li img {
    width: 215px;
    height: 215px;
    border-radius: 12px;
    border: none;
}

#xh .goods2 ul li h4 {
    width: 215px;
    margin-top: 9px;
    line-height: 22px;
    height: 44px;
    font-size: 16px;
    color: #111111;
    font-weight: normal;
    transition: color 0.3s;
    overflow: hidden;
}

#xh .goods2 ul li h4 a:hover {
    color: #FF5000;
}

#xh .goods2 ul li .info {
    width: 215px;
    height: 22px;
    margin: 11px 0 0;
    line-height: 22px;
    float: left;
    color: #F40;
    font-size: 20px;
}

/* .endd */
#end {
    float: left;
    width: 1190px;
    height: 50px;
    text-align: center;
}

/* 右侧定位导航  */
#tool {
    width: 50px;
    height: 350px;
    position: fixed;
    top: 100px;
    right: 40px;
}

#tool span {
    position: absolute;
    top: -28px;
    font-size: 32px;
    color: #ff7f13;
    width: 50px;
    height: 36px;
    line-height: 36px;
    text-align: center;
}

#tool div {
    height: 350px;
    border-radius: 8px;
    overflow: hidden;
}

#tool a {
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: #fff;
    word-break: keep-all;
    padding-top: 6px;
    box-sizing: border-box;
    position: relative;
}

#tool a:after {
    content: '';
    border-bottom: 1px solid #efefef;
    width: 34px;
    position: absolute;
    left: 8px;
    bottom: 0;

}

.c4 {
    color: #f40;
}

.c7 {
    color: #3c3c3c;
}

.pa {
    padding: 6px 8px 0;
}

#tool .btnn .active {
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
}
#tool .item6{
    padding-top: 18px;
}
#tool .btnn .zh{
border-radius: 0 0 10px 10px;
}
#tool a:hover,#tool a.active{
    background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr='#ffff5000',GradientType=1);
    color: #fff;
    font-weight: bold;
}
#tool a:hover:after,#tool a.active:after{
    border: none;
}
/* zuixiamian */
#xm{
    width: 1190px;

}
#xm .xf{
    width: 247.500px;
    height: 95px;
    padding: 0 25px;
}
#xm .xf .tt{
    width: 247.500px;
    height: 48px;
    margin-bottom: 5px;
}
#xm .xf .tt span{
    float: left;
    font-size: 32px;
    color: #999;
    font-weight: bold;
}
#xm .xf .tt h2{
    width: 80px;
    height: 24px;
    padding-top: 12px;
    margin-left: 12px;
    float: left;
    margin-left: 12px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #3c3c3c;
}
#xm .xf ul{

    width: 247.500px;
    height: 42px;
    display: inline-block;

}
#xm .xf ul li{
    height: 21px;
    display: inline-block;
    zoom: 1;
    font-size: 12px;
    color: #999;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    margin-right: 10px;
    float: none;
    width: auto;
}
#xm .xf ul li a:hover{
    color: #f22e00;
}

网页（只能截个图发在博客上看看效果了）

 

 

 

 

 

 

Bella..
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
图像复原三个算法的代码
04-14
因此，必须采取一定的方法尽可能地减少或消除图像质量的下降，恢复图像的本来面目， 这就是图像复原， 也称为图像恢复。 图像复原与图像增强有类似的地方， 都是为了改善图像。但是它们又有着明显的不同。图像复原是...
数字图像复原.ppt
12-21
该PPT介绍了图像复原的基本概念, 图像退化模型, 图像复原的方法(反向还原法, 约束还原法), 运动模糊图像的复原, 以及图像的几何校正问题.
Linux环境下nginx安装配置--淘宝Tengine
weixin_44216320的博客
05-08 259
文章目录前言一、tengine是什么？二、使用步骤1.下载地址2.解压3.依赖安装4.安装nginx5.编译6.启动7.设置为系统服务7.服务启动、停止、重启总结 前言 随着公司项目的不断发展，为了提高测试效率，最近一直在研究测试平台的研发，我对开发的深入了解，自然免不了和服务器打交道，最近在学习在linux环境下部署nginx服务，就用到了Tengine。 一、tengine是什么？ Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上，针对大访问量网站的需求，添加了很多高级功能和特
仿作淘宝页面 html+css
m0_63706031的博客
07-13 1852
仿作淘宝页面简单版
html+css简单仿制淘宝商品界面
树下一少年的博客
02-08 4993
html+css简单仿制淘宝商品界面 一.主要思路 二.完整代码 三.最终效果
JavaScript⑤(常见网页特效案例、补充知识点、移动端网页特效、本地存储)
DeDeDeFeng的博客
08-27 506
移动端浏览器兼容性较好，我们不需要考虑以前JS 的兼容性问题，可以放心的使用原生JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android和IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touchmove手指在一个 DOM 元素上滑动时触发touchend。
淘宝天猫店铺装修问题与技巧性经验汇总
kendyhj9999的专栏
08-22 1万+
来源：http://www.yilingsj.com/code/2015-01-21/246.html 淘宝天猫店铺装修问题与技巧性经验汇总 作者:艺灵设计 | 来源:http://www.yilingsj.com | 时间:2015-01-21 14:14:52 | 评:4 | 阅:6559 | 积分:0 前言 站长于2013年8月14号开始接触淘宝，由于div+
小米官网首页简单实现及分析
dream_s_a的博客
03-30 5706
目录一、项目规划1、开发工具以及技术栈2、搭建前言1）创建文件夹2）字体图标使用3）网站TDK三大标签SEO优化4）LOGO SEO 优化二、具体实现1、头部1）头部顶栏site_topbar制作2)头部site_header制作2、主要部分1）菜单menu制作2）轮播图.focus制作3、推荐部分4、内容产品部分1）手机模块2）手表模块3）家电模块4）视频模块5、底部1）site_footer部分2)site_info部分6、侧边固定栏1）滚动至内容产品之前的侧边栏2）滚动至内容产品之后的侧边栏 一、项目
JavaScript Web APIs部分参考pink老师ppt（网页常见的js案例）
dyk
07-29 3384
DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 DOM
JavaScript——事件高级+BOM+PC端网页特效+移动端网页特效+本地存储+jQuery（基础+案例）
To_Ma_To的博客
03-08 911
js学习笔记，包含事件高级+BOM+PC端网页特效+移动端网页特效+本地存储+jQuery等内容
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
热门推荐
m0_67401270的博客
03-07 1万+
基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅 ==CSS第一天== 一、css简介 二、css语法规范 三、css代码风格 四、css选择器的作用 五、css基础选择器 1、标签选择器： 2、类选择器 3、多类名选择器 4、id选择器： 5、id选择器和类选择器的区别 6、通配符选择器 7、选择器总结 六、css字体属性: 1、字体大小： 2、字体粗细： 3、字体样式： 4、字体的综合写法 5、字体总结： 七、css文本属性： 1、文本颜色： 2、文本
matlab图像复原和图像增强技术：12 伪彩色增强实现图像增强.zip
05-26
matlab图像复原和图像增强技术：12 伪彩色增强实现图像增强.zip
Java实现复原IP地址的方法
08-25
"Java实现复原IP地址的方法" Java实现复原IP地址的方法是指在Java语言中，通过编写算法来将给定的数字字符串恢复成所有可能的IP地址格式。IP地址是Internet Protocol的缩写，是Internet上标识设备的唯一地址。IP...
盲卷积复原图像
03-30
图像盲卷积复原图像，这是加入噪声之后复原出来的，效果比较好，可以参考一下
HTML---盒子模型
Dreamkidya的博客
06-16 1118
盒子模型在网页设计中扮演着至关重要的角色，它是控制元素布局和样式的基础。本文将详细解析盒子模型的概念、结构和应用，帮助读者更好地掌握这一概念。无论您是初学者还是有经验的开发者，了解盒子模型都是必不可少的。通过深入了解盒子模型，您将能够更加灵活地控制网页元素的外观和布局，提升网页设计的效果和体验。让我们一起探究盒子模型的奥秘，为您的网页设计增添更多可能性作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。
HTML初体验
linux423的博客
06-14 521
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
html做一个分组散点图图的软件
最新发布
weixin_47634487的博客
06-21 469
在HTML中创建一个分组散点图，可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能，易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例： 要添加文件上传功能，可以让用户上传包含数据的文件（例如CSV文件），然后使用JavaScript读取文件并生成散点图。下面是一个示例，展示了如何结合文件上传和用户输入生成分组散点图： 说明： HTML表单：用于用户手动输入每个组的X和Y值。 文件上传：提供了一个文件输入框和按钮，用于上传CSV文件。
DAY02 HTML
adminstate的博客
06-15 868
HTML基础学习
MATLAB内置代码写简单图像复原SNR代码
05-23
下面是一个简单的MATLAB代码示例，用于图像的复原和计算信噪比（SNR）： ```matlab % 读入待处理的图像 im = imread('input_image.png'); % 添加高斯噪声 im_noisy = imnoise(im, 'gaussian', 0, 0.01); % 进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值