用HTML编写淘宝页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/taobao.css"/>
</head>
<!--导航栏-->
<header>
    <nav>
        <span>
            <a href="">亲，请登录</a>
            <a href="">免费注册</a>
            <a href="">手机逛淘宝</a>
        </span>
        <span>
            <a href="">
                我的淘宝
                <ol>
                    <li>淘宝</li>
                    <li>账户</li>
                    <li>清单</li>
                </ol>
            </a>
            <a href="">购物车</a>
            <a href=""><img src="../images/nav-start.png" alt=""/>收藏夹</a>
            <a href="">商品分类</a>
            <a href="">卖家中心</a>
            <a href="">联系客服</a>
            <a href=""><img src="../images/nav-ham.png" alt=""/>网站导航</a>
        </span>
    </nav>
</header>
<!--淘宝网-->
<div class="taobaowang">
    <div class="taobaowang-top">
        <img src="../images/logo.png" alt=""/>
        <div>
            <div class="sousuo">
                <div class="baobei">
                    <a href="">宝贝</a>
                    <a href="">天猫</a>
                    <a href="">店铺</a>
                </div>
                <div class="shuru">
 
                    <form action="#" method="post">
                        <input type="text" name="username" placeholder=" 家居摆设添欣喜"/><button>搜索</button><span class="gaoji">高级 搜索</span>
                    </form>
                </div>
            </div>
            <div class="xinkuan">
                <a href="">新款连衣裙</a>
                <a href="">四件套</a>
                <a href="">潮流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>
            </div>
        </div>
    </div>
    <div class="taobaowang-bottom">
        <div>
            <p><strong>主题市场</strong>  <img src="../images/menu-item-ham.png" alt=""/></p>
 
        </div>
        <div>
            <a href="">天猫</a>
            <a href="">聚划算</a>
            <a href="">天猫超市</a>
            <a href="">淘抢购</a>
            <a href="">电器城</a>
            <a href="">司法拍卖</a>
            <a href="">中国制造</a>
            <a class="tese" href="">特色中国</a>
            <a href="">飞猪旅行</a>
            <a href="">智能生活</a>
            <a href="">苏宁易购</a>
        </div>
    </div>
 
</div>
<!--主题市场-->
<div class="zhuti">
    <div class="zhongjian">
 
    <div class="zhuti-left">
        <div>
            <div class="nvzhuang">
                <ul>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>女装 /</span>
                        <span>男装 /</span>
                        <span>内衣&nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>鞋靴 /</span>
                        <span>箱包 /</span>
                        <span>配件&nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>童装玩具 /</span>
                        <span>孕产 /</span>
                        <span>用品&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>家电 /</span>
                        <span>数码 /</span>
                        <span>手机 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>美妆 /</span>
                        <span>洗护 /</span>
                        <span>保健品 &nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>珠宝 /</span>
                        <span>眼镜 /</span>
                        <span>手表 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>运动 /</span>
                        <span>户外 /</span>
                        <span>乐器 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>游戏 /</span>
                        <span>动漫 /</span>
                        <span>影视 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>美食 /</span>
                        <span>生鲜 /</span>
                        <span>零食 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>鲜花 /</span>
                        <span>宠物 /</span>
                        <span>农资 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>房产 /</span>
                        <span>装修 /</span>
                        <span>建筑 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>家居 /</span>
                        <span>家饰 /</span>
                        <span>家纺 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>汽车 /</span>
                        <span>二手车 /</span>
                        <span>用品 &nbsp ></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>办公 /</span>
                        <span>DIY /</span>
                        <span>五金电子&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>百货 /</span>
                        <span>餐厨 /</span>
                        <span>家庭保健&nbsp></span>
                    </li>
                    <li>
                        <span><img src="../images/menu-item-icon.png" alt=""/>学习/</span>
                        <span>卡卷/</span>
                        <span>本地服务></span>
                    </li>
                </ul>
                <img src="../images/qietu.png" alt=""/>
            </div>
            <div class="tianmao">
                <img src="../images/qietu01.png" alt=""/>
                <img class="yanyuan" src="../images/qietu02.png" alt=""/>
                <div>
                    <img src="../images/little-tmall.png" alt=""/>
                    <span><strong>天猫必逛</strong></span>
                    <span>热门品牌，天天上天猫！</span>
                </div>
                <div class="xinji">
                    <div>
                        <p>星级好睡眠</p>
                        <p>用新去宠你</p>
                        <a href="">
                            <p>狂欢速抢</p>
                        </a>
                        <img src="../images/01-(2)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>小米超品日</p>
                        <p>平衡车出游热卖</p>
                        <a href="">
                            <p>关注赢小米6！</p>
                        </a>
                        <img src="../images/01-(88)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>价格直降</p>
                        <p>冰洗爆款返场</p>
                        <a href="">
                            <p>享免息分期</p>
                        </a>
                        <img src="../images/01-(66)_03.gif" alt=""/>
                    </div>
                    <div>
                        <p>厨卫大牌管</p>
                        <p>品质放心</p>
                        <a href="">
                            <p>装修省心</p>
                        </a>
                        <img src="../images/01-(2)_05.gif" alt=""/>
                    </div>
                </div>
                <div class="jinri">
                    <div>
                        <a href="">
                            <p>今日热卖</p>
                        </a>
                        <img class="yanyuan" src="../images/qietu03.png" alt=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="shudaizi">
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>书呆子</p>
                    <p>书卷气更迷人</p>
                   <i></i> <img src="../images/qietu23.png" alt=""/>&nbsp<span>人气248006</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>理想家</p>
                    <p>想要这个家</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人气2038770</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>水中飞鱼</p>
                    <p>你属鱼的吧</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人气285040</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>韩范小妖精</p>
                    <p>实力了欧巴</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人气5862134</span>
                </div>
            </div>
            <div>
                <img src="../images/qietu04.png" alt=""/>
                <div>
                    <p>家有萌娃</p>
                    <p>宝贝快长大</p>
                    <img src="../images/qietu23.png" alt=""/>&nbsp<span>人气248006</span>
                </div>
            </div>
        </div>
</div>
        <div class="zhuti-right">
            <div>
            <img src="../images/login-header.png" alt=""/>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
 
</div>
 
</div>
<!--我常逛的-->
<div class="guangwu">
    <div class="zuiyoubian">
        <div class="diyitiao">
            <img src="../images/tkbktbtc.png" alt=""/>
            <a href="">更多></a>
            <div>
                <img src="../images/01-(11112)_03.gif" alt=""/>
                <span><strong>工作需要放松，享受下午时光</strong></span>
                <p>你有吃下午茶的习惯吗？最早关于下午茶的由来，可以最疏导英国17世纪</p>
            </div>
        </div>
        <div>
            <img src="../images/ybhkho.png" alt=""/>
            <div>
                <img src="../images/01-6666_03.gif" alt=""/>
                <span><strong>丹麦Mat手工皮革隔热</strong></span>
                <p>皮革质地能隔热，触感细腻独特，造型简约大方，质感</p>
            </div>
        </div>
        <div>
            <img src="../images/01-6666_07.gif" alt=""/>
            <span><strong>广东特产红豆饼糕点</strong></span>
            <p>广东特产红豆饼糕点，馅心低而清田，饼皮软饵酥脆，馅料</p>
        </div>
        <div>
            <img src="../images/01-6666_10.gif" alt=""/>
            <span><strong>广东特产红豆饼糕点</strong></span>
            <p>广东特产红豆饼糕点，馅心低而清田，饼皮软饵酥脆，馅料</p>
        </div>
        <div>
            <img src="../images/01-6666_12.gif" alt=""/>
            <span><strong>广东特产红豆饼糕点</strong></span>
            <p>广东特产红豆饼糕点，馅心低而清田，饼皮软饵酥脆，馅料</p>
        </div>
        <div>
            <img src="../images/01-6666_13.gif" alt=""/>
            <span><strong>广东特产红豆饼糕点</strong></span>
            <p>广东特产红豆饼糕点，馅心低而清田，饼皮软饵酥脆，馅料</p>
        </div>
        <div>
            <img src="../images/01-6666_14.gif" alt=""/>
            <span><strong>广东特产红豆饼糕点</strong></span>
            <p>广东特产红豆饼糕点，馅心低而清田，饼皮软饵酥脆，馅料</p>
        </div>
 
    </div>
    <div class="zuizuobian">
        <div class="guangwu-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>我常逛的</strong></span>
            <a href="">更多></a>
        </div>
        <div class="yidong">
            <div class="guangwu-bottom">
                <img src="../images/qietu05.png" alt=""/>
                <div>
                    <ul>
                        <li><p><strong>热门TOP</strong></p></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>
                        <li><a href="">打底裤</a></li>
                        <li><a href="">遮阳帽</a></li>
                        <li><a href="">亲子装</a></li>
                        <li><a href="">儿童T斜</a></li>
                        <li><a href="">演出服</a></li>
                    </ul>
                </div>
            </div>
            <div class="guangwu-bottom-tupian">
                <div>
                    <div class="baosui">
                        <div>
                            <img src="../images/qietu06.png" alt=""/>
                        </div>
                        <div>
                            <img src="../images/qietu06.png" alt=""/>
                        </div>
                    </div>
                    <div class="gaohuitou">
                        <img src="../images/qietu07.png" alt=""/>
                    </div>
                    <div class="tongxie">
                        <img src="../images/qietu08.png" alt=""/>
                    </div>
                </div>
                <div class="qinbaobie">
                    <img src="../images/qietu09.png" alt=""/>
                    <img src="../images/qietu10.png" alt=""/>
                    <img src="../images/qietu11.png" alt=""/>
                </div>
            </div>
        </div>
        <div>
            <div class="guangwu-bottom1">
                <img src="../images/qietu05.png" alt=""/>
                <div>
                    <ul>
                        <li><p><strong>热门TOP</strong></p></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>
                        <li><a href="">口红 bb霜</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>
            <div class="guangwu-bottom1-tupian">
                <div>
                    <div class="baosui">
                        <div>
                            <img src="../images/01-(6662)_03.gif" alt=""/>
                        </div>
                        <div>
                            <img src="../images/01-(6662)_03.gif" alt=""/>
                        </div>
                    </div>
                    <div class="gaohuitou">
                        <img src="../images/01-(2222)_03.gif" alt=""/>
                    </div>
                    <div class="tongxie">
                        <img src="../images/qietu08.png" alt=""/>
                    </div>
                </div>
                <div class="qinbaobie">
                    <img src="../images/01-(2888)_07.gif" alt=""/>
                    <img src="../images/qietu10.png" alt=""/>
                    <img src="../images/qietu11.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <div class="tianmaoku">
        <img src="../images/qietu12.png" alt=""/>
    </div>
    <div class="shishangbao">
        <div class="shishang-top"><img src="../images/i-shopping-icon.png" alt=""/><span><strong>时尚爆料王</strong></span>
            <a href="">更多></a>
        </div>
        <div class="shishang-bottom">
           <div>
               <div class="zuihao">
                   <div><img src="../images/fashion-logo.png" alt=""/></div>
                   <div class="zhenzixian">
                       <div>
                           <img src="../images/pcldmzzi.png" alt=""/>
                           <a href="">
                               <p>软萌针织衫</p>
                           </a>
                       </div>
                       <div>
                           <img src="../images/bkviblb.png" alt=""/>
                           <div>
                                <img src="../images/nyufvjxt.png" alt=""/>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="border">
                   <div><img src="../images/fashion-logo.png" alt=""/></div>
                   <div>
                       <div>
                           <img src="../images/kbhs.png" alt=""/>
                           <img src="../images/kbhs.png" alt=""/>
                       </div>
                       <div>
                           <img  class="lki" src="../images/xdlm.png" alt=""/>
                           <img src="../images/uvhu.png" alt=""/>
                       </div>
                   </div>
               </div>
           </div>
           <div>
               <div>
                   <div class="zuihao">
                       <div><img src="../images/fashion-logo.png" alt=""/></div>
                       <div class="zhenzixian">
                           <div>
                               <img src="../images/pcldmzzi.png" alt=""/>
                               <a href="">
                                   <p>软萌针织衫</p>
                               </a>
                           </div>
                           <div>
                               <img src="../images/bkviblb.png" alt=""/>
                               <div>
                                   <img src="../images/nyufvjxt.png" alt=""/>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="border">
                       <div><img src="../images/fashion-logo.png" alt=""/></div>
                       <div>
                           <div>
                               <img src="../images/kbhs.png" alt=""/>
                               <img src="../images/kbhs.png" alt=""/>
                           </div>
                           <div>
                               <img  class="lki" src="../images/xdlm.png" alt=""/>
                               <img src="../images/uvhu.png" alt=""/>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
    <div class="caoliu">
        <img src="../images/qietu13.png" alt=""/>
    </div>
 
</div>
 
<!--热卖单品-->
<div class="remai">
    <div class="remai-top">
        <img src="../images/fire.png" alt=""/><span><strong>热卖单品</strong></span>
    </div>
    <div class="remai-center">
        <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>
            <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>
            <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>
            <li><a href="">电脑桌</a></li>
            <li><a href="">t学男</a></li>
            <li><a href="">男T恤</a></li>
            <li><a href="">男包</a></li>
            <li><a href="">真丝裙</a></li>
        </ul>
    </div>
    <div class="remai-bottom">
        <div>
            <div>
                <div class="zhenpibao">
                    <img src="../images/qietu14.png" alt=""/>
                    <div>
                        <p>$798.00</p>
                        <p>月销2笔</p>
                        <a href="">真皮时尚</a>
                        <a href="">高档皮包</a>
                        <a href="">头层牛皮包</a>
                        <a href="">欧美时尚鳄鱼纹</a>
                        <a href="">气质女包</a>
                    </div>
                </div>
                <div class="pibao-top">
                    <div >
                        <img src="../images/qietu15.png" alt=""/>
                        <div>
                            <p>$799.00</p>
                            <p><img src="../images/qietu16.png" alt=""/>月销9笔
                            </p>
                        </div>
                    </div>
                    <div class="xiaohai">
                        <img src="../images/qietu15.png" alt=""/>
                        <div>
                            <p>$799.00</p>
                            <p><img src="../images/qietu16.png" alt=""/>月销9笔
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="zhenpibao">
                        <img src="../images/qietu14.png" alt=""/>
                        <div>
                            <p>$546.00</p>
                            <p>月销27笔</p>
                            <a href="">井口尼龙面料</a>
                            <a href="">防泼水</a>
                            <a href="">香港品牌女包</a>
                            <a href="">轻盈</a>
                        </div>
                    </div>
                    <div class="pibao-top">
                        <div>
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$149.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月销320笔
                                </p>
                            </div>
                        </div>
                        <div class="xiaohai">
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$728.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月销58笔
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div class="zhenpibao">
                        <img src="../images/qietu14.png" alt=""/>
                        <div>
                            <p>$198.00</p>
                            <p>月销446笔</p>
                            <a href="">优质橡胶材料制作的大时尚的</a>
                            <a href="">行走的时候解压力很好</a>
                        </div>
                    </div>
                    <div class="pibao-top">
                        <div>
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$128.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月销202笔
                                </p>
                            </div>
                        </div>
                        <div class="xiaohai">
                            <img src="../images/qietu15.png" alt=""/>
                            <div>
                                <p>$19.00</p>
                                <p><img src="../images/qietu16.png" alt=""/>月销9206笔
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="remai-last">
        <img src="../images/add-two.png" alt=""/>
        <img src="../images/add-three.png" alt=""/>
        <img src="../images/ad-one.png" alt=""/>
    </div>
</div>
</div>
<!--消费者保障-->
<div class="xiaofeizhe">
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>消费者保障</span>
        <p>
            <a href="">保障范围</a>
            <a href="">退货款流程</a>
            <a href="">服务中心</a>
            <a href="">更多特色服务</a>
        </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>新手上路</span>
       <p>
            <a href="">新手专区</a>
            <a href="">消费警示</a>
            <a href="">交易安全</a>
            <a href="">24小时在线帮助</a>
            <a href="">免费开店</a>
       </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>付款方式</span>
        <p>
            <a href="">快捷支付</a>
            <a href="">信用卡</a>
            <a href="">余额宝</a>
            <a href="">蚂蚁花呗</a>
            <a href="">货到付款</a>
        </p>
    </div>
    <div>
        <img src="../images/about-icon1.png" alt=""/>&nbsp<span>淘宝特色</span>
        <p>
            <a href="">手机淘宝</a>
            <a href="">旺旺/旺信</a>
            <a href="">大众评审</a>
        </p>
    </div>
</div>
<!--页脚-->
<div class="green">
    <a href="">
    <p>我常逛的</p>
    </a>
    <a href="">
        <p>时尚</p>
    </a>
    <a href="">
        <p>品质</p>
    </a>
    <a href="">
        <p>特色</p>
    </a>
    <a href="">
        <p>实惠</p>
    </a>
    <a href="">
        <p>猜你喜欢</p>
    </a>
    <a href="">
        <p>反馈</p>
    </a>
    <a href="">
    <p>恐怖举报</p>
    </a>
</div>
<footer>
    <div>
        <ul class="zuihou">
            <li>阿里巴巴集团</li>
            <li>淘宝网</li>
            <li>天猫</li>
            <li>聚划算</li>
            <li>全球速卖通</li>
            <li>阿里巴巴国际交易市场</li>
            <li>1688</li>
            <li>阿里妈妈</li>
            <li>飞猪</li>
            <li>阿里云计算</li>
            <li>yunOs</li>
            <li>阿里通信</li>
            <li>一淘</li>
            <li>万网</li>
            <li>高德</li>
            <li>US</li>
            <li>友盟</li>
            <li>虾米</li>
            <li>阿里星球</li>
            <li>钉钉</li>
            <li>支付宝</li>
            <li>优酷</li>
            <li>土豆</li>
            <li>阿里健康</li>
            <li>阿里影业</li>
            <li>阿里体育</li>
            <li>网商银行</li>
        </ul>
    </div>
    <div>
        <div>
            <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>
            <a href="">知识产权</a>
            <span class="foter">@2003-2017 Taobao.com 版权所有</span>
        </div>
        <div class="zhean">
            <span>网络文化经营许可证: 浙网文[2013]0268-027</span>
            <span>正直电信业务经营许可证： 浙B2-20080224</span>
            <span>信息网络传播视听节目许可证：1109364号</span>
            <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc。com</span>
            <p>浙江网安备 33010002000078</p>
        </div>
    </div>
    <img src="../images/footer-img.png" alt=""/>
</footer>
</body>
</html>
 
以下是css样式表

/*导航栏*/
body{
    background-color: #f1f1f1;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
header{
    width: 100%;
    height: 36px;
    margin: 0 auto;
    background-color: #f5f5f5;
}
header a{
    font-size: 14px;
    padding-right: 16px;
}
header>nav>span:first-child>a:first-child{
    color: red;
}
header>nav{
    width: 1190px;
    height: 36px;
    margin: 0 auto;
    /*overflow: hidden;*/
}
header>nav>span{
    margin-right:20px ;
    font-size: 16px;
    line-height: 36px;
}
header>nav>span:first-child{
    float: left;
}
header>nav>span:first-child>a:not(:first-child){
    color: black;
}
header>nav>span:last-child{
    float: right;
}
header>nav>span:last-child>a{
    color: black;
    padding-left: 16px;
}
header>nav>span:last-child>a:hover{
    color: red;
}
header>nav>span:last-child>a:nth-child(5){
    border-left: 1px solid gainsboro;
}
header img{
    padding-right: 10px;
}
ol{
    width: 46px; ;
    padding: 0 ;
    display: none;
    left: 16px;
    text-align: center;
    background-color: red;
}
ol>li{
    border: 1px solid white;
    color: white;
}
nav>span:last-child>a:first-child:hover ol{
    display: block;
    position: absolute;
    z-index: 2;
}
header>nav>span:last-child>a:first-child{
    position: relative;
}
 ol>li{
    width: 46px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    transition: all 1s;
    transform: rotateY(180deg);
}
 
nav>span:last-child>a:first-child:hover li{
    transform: none;
}
nav>span:last-child>a:first-child:hover:hover>li:first-child{
    transition-delay: 300ms;
}
nav>span:last-child>a:first-child:hover:hover>li:nth-child(2){
    transition-delay: 600ms;
}
nav>span:last-child>a:first-child:hover:hover>li:nth-child(3){
    transition-delay: 900ms;
}
/*淘宝网*/
.taobaowang{
    width: 100%;
    height: 193px;
    background-color: #ffffff;
}
.taobaowang-top{
    width: 1190px;
    height: 128px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 28px;
}
.taobaowang-top>img{
    width: 190px;
    height: 100px;
    float: left;
    margin-right: 70px;
    overflow: hidden;
}
.baobei>a{
    color: red;
    font-size: 14px;
    width: 50px;
    height: 28px;
    line-height: 28px;
    margin: 0 auto;
    padding: 7px 8px;
    margin-right: 0;
}
.baobei>a:hover{
    background-color: #ff5502;
    color: white;
}
.shuru{
    width: 622px;
    height: 38px;
    border: 1px solid orangered;
    margin-left:270px ;
}
form>input{
    width:498px ;
    height:28px;
    border: 1px solid orangered;
    padding-left: 34px;
    color: gray;
    padding-top: 8px;
}
form>button{
    font-size:20px ;
    height: 39px;
    width: 88px;
    background-color: #ff5502;
    color: white;
    border: 1px solid orangered;
    position: relative;
}
.gaoji{
    height:42px ;
    width: 38px;
    margin: 0 auto;
    position: absolute;
    margin-left:10px;
}
.gaoji:hover{
    color: orangered;
}
.xinkuan>a{
    color: gray;
    margin-right:6px ;
    font-size: 12px;
    margin-top:8px ;
}
.xinkuan>a:hover{
    color: #ff5502;
}
.xinkuan>a:last-child{
    margin-left: 30px;
}
.taobaowang-bottom{
    width: 1190px;
    height: 36px;
    margin: 0 auto;
 
}
.taobaowang-bottom>div:first-child{
    width: 190px;
    height: 36px;
    overflow: hidden;
    float: left;
 
}
.taobaowang-bottom>div:first-child>p{
    color: white;
    background-color: orangered;
    font-size: 18px;
    line-height: 36px;
    padding-left: 6px;
    width: 190px;
    float: left;
}
.taobaowang-bottom>div:first-child>p>strong{
    margin-right: 80px;
}
.taobaowang-bottom>div:last-child>a{
    color: black;
    font-size: 16px;
    margin-left: 20px;
    font-weight: 700;
    line-height: 36px;
}
.taobaowang-bottom>div:last-child>a:nth-child(3){
    border-right: 1px solid gainsboro;
    padding-right: 16px;
}
 
.tese{
    border-right: 1px solid gainsboro;
    padding-right: 16px;
}
.taobaowang-bottom>div:last-child>a:nth-child(-n+3){
    color: #ff5502;
}
/*主题市场*/
.zhuti{
    width: 100%;
    height: 700px;
    margin: 0 auto;
    background-color: #f1f1f1;
    overflow: hidden;
}
.nvzhuang{
    width: 190px;
    height:520px ;
    background-color: #ff5502;
    float: left;
}
.tiammao img{
    margin-right: 10px;
}
.jinri>div>a>p{
    margin-left: 12px;
}
.zhongjian{
    width: 1190px;
    height: 620px;
    margin: 0 auto;
}
.nvzhuang span{
    color: white;
    font-size: 12px;
    font-weight: 800;
    margin:10px 0px ;
}
.nvzhuang>ul>li>span:first-child{
    margin-left: 8px;
}
.nvzhuang>ul>li{
    margin-bottom: 9px;
}
.tianmao{
    width: 701px;
    height: 513px;
    margin: auto;
    background-color: white;
    margin-right: 282px;
}
.tianmao>div:nth-child(3)>span:nth-child(3){
    color: gray;
    font-size: 14px;
}
.tianmao>div:nth-child(3)>span:nth-child(2){
    color: black;
    font-size: 16px;
}
.tianmao>div:nth-child(3){
    border-bottom: 3px solid red;
    width: 520px;
}
.tianmao>div:nth-child(3)>span:nth-child(3):hover{
    color: blue;
}
.tianmao>div:nth-child(3)>span{
     text-shadow: 2px 3px 3px green;
}
.xinji>div:first-child{
    float: left;
}
.xinji>div:first-child>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:first-child>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:first-child>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:first-child>a>p:hover{
    color: red;
}
.xinji>div:nth-child(2){
    float: left;
}
.xinji>div:nth-child(2)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(2)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(2)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(2)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(2)>img{
    height: 130px;
 }
.xinji>div:nth-child(3){
    float: left;
}
.xinji>div:nth-child(3)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(3)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(3)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(3)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(3)>img{
    height: 130px;
}
.xinji>div{
    overflow: hidden;
}
 
.xinji>div:nth-child(4){
    float: left;
}
.xinji>div:nth-child(4)>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(4)>p:nth-child(2){
    color: black;
    font-size: 16px;
    font-weight: 700;
    margin: 6px 9px;
}
.xinji>div:nth-child(4)>a>p{
    color: gainsboro;
    font-size: 14px;
    margin-left: 9px;
}
.xinji>div:nth-child(4)>a>p:hover{
    color: red;
}
.xinji>div:nth-child(4)>img{
    height: 130px;
    padding-right: 0;
}
.jinri{
    float: left;
}
.zhuti-left{
    overflow: hidden;
}
.yanyuan{
    width:152px ;
    margin-left: 12px;
}
.shudaizi{
    margin-top: 18px;
    height:88px;
    width: 908px;
    background-color: white;
}
.shudaizi>div:first-child>img{
    float: left;
    width: 68px;
}
.shudaizi>div:first-child>div>p:first-child{
    color: brown;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:first-child>div>p:nth-child(2){
    font-size: 14px;
    color: burlywood;
}
.shudaizi>div:first-child>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:first-child>div{
    float: left;
}
.shudaizi>div:nth-child(2)>img{
    float: left;
    width: 70px;
}
.shudaizi>div:nth-child(2)>div>p:first-child{
    color: darkgreen;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(2)>div>p:nth-child(2){
    font-size: 14px;
    color: green;
}
.shudaizi>div:nth-child(2)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(2)>div{
    float: left;
}
.shudaizi>div:nth-child(3)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(3)>div>p:first-child{
    color: #73a6f6;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(3)>div>p:nth-child(2){
    font-size: 14px;
    color: #96b0f6;
}
.shudaizi>div:nth-child(3)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(3)>div{
    float: left;
}
.shudaizi>div:nth-child(4)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(4)>div>p:first-child{
    color: #aa7dc7;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(4)>div>p:nth-child(2){
    font-size: 14px;
    color: #8879c8;
}
.shudaizi>div:nth-child(4)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(4)>div{
    float: left;
}
.shudaizi>div:nth-child(5)>img{
    float: left;
    width: 71px;
}
.shudaizi>div:nth-child(5)>div>p:first-child{
    color: darkred;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
}
.shudaizi>div:nth-child(5)>div>p:nth-child(2){
    font-size: 14px;
    color: red;
}
.shudaizi>div:nth-child(5)>div>span{
    color: gainsboro;
    font-size: 12px;
    margin-left: -10px;
}
.shudaizi>div:nth-child(5)>div{
    float: left;
}
.zhuti-right{
    width: 294px;
    height: 600px;
    float: right;
}
 
/*我常逛的*/
.guangwu{
    width: 1190px;
    height: 940px;
    margin: 0 auto;
}
.guangwu-top{
    height:50px ;
    width: 890px;
    text-align: center;
}
.guangwu-top>a{
    float: right;
    line-height: 30px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    background-color: white;
    margin-top: 10px;
    border-radius: 20px;
    color: black;
}
.guangwu-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 20px;
}
.guangwu-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.guangwu-bottom>div{
    background-color: #ff3286;
    width: 100px;
    height: 264px;
}
.guangwu-bottom>div>ul>li>p>strong{
    font-size: 16px;
    color: white;
}
.guangwu-bottom>div>ul>li>a{
    font-size: 14px;
    color: white;
    background-color: #ff5b9f;
    padding: 0 6px;
}
.guangwu-bottom>div>ul>li:not(:first-child){
    margin-top: 2px;
 
}
.guangwu-bottom>div>ul>li{
    margin-left: 10px;
}
.guangwu-bottom>div>ul>li:first-child{
    padding-top: 8px;
}
.guangwu-bottom>div>ul>li>a:hover{
    color: blue;
}
.guangwu-bottom{
    float: left;
}
.guangwu-bottom-tupian{
    width: 334px;
    height: 360px;
    border: 2px solid #ffc0d9;
    background-color: white;
    float: left;
    margin-right: 12px;
}
.baosui{
    float: left;
    border-right: 1px solid gainsboro;
 
}
.baosui>div>img{
    height: 99px;
    width: 92px;
}
.gaohuitou{
    float: left;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.tongxie{
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.qinbaobie>img:first-child{
    float: left;
    padding: 7px;
    border-right: 1px solid gainsboro;
}
.qinbaobie>img:nth-child(2){
    border-bottom: 1px solid gainsboro;
}
 
.guangwu-bottom1>div{
    background-color: #6349b3;
    width: 100px;
    height: 264px;
}
.guangwu-bottom1>div>ul>li>p>strong{
    font-size: 16px;
    color: white;
}
.guangwu-bottom1>div>ul>li>a{
    font-size: 14px;
    color: white;
    background-color: #826ec2;
    padding: 0 6px;
}
.guangwu-bottom1>div>ul>li:not(:first-child){
    margin-top: 2px;
}
.guangwu-bottom1>div>ul>li{
    margin-left: 10px;
}
.guangwu-bottom1>div>ul>li:first-child{
    padding-top: 8px;
}
.guangwu-bottom1>div>ul>li>a:hover{
    color: green;
}
.guangwu-bottom1{
    float: left;
}
.guangwu-bottom1-tupian{
    width: 334px;
    height: 360px;
    border: 2px solid #cfc7e7;
    background-color: white;
    float: left;
}
.baosui{
    float: left;
    border-right: 1px solid gainsboro;
}
.baosui>div>img{
    height: 99px;
    width: 92px;
}
.gaohuitou{
    float: left;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.tongxie{
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.qinbaobie>img:first-child{
    float: left;
    padding: 7px;
    border-right: 1px solid gainsboro;
}
.qinbaobie>img:nth-child(2){
    border-bottom: 1px solid gainsboro;
}
.tianmaoku{
    width: 880px;
    margin: 0 auto;
    height: 100px;
    float: left;
}
.zuizuobian{
    float: left;
}
.tianmaoku>img{
    margin: 26px 0px;
}
.guangwu-bottom{
    border-bottom: 1px solid darkred;
    padding-bottom: 10px;
}
.guangwu-bottom-tupian{
    border-bottom: 1px solid red;
    margin-bottom: 10px;
}
 
.zuihao{
    float: left;
}
.lki{
    width: 110px;
 
}
.zuiyoubian{
    width: 290px;
    height: 928px;
    margin: 0 auto;
    float: right;
    background-color: white;
}
.shishangbao{
    width:890px ;
    height:300px ;
    margin: 0 auto;
    /*float: left;*/
}
.shishang-bottom{
    background-color: white;
    height: 254px;
    width: 902px;
}
.border>div:nth-child(2)>div>img{
border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
height: 107px;
}
.border>div:first-child>img{
    border-bottom: 1px solid gainsboro;
}
.border{
    float: left;
}
.shishang-top{
    height:50px ;
    width: 890px;
    text-align: center;
    overflow: hidden;
}
.shishang-top>a{
    float: right;
    line-height: 30px;
    width: 80px;
    height: 30px;
    font-size: 16px;
    background-color: white;
    margin-top: 10px;
    border-radius: 20px;
    color: black;
}
.shishang-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 20px;
}
.shishang-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.zhenzixian>div:first-child{
    float: left;
    margin-right: 10px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
    padding-left: 10px;
}
.zhenzixian>div:last-child>img{
    border-bottom: 1px solid gainsboro;
    padding-bottom: 6px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
}
.zhenzixian>div:last-child>div>img{
    padding-top: 6px;
    border-right: 1px solid gainsboro;
    padding-right: 6px;
}
.zhenzixian>div>a>p{
    color: white;
    background-color: #ff0256;
    width:90px ;
    height: 40px;
    text-align: center;
}
 
.zhenzixian>div>a>p:hover{
    color: purple;
}
.zhenzixian>div:last-child{
    float: left;
}
.shishangbao{
    float: left;
}
.caoliu>img{
    margin-top: 32px;
}
 
/*热卖单品*/
.remai{
    height:650px ;
    width: 1190px;
    margin: 0 auto;
    background-color: white;
}
.remai-top{
    height:50px ;
    width: 1190px;
    text-align: center;
 
}
.remai-top>span>strong{
    line-height: 50px;
    color: black;
    font-size: 16px;
}
.remai-top>span>strong:hover{
    color: red;
    text-shadow: 2px 3px 5px blue;
}
.remai-center{
    width: 1190px;
    height: 36px;
    margin: 0 auto;
 
}
.remai-bottom{
    border-top: 1px solid gainsboro;
    padding-top: 8px;
    padding-left: 20px;
}
.remai-center>ul>li{
    float: left;
    color: black;
    font-size: 12px;
    border-right: 1px solid gainsboro;
    padding: 0 9px
 
}
.remai-center>ul>li:first-child{
    padding-left: 20px;
}
.remai-center>ul>li>a:hover{
    color: red;
}
.zhenpibao{
    float: left;
    width: 224px;
    height: 400px;
    border-right: 1px solid gainsboro;
}
.zhenpibao>div>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
}
.zhenpibao>div>a{
    color: black;
    font-size: 12px;
    margin-right: 5px;
    margin-top: 8px;
}
.pibao-top>div>div>p:first-child{
    color: red;
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
}
.pibao-top>div>div>p:last-child:hover{
    color: blue;
}
.zhenpibao>img{
    border-left: 1px solid gainsboro;
}
.pibao-top{
    float: left;
    padding-left: 10px;
}
.xiaohai{
    border-top: 1px solid gainsboro;
    padding-top: 8px;
}
.remai-last>img{
    border-top: 1px solid gainsboro;
    padding-top: 10px;
}
.remai-bottom a:hover{
    color: purple;
}
/*消费者保障*/
.xiaofeizhe{
    height: 223px;
    width: 1190px;
    margin: 0px auto;
    background-color: #f1f1f1;
    margin-top: 10px;
}
.xiaofeizhe>div:first-child{
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:first-child>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:first-child>img{
    margin-bottom: 10px;
}
.xiaofeizhe>div:nth-child(2){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(2)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(2)>img{
    margin-bottom: 10px;
}
 
.xiaofeizhe>div:nth-child(3){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(3)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(3)>img{
    margin-bottom: 10px;
}
 
.xiaofeizhe>div:nth-child(4){
    width:230px ;
    height: 86px;
    padding: 70px 26px ;
    float: left;
}
.xiaofeizhe>div:nth-child(4)>p>a{
    color: #d2d0d0;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
}
.xiaofeizhe>div:nth-child(4)>img{
    margin-bottom: 10px;
}
/*页脚*/
footer{
    width: 100%;
    height: 246px;
    margin: 0 auto;
    background-color: #ffffff;
}
footer>div:first-child{
    width: 1190px;
    height: 68px;
    margin: 0 auto;
    border-bottom: 1px solid gainsboro;
}
.zuihou>li{
    float: left;
    font-size: 14px;
    margin:10px 20px 0px 0;
    padding-right: 10px;
    color: gray;
}
.zuihou>li:hover{
    color: red;
}
.zuihou>li:not(:last-child){
    border-right: 1px solid gainsboro;
}
footer>div:nth-child(2){
    width: 1190px;
    height: 86px;
    margin: 0 auto;
}
footer a,span,p{
    color: gray;
    font-size: 14px;
    margin-right: 10px;
}
footer a:hover{
    color: blue;
}
.foter{
    border-left: 1px solid gainsboro;
    padding-left: 40px;
}
.zhean>span{
    border-right: 1px solid gainsboro;
    padding-right: 5px;
}
.zhean>span:nth-child(3){
    color: gainsboro;
}
.zhean>p{
    color: gainsboro;
}
footer>img{
    width: 1190px;
    margin: 12px auto;
    padding-left: 88px;
    background-color: white;
}
/*.green p{*/
    /*height: 400px;*/
    /*width: 50px;*/
    /*position: fixed;*/
    /*right: 15px;*/
    /*bottom: 80px;*/
    /*text-align: center;*/
    /*color: goldenrod;*/
/*}*/
.green{
    height: 400px;
    width: 50px;
    position: fixed;
    right: 15px;
    bottom: 100px;
    text-align: center;
}
.green>a:first-child>p{
    background-color: #ff4302;
    color: white;
    font-size: 14px;
}
.green>a:nth-child(2)>p{
    background-color: white;
    color: red;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(3)>p{
    background-color: white;
    color: blue;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(4)>p{
    background-color: white;
    color: green;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(5)>p{
    background-color: white;
    color: brown;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(6)>p{
    background-color: white;
    color: red;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(7)>p{
    background-color: white;
    color: black;
    border-bottom: 1px solid gainsboro;
    padding: 15px 5px;
}
.green>a:nth-child(8)>p{
    background-color: white;
    color: black;
    padding: 15px 5px;
}

用HTML编写淘宝页面的更多相关文章

selenium+python自动化84-chrome手机wap模式（登录淘宝页面）
前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸我的环境 chrome 62 chromedriver 2. ...
使用CURL抓取淘宝页面
/** * 根据地址抓取淘宝页面html代码 * @param type $url 地址 * @return boolean */ public function getTaoBaoHtml($url ...
ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能
如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...
vue实现仿淘宝结账页面
这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图: ...
阿里淘宝的S1级别bug，到底是谁的锅？
3月25日,阿里的淘宝APP在IOS系统上出现BUG: 在打开淘宝APP以后,用户就会收到系统弹窗通知:“您使用的程序是测试/内测版本,将于当地时间2020-03-28到期,到期后将无法使用,请尽快下 ...
PYTHON 爬虫笔记十:利用selenium+PyQuery实现淘宝美食数据搜集并保存至MongeDB（实战项目三）
利用selenium+PyQuery实现淘宝美食数据搜集并保存至MongeDB 目标站点分析淘宝页面信息很复杂的,含有各种请求参数和加密参数,如果直接请求或者分析Ajax请求的话会很繁琐.所以我们可 ...
3.使用Selenium模拟浏览器抓取淘宝商品美食信息
# 使用selenium+phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏览器翻页,并 ...
js 实现淘宝放大镜功能，可更改配置参数带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果基本功能: 运 ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

随机推荐

0ctf2018 pwn
前言对 0ctf2018 的 pwn 做一个总结正文 babystack 漏洞非常直接的栈溢出 ssize_t sub_804843B() { char buf; // [esp+0h] [e ...
Android内核漏洞利用技术实战：环境搭建&栈溢出实战
前言 Android的内核采用的是 Linux 内核,所以在Android内核中进行漏洞利用其实和在一般的 x86平台下的 linux 内核中进行利用差不多.主要区别在于 Android 下使用的是 ...
润乾报表新功能–导出excel支持锁定表头
在以往的报表设计中,锁定表头是会经常被用到的一个功能,这个功能不仅能使浏览的页面更加直观,信息对应的更加准确,而且也提高了报表的美观程度.但是,很多客户在将这样的报表导出excel时发现exce ...
Android CheckBox大小调整
关键是: android:scaleX="0.5" <CheckBox android:id="@+id/checkBox1" android:layou ...
探索ORM ————iBati（一）
ibatis iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Jav ...
【Oracle】PL/SQL Developer使用技巧（持续更新中）
1.关键字自动大写在sql命令窗口中输入SQL语句时,想要关键字自动大写,引人注目该怎么办呢? 一步设置就可以达成了.点击Tools->Preference->Editor,看到截图中这 ...
java多线程读取、操作List集合
import java.util.ArrayList; import java.util.List; import org.apache.commons.lang3.ArrayUtils; pub ...
System.Web.Optimization对脚本和样式表的操作
这个也是本章重点向描述的部分,首先我们可以使用VS2012RC来新建一个MVC4.0项目,版本可以为4.0或4.5.在Global.asax文件代码中,我们发现已经把过滤器,路由器,以及对样式表和脚本 ...
转：eclipse的快捷键
22 21 Eclipse中10个最有用的快捷键组合一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到 ...
Coursera-AndrewNg(吴恩达)机器学习笔记——第二周编程作业（线性回归）
一.准备工作从网站上将编程作业要求下载解压后,在Octave中使用cd命令将搜索目录移动到编程作业所在目录,然后使用ls命令检查是否移动正确.如: 提交作业:提交时候需要使用自己的登录邮箱和提交令牌 ...

用HTML编写淘宝页面

用HTML编写淘宝页面的更多相关文章

随机推荐

热门专题