大家好，我是梅巴哥er。本篇是我写的一个练习，淘宝首页。用html, css, js写的。交互功能只写了一部分，仅供学习参考。如想下载源码，请移步/guozi007a/taobao-homepage.git我传到github上了。在这个页面点Code选项，下载压缩包即可。
老规矩：直接上货，先看效果图~~
上传的图片有大小要求。
内容目录：
hmtl代码css代码js代码用到的font字体图标
说明：
js代码都有详细注释。不做赘述了~~
html代码：
<!DOCTYPE html><html><head><title>淘宝网-淘！我喜欢</title><meta charset="utf-8" /><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="myfont/myfont.css" /><link rel="stylesheet" href="css/change_font.css" /></head><body><!--隐藏的导航栏nav--><div id="nav"><div id="navcont"><div id="tbwang"><h1><a href="/" title="淘宝网">淘宝网</a></h1></div><div id="serchnav"><div id="left_bb"><div id="lbb"></div><div id="rbb"></div><!-- ul --><ul id="serchnav_ul"><li>宝贝</li><li>天猫 <span id="redline"></span></li><li>店铺</li></ul></div><div id="ser_ab"><input type="text" autofocus="autofocus" /><div class="gap"></div></div><button>搜索</button><!-- 绝对定位的内容 --><!-- 向下图标 --><div id="down"><span id="down1" class="iconfont icon-xia"></span></div><!-- 搜索font --><i class="iconfont icon-sousuo"></i><!-- 相机font --><a href="script:;"><em class="iconfont icon-zhaoxiangji"></em></a></div></div></div><!--头部：中国大陆版块--><div id="chdalu"><div id="head_wrap1"><!--左边模块--><div id="left_chdalu"><ul><li id="cdl_li01"><a href=""><span id="area_change">中国大陆</span><span class="iconfont icon-xia change"></span></a><!--地区列表--><div id="areasBox"><ul id="areas"><li>全球</li><li>中国大陆</li><li>中国香港</li><li>中国澳门</li><li>中国台湾</li><li>韩国</li><li>马来西亚</li><li>澳大利亚</li><li>新加坡</li><li>新西兰</li><li>加拿大</li><li>美国</li><li>日本</li><li>法国</li><li>德国</li><li>瑞士</li></ul></div></li><li><a href="">亲，请登录</a></li><li><a href="">免费注册</a></li><li><a href="">手机逛淘宝</a></li></ul></div><!--右边模块--><div id="rig_chdalu"><li id="rig_chdalu_li01"><a href=""><span id="mytb">我的淘宝</span> <span class="iconfont icon-xia change1"></span></a><div id="mytbBox"><ul id="mytbbox_ul01"><li>已买到的宝贝</li><li>我的足迹</li></ul></div></li><li><a href=""><span class="iconfont icon-gouwuche1 change2"></span>购物车</a></li><li><a href=""><span class="iconfont icon-start change4"></span>收藏夹<span class="iconfont icon-xia change3"></span></a></li><li><a href="">商品分类</a></li><li id="shuxian">|</li><li><a href="">千牛卖家中心</a></li><li><a href="">联系客服</a></li><li><a href=""><span class="iconfont icon-daohang change8"></span> 网站导航</a></li></div></div></div><!--淘小铺版块--><div id="xiaopu"><a href=""><img src="upload/taoxiaopu.png" width="1190px" alt="淘小铺" /></a></div><!--淘宝搜索栏版块--><div id="tbcom"><div id="tbcom_wrap"><!--淘宝logo--><div id="tblogo"><h1><a href="/?spm=a21bo..57.1.5af911d9SiQ4jf"></a></h1></div><!--宝贝 天猫 店铺 搜索栏--><div id="search_box"><div id="words"><ul id="words_ul01"><li id="words_bb">宝贝</li><li id="words_tm">天猫</li><li id="words_dp">店铺</li></ul></div><!--左边的搜索栏 右边的按钮--><div id="searchbar"><div id="left_searchbar"><input id="inp" type="text" placeholder="p40手机壳" autofocus="autofocus" /><i class="iconfont icon-sousuo change6"></i><div id="rleft_searchbar"><a class="a1" href=""><span class="iconfont icon-zhaoxiangji change5"></span></a></div></div><button>搜索</button></div><!--新款连衣裙...沙发--><div id="a"><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><a href="">沙发</a></div></div><!--手机淘宝--><div id="phonetb"><a href=""><span>手机淘宝</span><img src="upload/phonetb.png" alt="手机淘宝下载" /></a><!--小×号--><div id="x">×</div></div></div></div><!--引入版心版块--><div class="typearea"><!--主题市场版块--><div id="mkt"><!--市场模块的左边版块 商品列表--><div id="left_mkt"><!--左边版块的上部--><div id="top_left_mkt">主题市场</div><!--左边版块的下部--><div id="btm_left_mkt"><ul><li><a href="">女装</a>/<a href="">男装</a>/<a href="">内衣</a><span>></span></li><li><a href="">鞋靴</a>/<a href="">箱包</a>/<a href="">配件</a><span>></span></li><li><a href="">童装玩具</a>/<a href="">孕产</a>/<a href="">用品</a><span>></span></li><li><a href="">家电</a>/<a href="">数码</a>/<a href="">手机</a><span>></span></li><li><a href="">美妆</a>/<a href="">洗护</a>/<a href="">保健品</a><span>></span></li><li><a href="">珠宝</a>/<a href="">眼镜</a>/<a href="">手表</a><span>></span></li><li><a href="">运动</a>/<a href="">户外</a>/<a href="">乐器</a><span>></span></li><li><a href="">游戏</a>/<a href="">动漫</a>/<a href="">影视</a><span>></span></li><li><a href="">美食</a>/<a href="">生鲜</a>/<a href="">零食</a><span>></span></li><li><a href="">鲜花</a>/<a href="">宠物</a>/<a href="">农资</a><span>></span></li><li><a href="">面料集采</a>/<a href="">装修</a>/<a href="">建材</a><span>></span></li><li><a href="">家具</a>/<a href="">家饰</a>/<a href="">家纺</a><span>></span></li><li><a href="">汽车</a>/<a href="">二手车</a>/<a href="">用品</a><span>></span></li><li><a href="">办公</a>/<a href="">DIY</a>/<a href="">五金电子</a><span>></span></li><li><a href="">百货</a>/<a href="">餐厨</a>/<a href="">家庭保健</a><span>></span></li><li><a href="">学习</a>/<a href="">卡券</a>/<a href="">本地服务</a><span>></span></li></ul></div></div><!--主题市场 右边模块--><div id="rig_mkt"><!--右边模块的头部长条--><div id="head_rig_mkt"><ul id ="left_head_rig_mkt"><li><a href="">天猫</a></li><li><a href="">聚划算</a></li><li><a href="">天猫超市</a></li></ul><ul id ="rig_head_rig_mkt"><li><span>|</span></li><li><a href="">淘抢购</a></li><li><a href="">电器城</a></li><li><a href="">司法拍卖</a></li><li><a href="">兴农脱贫</a></li><li><span>|</span></li><li><a href="">飞猪旅行</a></li><li><a href="">智能生活</a></li><li><a href="">苏宁易购</a></li></ul></div><!--右边模块的body--><div id="body_rig_mkt"><!--两个焦点图 focus --><div id="focus_brm"><!--焦点图1 focus1 --><div id="focus1_brm"><ul id="ul01"><li><a href=""><img src="upload/focus1_01.jpg" width="520px" /></a></li><li><a href=""><img src="upload/focus1_02.webp.jpg" width="520px" /></a></li><li><a href=""><img src="upload/focus1_03.webp.jpg" width="520px" /></a></li></ul><div id="leftbtn"></div><div id="rigbtn"></div><div id="cir_dot"><ul id="ul02"></ul></div></div><!--焦点图2 focus2--><div id="focus2_brm"><div id="up_focus2_brm"><span>理想生活上天猫</span><i>1/6</i></div><div id="btm_focus2_brm"><a href=""><img src="upload/focus2_0101.jpg" /></a><a href=""><img src="upload/focus2_0102.jpg" /></a></div></div></div><!--卖 mai--><div id="mai_brm"><!--特卖 temai--><div id="temai_brm"><a href=""><img src="upload/temai.webp.jpg" width="160px" alt="特卖" /></a></div><div class="daymai">今日热卖</div><!--热卖 remai--><div id="remai_brm"><a href=""><img src="upload/remai.jpg" height="202px" alt="热卖" /></a></div></div><!--右边body rig_brm--><div id="rig_brm"><div id="rig_brm1"><div id="toux_rig_brm1"><div id="yuan_toux_rig_brm1"><a href=""><img src="upload/toux.jpg" /></a></div></div><div id="nihao_rig_brm1">Hi! 你好</div><div id="club_rig_brm1"><a href="">领淘金币抵钱</a><a href="">会员俱乐部</a></div><div id="denglu_rig_brm1"><button>登录</button><button>注册</button><button>开店</button></div></div><a href id="rig_brm2"><span>网上有害信息举报专区</span><div></div> </a><div id="rig_brm3"><!--头部head 公告 规则 论坛 ...--><div id="rig_brm3_head"><ul id="rig_brm3_head_ul01"><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 id="rig_brm3_body"><ul id="rbb3_ul01"><li><a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a></li><li><a href="">淘宝造物节之城市秘密</a></li><li><a href="">聚划算88红包省钱卡</a></li></ul><ul id="rbb3_ul02"><li><a href="">新增《淘宝网汽配行业</a></li><li><a href="">《淘宝网区域零售服务</a></li><li><a href="">《淘宝网票务行业管理</a></li><li><a href="">《淘宝网数字娱乐市场</a></li></ul><ul id="rbb3_ul03"><li><a href="">淘宝1212大促招商</a></li><li><a href="">在线职业培训招商</a></li><li><a href="">金秋超值购招商</a></li><li><a href="">运营神器年中大促</a></li></ul><ul id="rbb3_ul04"><li><a href="">魔豆妈妈公益项目</a></li><li><a href="">让母爱永不打烊！</a></li><li><a href="">卖家注意：风险通报！</a></li><li><a href="">售假获刑又起诉！</a></li></ul><ul id="rbb3_ul05"><li><a href="">淘宝公益平台正式更名</a></li><li><a href="">益起来商家招募即将截</a></li><li><a href="">卖家如何设置公益宝贝</a></li><li><a href="">公益机构开店全攻略</a></li></ul></div></div><!--充话费 旅行 车险 游戏...彩票 理财--><div id="rig_brm4"><ul id="rig_brm4_ul"><li><a href=""><span class="iconfont icon-chonghuafei"><span><p>充话费</p></a><div id="rig_brm4_box1"><div id="rig_brm4_box1cont"><div id="rb4b1c_01"><a href="script:;">充话费</a><a href="script:;">充流量</a><a href="script:;">充固话</a><a href="script:;">充宽带</a></div><div id="scrollBox11"><div id="rb4b1c_02"><input type="text" name="pnhonenum" placeholder="请输入手机号" autocomplete="on" /><div id="autoc"></div><span class="iconfont icon-chonghuafei"><span></div><div id="rb4b1c_03"><input type="text" name="tablelist" value="50元" title="50元" readonly="readonly" /><!--readonly表示这个输入框是只读属性 即用户不能选中 不能更改value内容 不能输入--><span class="iconfont icon-xia"></span></div><div id="rb4b1c_04"><i>售价</i><i>¥</i><i>49-49.8</i></div><button id="rb4b1c_btn">立即充值</button></div></div><em id="x2">×</em></div></li><li><a href=""><span class="iconfont icon-feizhu"><span><p>旅行</p></a><div id="rig_brm4_box2"><div id="rig_brm4_box1cont"><div id="rb4b1c_02"><a href="script:;">国内机票</a><a href="script:;">国际机票</a><a href="script:;">酒店客栈</a><a href="script:;">度假门票</a><a href="script:;">火车票</a></div><div id="scrollBox21"><form id="form1"><input type="radio" name="travel" checked="checked" id="单" /><label for="单">单程</label><input type="radio" name="travel" id="双" /><label for="双">往返</label><span>中国港澳台请选择国际机票</span></form><div id="fromTo1"><div id="left_fromTo1"><div id="left1_fromTo1"><div id="left11_fromTo1"><label for="go1">出发</label></div><input type="text" placeholder="城市" id="go1" name="f_city" /><span class="iconfont icon-weizhi" id="location"></span></div><div id="left2_fromTo1"><div id="left11_fromTo1"><label for="go2">出发</label></div><input type="text" placeholder="日期" id="go2" name="f_city" /><span class="iconfont icon-rili-y" id="location"></span></div></div><span class="iconfont icon-youjiantou" id="mid_jt"></span><!--<div id="rig_fromTo1"></div>--><div id="left_fromTo1"><div id="left1_fromTo1"><div id="left11_fromTo1"><label for="go1">到达</label></div><input type="text" placeholder="城市" id="go1" name="f_city" /><span class="iconfont icon-weizhi" id="location"></span></div><div id="left2_fromTo1" class="disp"><div id="left11_fromTo1"><label for="go2">返程</label></div><input type="text" placeholder="日期" id="go2" name="f_city" /><span class="iconfont icon-rili-y" id="location"></span></div></div></div><button id="chazhao_btn">查找</button></div></div><em id="x2">×</em></div></li><li><a href=""><span class="iconfont icon--"><span><p>车险</p></a></li><li><a href=""><span class="iconfont icon-youxi"><span><p>游戏</p></a></li><li><a href=""><span class="iconfont icon-caipiao"><span><p>彩票</p></a></li><li><a href=""><span class="iconfont icon-dianying"><span><p>电影</p></a></li><li><a href=""><span class="iconfont icon-jiudian"><span><p>酒店</p></a></li><li><a href=""><span class="iconfont icon-licai-b"><span><p>理财</p></a></li></ul></div><!--阿里app 淘宝 天猫 支付宝 钉钉 淘小铺--><div id="rig_brm5"><div id="rig_brm51"><span>阿里APP</span><a href=""><span>更多</span><span class="iconfont icon-dayu"></span></a></div><div id="rig_brm52"><ul><li><a href=""><img src="upload/app01.webp" /></a><div id="saotb"><img src="upload/saotb.jpg" /><p>扫一扫淘宝</p></div></li><li><a href=""><img src="upload/app02.webp" /></a><div id="saotb"><img src="upload/saotb.jpg" /><p>扫一扫天猫</p></div></li><li><a href=""><img src="upload/app03.webp" /></a><div id="saotb"><img src="upload/saotb.jpg" /><p>扫一扫支付宝</p></div></li><li><a href=""><img src="upload/app04.webp" /></a><div id="saotb"><img src="upload/saotb.jpg" /><p>扫一扫钉钉</p></div></li><li><a href=""><img src="upload/app05.webp" /></a><div id="saotb"><img src="upload/saotb.jpg" /><p>扫一扫淘小铺</p></div></li></ul></div></div></div></div></div></div><!--有好货版块--><div id="goods"><div id="left_goods"><div id="inner_left_goods"><div id="head_ilg"><img src="upload/left_goods.png" title="有好货" /><p><i class="iconfont icon-qrcode change7"></i><span>与品质生活不期而遇</span></p></div><div id="body_ilg"><ul><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic1.webp.jpg" /></div><span>圣罗兰 口红礼盒</span></div><p>多款色号多种选择，轻松打</p><div class="sayok">8 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic2.webp.jpg" /></div><span>大豆家 方头奶奶鞋</span></div><p>一脚蹬设计，方便日常的穿</p><div class="sayok">3758 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic3.webp.jpg" /></div><span>孩子早教中，这款早教</span></div><p>不同纹理的小球，适合宝宝</p><div class="sayok">47 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic4.webp.jpg" /></div><span>佳宝路转角水槽</span></div><p>304不锈钢，表面光洁坚固</p><div class="sayok">121 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic5.webp.jpg" /></div><span>Coca-Cola 可乐瓶T恤</span></div><p>简约的纯色基调，宣扬自由</p><div class="sayok">35 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggs_pic6.webp.jpg" /></div><span>Bite 唇釉</span></div><p>简洁的深灰色包装，低调但</p><div class="sayok">13 人说好</div></a></li></ul></div></div></div><div id="rig_goods"><div id="inner_rig_goods"><div id="head_irg"><img src="upload/rig_goods.png" title="爱逛街" /><p>献给聪明可爱的你</p><a href="">更多 ></a></div><div id="body_irg"><ul><li><a href=""><div id="head_li"><div id="head_li001"><img src="upload/ggsr_pic1.webp.jpg" /></div><i>圣罗兰 口红礼盒</i></div><p>多款色号多种选择，轻松打</p><div class="sayok">8 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggsr_pic2.webp.jpg" /></div><i>大豆家 方头奶奶鞋</i></div><p>一脚蹬设计，方便日常的穿</p><div class="sayok">3758 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggsr_pic3.webp.jpg" /></div><i>孩子早教中，这款早教</i></div><p>不同纹理的小球，适合宝宝</p><div class="sayok">47 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggsr_pic4.webp.jpg" /></div><i>佳宝路转角水槽</i></div><p>304不锈钢，表面光洁坚固</p><div class="sayok">121 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggsr_pic5.webp.jpg" /></div><i>Coca-Cola 可乐瓶T恤</i></div><p>简约的纯色基调，宣扬自由</p><div class="sayok">35 人说好</div></a></li><li><a href=""><div id="head_li"><div id="head_li01"><img src="upload/ggsr_pic6.webp.jpg" /></div><i>Bite 唇釉</i></div><p>简洁的深灰色包装，低调但</p><div class="sayok">13 人说好</div></a></li></ul></div></div></div></div><!--脱发版块--><div id="hair"><a href=""><img src="upload/tuofa.jpg" /></a></div><!--每日好店模块--><div id="gshop"><div id="left_gshop"><div id="head_lg"><a href=""><img src="upload/head_lg_pic1.png" title="每日好店" /></a><p class="p1">发现深藏的好店</p><p class="p2">更多 ></p></div><div id="body_lg"><ul><li><a href=""><div id="up_blgli"><p>今日推荐-1天3波</p><p>一个月被关注了5838</p></div><div id="down_blgli"><div id="left_down_blgli"><img src="upload/left_down_blgli_01.webp.jpg" /></div><div id="rig_down_blgli"><img src="upload/rig_down_blgli_01.webp.jpg" /><img src="upload/rig_down_blgli_02.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_blgli"><p>一件老店-N个故事</p><p>一个月</p></div><div id="down_blgli"><div id="left_down_blgli"><img src="upload/left_down_blgli_02.webp.jpg" /></div><div id="rig_down_blgli"><img src="upload/rig_down_blgli_03.webp.jpg" /><img src="upload/rig_down_blgli_04.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_blgli"><p>爱鞋人</p><p>一个月被关注了24698次，一定有好东西</p></div><div id="down_blgli"><div id="left_down_blgli"><img src="upload/left_down_blgli_03.webp.jpg" /></div><div id="rig_down_blgli"><img src="upload/rig_down_blgli_05.webp.jpg" /><img src="upload/rig_down_blgli_06.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_blgli"><p>生活家-爱的杂货铺</p><p>一个月</p></div><div id="down_blgli"><div id="left_down_blgli"><img src="upload/left_down_blgli_04.webp.jpg" /></div><div id="rig_down_blgli"><img src="upload/rig_down_blgli_07.webp.jpg" /><img src="upload/rig_down_blgli_08.webp.jpg" /></div></div></a></li></ul></div></div><div id="rig_gshop"><div id="head_rg"><a href=""><img src="upload/head_rg_pic1.png" title="每日好店" /></a><p class="p1">你的爱豆直播等你哟!</p></div><div id="body_rg"><ul><li><a href=""><div id="up_brgli"><p>儒雅品茶</p><p>982观看</p></div><div id="down_brgli"><div id="left_down_brgli"><img src="upload/left_down_brgli_01.webp.jpg" /><div id="live"><div id="left_live"><span>LIVE</span></div><p>今年中秋节送礼就凤凰</p></div></div><div id="rig_down_brgli"><img src="upload/rig_down_brgli_01.webp.jpg" /><img src="upload/rig_down_brgli_02.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_brgli"><p>王慧慧whhe</p><p>1014观看</p></div><div id="down_brgli"><div id="left_down_brgli"><img src="upload/left_down_brgli_02.webp.jpg" /><div id="live"><div id="left_live"><span>LIVE</span></div><p>战狼同款两位数秒</p></div></div><div id="rig_down_brgli"><img src="upload/rig_down_brgli_03.webp.jpg" /><img src="upload/rig_down_brgli_04.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_brgli"><p>随心随意的大蓉</p><p>334观看</p></div><div id="down_brgli"><div id="left_down_brgli"><img src="upload/left_down_brgli_03.webp.jpg" /><div id="live"><div id="left_live"><span>LIVE</span></div><p>美妞们，和我一起做面</p></div></div><div id="rig_down_brgli"><img src="upload/rig_down_brgli_05.webp.jpg" /><img src="upload/rig_down_brgli_06.webp.jpg" /></div></div></a></li><li><a href=""><div id="up_brgli"><p>vivienn</p><p>650观看</p></div><div id="down_brgli"><div id="left_down_brgli"><img src="upload/left_down_brgli_04.webp.jpg" /><div id="live"><div id="left_live"><span>LIVE</span></div><p>心动穿搭上线，初秋随</p></div></div><div id="rig_down_brgli"><img src="upload/rig_down_brgli_07.webp.jpg" /><img src="upload/rig_down_brgli_08.webp.jpg" /></div></div></a></li></ul></div></div></div><!--时尚爆料王--><div id="fashion"><div id="left_fas"><div id="head_left_fas"><span></span><h4>时尚爆料王</h4></div><div id="body_left_fas"><ul><li><a href="">腔调</a><p>全球创意设计师平台</p><div id="down_blf"><a href="" id="left_dblf"><img src="upload/left_dblf01.webp.jpg" /></a><a href="" id="rig_dblf"><img src="upload/left_dblf02.webp.jpg" /></a></div></li><li><a href="">全球购</a><p>探索全球美好生活</p><div id="down_blf"><a href="" id="left_dblf"><img src="upload/left_dblf03.webp.jpg" /></a><a href="" id="rig_dblf"><img src="upload/left_dblf04.webp.jpg" /></a></div></li><li><a href="">魅力惠</a><p>奢品好物立即购</p><div id="down_blf"><a href="" id="left_dblf"><img src="upload/left_dblf05.webp.jpg" /></a><a href="" id="rig_dblf"><img src="upload/left_dblf06.webp.jpg" /></a></div></li></ul></div></div><div id="rig_fas"><a href=""><img src="upload/rig_fas.jpg" /></a></div></div><!--猜你喜欢--><div id="ulike"><div id="head_ulike"><span></span><h4>猜你喜欢</h4></div><div id="body_ulike"><ul><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li02.webp.jpg" /></div><p class="p0">鞋柜换鞋凳子收纳储物柜沙发矮凳简约现代木质门厅穿鞋凳</p></a><div id="down_inner_li"><span>188</span><!--<i>销量：13</i>--></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li03.webp.jpg" /></div><p class="p0">三门两斗鞋柜玄关门厅柜收纳柜储物橱柜类木质中式实木花梨</p></a><div id="down_inner_li"><span>3723.02</span><!--<i>销量：13</i>--></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li04.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li05.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li06.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li07.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li><li><div id="inner_li"><a href=""><div id="inner_li_box"><img src="upload/inner_li01.webp.jpg" /></div><p class="p0">春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</p></a><div id="down_inner_li"><span>178</span><i>销量：13</i></div></div><a href="" id="hidbtm_inner_li" title="发现更多相似的宝贝"><p>找相似</p><span></span><p>发现更多相似的宝贝 ></p></a></li></ul></div></div><!--底部结尾 footer--><div id="footer"><img src="upload/footer.png" /></div></div><!-- 侧边固定栏 --><div id="sidebar"><span id="sb_font1" class="iconfont icon-taobao"></span><ul id="sb_ul"><li><a href="" class="sb_ula1">爱逛好货</a><i></i></li><li><a href="" class="sb_ula2">好店直播</a><i></i></li><li><a href="" class="sb_ula3">品质特色</a><i></i></li><li><a href="" class="sb_ula4">实惠热卖</a><i></i></li><li><a href="" class="sb_ula5">猜你喜欢</a><i></i></li><li><a href="" class="sb_ula6">反馈</a><i></i></li><li><a href="" class="sb_ula7">暴恐举报</a><i></i></li></ul></div><script src="js/taobao.js"></script></body></html>
CSS代码：
#nav {position: fixed;top: 0;left: 0;width: 100%;height: 54px;background-color: #fff;z-index: 99999;display: none;}#navcont {width: 1190px;height: 100%;margin: 0 auto;}#tbwang {float: left;width: 82px;height: 36px;margin-top: 8px;}#tbwang h1 {display: block;}#tbwang h1 a {display: block;width: 82px;height: 36px;background: url(../img/tblogo.png) 0 0 no-repeat;background-size: 82px 36px;text-indent: -9999px;overflow: hidden;}#serchnav {position: relative;float: left;width: 632px;height: 36px;margin-top: 8px;margin-left: 180px;}#left_bb {float: left;width: 76px;height: 36px;}#lbb {float: left;width: 16px;height: 100%;border: 2px solid #FF5000;border-right: 0;border-radius: 18px 0 0 18px;/* background-color: #f4f4f4; */}#rbb {float: left;width: 58px;height: 100%;border-top: 2px solid #FF5000;border-bottom: 2px solid #FF5000;/* background-color: #f4f4f4; */}#ser_ab {float: left;width: 482px;height: 100%;}#ser_ab input {float: left;width: 462px;height: 100%;border-top: 2px solid #FF5000;border-bottom: 2px solid #FF5000;border-left: 0;border-right: 0;padding-left: 10px;outline: 0;}#ser_ab .gap {float: left;width: 10px;height: 100%;border-top: 2px solid #FF5000;border-bottom: 2px solid #FF5000;}#serchnav button {float: left;width: 74px;height: 40px;line-height: 40px;text-align: center;border: 0;outline: 0;border-radius: 0 20px 20px 0;background-color: #FF5600;/* 背景颜色渐变效果 */background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);color: #fff;font-size: 18px;font-weight: 700;}#serchnav_ul {position: absolute;top: 0;left: 0;width: 76px;height: 120px;border-radius: 20px 0 6px 6px;z-index: -1;/* display: none; */}#serchnav_ul li {list-style: none;width: 100%;height: 40px;line-height: 40px;text-align: center;font-size: 12px;cursor: pointer;background-color: #f4f4f4;}#serchnav_ul li #redline {display: block;width: 60px;height: 1px;border-bottom: 1px solid #FF7A00;margin: -8px auto;}#serchnav_ul li:hover {color: #FF7A00;font-weight: 700;}#serchnav_ul li:first-child {border-radius: 20px 0 0 20px;}#serchnav_ul li:nth-child(2),#serchnav_ul li:nth-child(3) {display: none;}#serchnav #down {position: absolute;top: 18px;left: 56px;width: 10px;height: 10px;/* border: 1px solid #3c3c3c; *//* line-height: 6px; */text-align: center;overflow: hidden;z-index: 1;}#serchnav #down1 {display: block;margin-top: -8px;/* margin-bottom: -6px; */margin-left: -2px;color: #9B9B9B;}#serchnav i {position: absolute;top: 8px;left: 82px;color: #9B9B9B;font-size: 22px;}#serchnav a {position: absolute;top: 0;right: 94px;display: block;width: 24px;height: 28px;padding-top: 8px;}#serchnav em {/* margin-top: 8px; */color: #9B9B9B;font-size: 24px;}#chdalu {width: 100%;height: 37px;font-size: 12px;}#xiaopu {width: 100%;height: 70px;background-color: #F92B4C;overflow: hidden;}#xiaopu a {display: block;width: 1190px;height: 100%;margin: 0 auto;}#xiaopu a img {width: 100%;height: 70px;}#tbcom {width: 100%;height: 123px;background-color: #fff;}#mkt {width: 100%;height: 550px;}#goods {margin-top: 10px;width: 100%;height: 660px;background-color: #F4F4F4;}#hair {margin: 10px 0;height: 72px;}#head_wrap1 {width: 1190px;margin: 0 auto;}#left_chdalu {position: relative;float: left;}#left_chdalu>ul li {display: inline-block;margin-right: 5px;}#left_chdalu>ul li a {display: block;height: 37px;line-height: 37px;text-align: center;color: #686868;}#left_chdalu>ul li:first-child a {color: #3c3c3c;}#left_chdalu>ul li:nth-child(2) a {color: red;}#left_chdalu>ul li:nth-child(3) a:hover {color: red;}#left_chdalu>ul li:last-child a:hover {color: red;}#areasBox {position: relative;z-index: 9999;display: none;}#areasBox #areas {position: absolute;left: 0;top: 0;background-color: #fff;max-height: 200px;overflow-y: scroll;}#areasBox #areas li {width: 242px;height: 24px;line-height: 24px;padding-left: 5px;cursor: pointer;}#areasBox #areas li:hover {background-color: #F5F5F5;}#areasBox #areas li:first-child {margin-top: 10px;}#rig_chdalu {float: right;}#rig_chdalu li {float: left;margin-right: 5px;padding: 0 4px;}#mytbBox {position: relative;z-index: 999;display: none;}#mytbbox_ul01 {position: absolute;top: 0;left: -4px;border: 1px solid #f5f5f5;border-top: 0;background-color: #fff;}#mytbbox_ul01 li{width: 80px;height: 24px;line-height: 24px;color: #3c3c3c;cursor: pointer;margin-right: 0;}#mytbbox_ul01 li:hover {background-color: #f5f5f5;}#mytbbox_ul01 li:first-child {margin-top: 10px;}#rig_chdalu li a {display: block;height: 37px;line-height: 37px;text-align: center;color: #686868;}#rig_chdalu li a:hover {color: red;}#shuxian {height: 35px;line-height: 35px;color: #DEDEE3;margin: 0 15px;}#xiaopu {text-align: center;}#tbcom_wrap {width: 1190px;height: 100%;margin: 0 auto;}#tblogo {float: left;overflow: hidden;width: 190px;height: 100%;}#tblogo h1 a {display: block;width: 142px;height: 58px;margin-top: 38px;margin-left: 24px;overflow: hidden;background: url(../img/tblogo.png) no-repeat 0 0;text-indent: -9999px;}#search_box {float: left;width: 630px;height: 86px;margin-left: 68px;margin-top: 24px;}#words_ul01 {margin-left: 18px;}#words_ul01 li {width: 36px;height: 24px;margin: 0 2px;display: inline-block;line-height: 24px;text-align: center;cursor: pointer;font-size: 12px;color: #FF3E10;}#search_box #words_ul01 li:hover {background-color: #FFEEE5;}#words #words_ul01 li:first-child {background-color: #FF6F00;color: #fff;font-weight: 700;border-radius: 4px 4px 0 0;}#searchbar {width: 628px;height: 36px;}#left_searchbar {position: relative;float: left;padding-left: 14px;width: 540px;height: 100%;border: 2px solid #FF5000;border-right: 0;border-radius: 18px 0 0 18px;outline: 0;}#left_searchbar input {float: left;width: 460px;height: 36px;text-indent: 20px;border: 0;outline: 0;}#rleft_searchbar {float: right;width: 76px;height: 36px;}#rleft_searchbar .a1 {display: block;width: 20px;height: 100%;line-height: 36px;margin: 0 auto;color: #999;}#rleft_searchbar .a1:hover {color: #999;}#searchbar button {float: left;width: 70px;height: 40px;border: 0;border-radius: 0 20px 20px 0;background-color: #FF6F00;outline: 0;font-size: 18px;color: #fff;font-weight: 700;cursor: pointer;}#search_box a {font-size: 12px;color: black;}#search_box a:hover {color: red;}#search_box a:nth-child(5) {color: #FF5000;}#phonetb {position: relative;float: left;margin-left: 116px;margin-top: 24px;width: 76px;height: 90px;border: 1px solid #eee;}#phonetb a {display: block;width: 76px;height: 90px;text-align: center;}#phonetb a span {font-size: 12px;color: #FF5000;line-height: 20px;}#phonetb a img {width: 64px;}#x {position: absolute;width: 16px;height: 16px;border: 1px solid #eee;top: -1px;left: -18px;color: #E6E6E6;cursor: pointer;}#left_mkt {float: left;width: 188px;height: 550px;border: 1px solid #FF5000;}#top_left_mkt {width: 100%;height: 30px;background-color: #ff5000;line-height: 30px;text-align: center;color: #fff;font-weight: 700;}#btm_left_mkt ul {margin: 5px 0;}#btm_left_mkt li {position: relative;overflow: hidden;width: 146px;height: 32px;padding-left: 24px;padding-right: 18px;line-height: 32px;font-size: 14px;color: #666;}#btm_left_mkt li a {color: #666;}#btm_left_mkt li a:hover {text-decoration: underline;}#btm_left_mkt li:hover {background-color: #FFE4DC;color: #FF4615;}#btm_left_mkt li:hover a {color: #FF4615;}#btm_left_mkt li span {position: absolute;right: 10px;font-size: 12px;}#rig_mkt {float: left;width: 1000px;height: 100%;}#head_rig_mkt {width: 100%;height: 31px;background-color: #FF7A00;}#left_head_rig_mkt {float: left;width: 216px;height: 100%;margin: 0 5px;font-size: 16px;font-weight: 700;}#left_head_rig_mkt li {display: inline-block;margin: 0 3px;padding: 0 5px;line-height: 31px;}#left_head_rig_mkt li a {display: block;color: #fff;}#rig_head_rig_mkt {float: left;height: 100%;font-size: 14px;font-weight: 700;}#rig_head_rig_mkt li {display: inline-block;margin: 0 3px;padding: 0 2px;line-height: 31px;}#rig_head_rig_mkt li span {font-size: 12px;color: #FFF1E4;}#rig_head_rig_mkt li a {display: block;color: #fff;}#body_rig_mkt {width: 990px;height: 512px;margin: 10px 0 0 10px;}#focus_brm {float: left;width: 522px;height: 510px;}#focus1_brm {position: relative;width: 520px;height: 280px;margin-bottom: 10px;overflow: hidden;}#ul01 {position: absolute;left: 0;top: 0;border: 0;width: 400%;height: 100%;z-index: 1;}#leftbtn,#rigbtn {position: absolute;top: 120px;width: 30px;height: 40px;background-color: purple;z-index: 2;display: none;cursor: pointer;}#ul01 li {list-style: none;float: left;width: 520px;height: 100%;}#leftbtn {left: 0;border-radius: 0 20px 20px 0;}#rigbtn {right: 0;border-radius: 20px 0 0 20px;}#cir_dot {position: absolute;left: 0;bottom: 0px;width: 100%;height: 40px;z-index: 2;}#ul02 {width: 300px;height: 100%;margin-left: 180px;}#ul02 li {list-style: none;float: left;margin: auto 3px;width: 16px;height: 16px;border-radius: 50%;background-color: #fff;}#ul02 li.current {background-color: #FAAA3C;}#focus2_brm {width: 520px;height: 230px;}#up_focus2_brm {width: 100%;height: 18px;background: url(../img/TMALL.png) no-repeat 2px 0;}#up_focus2_brm span {margin-left: 136px;font-size: 12px;color: #666;}#up_focus2_brm i {font-style: normal;font-size: 10px;margin-left: 282px;}#btm_focus2_brm {width: 100%;height: 212px;}#btm_focus2_brm a {float: left;display: block;margin: 5px 0;}#btm_focus2_brm a:last-child {margin-left: 0;}#mai_brm {float: left;width: 160px;height: 512px;margin-left: 10px;}#temai_brm {width: 100%;height: 282px;}.daymai {width: 100%;height: 18px;margin-top: 5px;font-size: 12px;color: #A1A1A1;}#remai_brm {width: 100%;height: 202px;}#rig_brm {float: right;width: 290px;height: 512px;}#rig_brm1 {width: 100%;height: 140px;background: url(../img/rig_top_brm.png) no-repeat 0 0;background-size: 290px 146px;}#toux_rig_brm1 {width: 100%;height: 56px;}#yuan_toux_rig_brm1 {width: 50px;height: 50px;border-radius: 50%;overflow: hidden;margin: 6px auto;margin-bottom: 0;}#nihao_rig_brm1 {width: 100%;height: 16px;line-height: 16px;text-align: center;font-size: 12px;}#club_rig_brm1 {width: 100%;height: 14px;line-height: 18px;text-align: center;}#club_rig_brm1 a {background-color: #FFE4DB;font-size: 12px;color: #FF5000;padding: 2px 10px 2px 2px;border-radius: 7px;}#denglu_rig_brm1 {width: 100%;height: 26px;margin-top: 12px;}#denglu_rig_brm1 button {background-color: #FF6C05;color: #fff;font-size: 16px;font-weight: 700;border: 0;border-radius: 4px;}#denglu_rig_brm1 button:first-child {width: 94px;height: 100%;line-height: 26px;text-align: center;}#denglu_rig_brm1 button:nth-child(2),#denglu_rig_brm1 button:nth-child(3) {width: 76px;height: 100%;line-height: 26px;text-align: center;}#rig_brm2 {position: relative;display: block;width: 100%;height: 28px;background-color: #FFE4DD;font-size: 12px;color: #ff5000;line-height: 28px;text-align: center;}#rig_brm2 div {position: absolute;width: 0;height: 0;top: 10px;right: 52px;border-style: solid;border-width: 5px 0 5px 7px;border-color: transparent transparent transparent #FF6C05;}#rig_brm3 {width: 100%;height: 108px;}#rig_brm3_head {width: 100%;height: 54px;}#rig_brm3_head_ul01 li {list-style: none;float: left;width: 32px;height: 20px;line-height: 20px;text-align: center;margin-left: 20px;margin-top: 18px;border-bottom: 2px solid transparent;}#rig_brm3_head_ul01 li:first-child {border-bottom: 2px solid #FF4400;}#rig_brm3_head_ul01 li:first-child a {font-size: 14px;font-weight: 700;}#rig_brm3_head_ul01 li a {font-size: 12px;font-weight: normal;color: #3C3C3C;}#rig_brm3_head_ul01 li a:hover {color: #FF6E06;}#rig_brm3_body {position: relative;width: 100%;height: 54px;}#rig_brm3_body ul {position: absolute;top: 0;left: 0;width: 100%;height: 54px;margin-left: 5px;}#rig_brm3_body ul li a {font-size: 12px;color: #3c3c3c;}#rbb3_ul01 {position: absolute;width: 100%;height: 54px;display: block;}/*#rbb3_ul01 li {list-style: none;float: left;height: 24px;line-height: 24px;font-size: 12px;}*/#rig_brm3_body ul li {list-style: none;float: left;height: 24px;line-height: 24px;font-size: 12px;}#rbb3_ul01 li a {color: #3c3c3c;}#rbb3_ul01 li a:hover {color: #FF6C05;}#rbb3_ul01 li:first-child a {color: #FF6C05;}#rbb3_ul01 li:nth-child(3) {margin-left: 12px;}#rbb3_ul02 li:nth-child(2n+1),#rbb3_ul03 li:nth-child(2n+1),#rbb3_ul04 li:nth-child(2n+1),#rbb3_ul05 li:nth-child(2n+1) {float: left;}#rbb3_ul02 {display: none;}#rbb3_ul02 li:nth-child(2n),#rbb3_ul03 li:nth-child(2n),#rbb3_ul04 li:nth-child(2n),#rbb3_ul05 li:nth-child(2n) {float: right;margin-right: 30px;}#rig_brm3_body ul li a:hover {color: #FF6C05;}/*#rbb3_ul02 li a:hover {color: #FF6C05;}*/#rbb3_ul03 {display: none;}#rbb3_ul03 li:nth-child(2n),#rbb3_ul04 li:nth-child(2n) {margin-right: 50px;}#rbb3_ul03 li:first-child a,#rbb3_ul03 li:nth-child(2) a,#rbb3_ul04 li:first-child a,#rbb3_ul04 li:nth-child(2) a,#rbb3_ul05 li:first-child a,#rbb3_ul05 li:nth-child(2) a {color: #FF6C05;}#rbb3_ul04 {display: none;}#rbb3_ul05 {display: none;}#rig_brm4,#rig_brm4_ul {width: 100%;height: 155px;margin-left: 1px;}#rig_brm4_ul li {list-style: none;position: relative;float: left;width: 71px;height: 77px;border-style: solid;border-width: 1px;border-color: #F4F4F4 #F4F4F4 #F4F4F4 transparent;margin-left: -1px;margin-bottom: -1px;}#rig_brm4_ul li>a {display: block;width: 100%;height: 100%;text-align: center;}#rig_brm4_ul li>a span {display: block;margin-top: 10px;margin-bottom: 10px;font-size: 24px;}#rig_brm4_ul li:first-child>a span{color: #997AFF;}#rig_brm4_ul li:nth-child(2)>a span{color: #FFCF51;}#rig_brm4_ul li:nth-child(3)>a span{color: #26D7CB;}#rig_brm4_ul li:nth-child(4) span{color: #B2C91B;}#rig_brm4_ul li:nth-child(5) span{color: #CC8E81;}#rig_brm4_ul li:nth-child(6) span{color: #FD2ECA;}#rig_brm4_ul li:nth-child(7) span{color: #F2B931;}#rig_brm4_ul li:nth-child(8) span{color: #997AFF;}#rig_brm4_ul li a p {color: #3c3c3c;font-size: 12px;}#rig_brm4_box1,#rig_brm4_box2,#rig_brm4_box3 {position: relative;width: 286px;height: 148px;z-index: 999;background-color: #fff;border: 1px solid #FF6C05;border-top: 1px solid transparent;}#rig_brm4_box1 {top: -10px;left: -1px;display: none;}#rig_brm4_box1cont {margin-left: 15px;height: 100%;}#rb4b1c_01，#rb4b1c_02 {width: 270px;height: 32px;line-height: 32px;}#rb4b1c_01 {margin-left: 5px;}#rb4b1c_01 a,#rb4b1c_02 a {font-size: 12px;color: #666;}#rb4b1c_01 a {padding: 0 5px;}#rb4b1c_02 a {margin: 0 -1px;}#rb4b1c_01 a:hover,#rb4b1c_02 a:hover {color: #FF6C05;}#rb4b1c_01 a:first-child,#rb4b1c_02 a:first-child {color: #FF6C05;}#rb4b1c_02,#rb4b1c_03 {width: 100%;height: 26px;line-height: 26px;}#rb4b1c_03 {margin-top: -1px;}#rb4b1c_02 input,#rb4b1c_03 input {width: 181px;height: 22px;padding-left: 5px;outline: none;}#rb4b1c_02 span,#rb4b1c_03 span {margin-left: -30px;color: #B7B7B7;}#autoc {position: absolute;top: 26px;left: 0;width: 177px;height: 34px;line-height: 34px;padding-left: 11px;border: 1px solid #ccc;background-color: #FFECE5;font-family: 'microsoft yahei';color: #FF4002;font-weight: 700;display: none;}#rb4b1c_04 {width: 100%;height: 30px;line-height: 30px;}#rb4b1c_04 i {font-style: normal;font-size: 14px;}#rb4b1c_04 i:first-child {color: #666;}#rb4b1c_04 i:nth-child(2) {color: #B7B7B7;font-family: "宋体";}#rb4b1c_04 i:nth-child(3) {color: #FF781E;font-weight: 700;}#rb4b1c_btn {width: 70px;height: 26px;line-height: 26px;text-align: center;border: 0;border-radius: 2px;outline: 0;background-color: #FF4400;color: #fff;font-size: 12px;font-weight: 700;cursor: pointer;}#rb4b1c_btn:hover {opacity: .8;}#x2 {position: absolute;top: 0;right: 0;font-style: normal;cursor: pointer;}#x2:hover {background-color: #F5F5F5;}#rig_brm4_box2 {top: -10px;left: -71px;display: none;}#form1 {margin-top: 5px;font-size: 12px;}#form1 label {vertical-align: top;}#form1 label:first-child {margin-right: 20px;}#form1 span {color: #bbb;}#fromTo1 {width: 100%;height: 52px;}#left_fromTo1,#rig_fromTo1 {width: 120px;height: 100%;}#left_fromTo1,#mid_jt {float: left;}#left1_fromTo1,#left2_fromTo1 {width: 100%;height: 24px;line-height: 24px;border: 1px solid #ccc;}#left2_fromTo1 {margin-top: -1px;}#left11_fromTo1 {float: left;width: 30px;height: 100%;text-align: center;background-color: #F5F5F5;font-size: 12px;color: #6B6B6B;}#left1_fromTo1 input,#left2_fromTo1 input {float: left;width: 66px;height: 24px;border: 0;outline: 0;padding-left: 5px;color: #A9A9A9;}#location {color: #DCDCDC;cursor: pointer;}.disp {display: none;}#mid_jt {font-size: 12px;color: #ccc;line-height: 50px;margin: 0 6px;font-weight: 700;}#chazhao_btn {width: 50px;height: 26px;margin-top: 8px;line-height: 26px;text-align: center;border: 0;border-radius: 2px;outline: 0;background-color: #FF4400;color: #fff;font-size: 12px;font-weight: 700;cursor: pointer;}#scrollBox11,#scrollBox21 {position: relative;}#rig_brm5 {margin-left: 10px;width: 100%;height: 78px;}#rig_brm51 {width: 100%;height: 30px;line-height: 30px;}#rig_brm51>span {font-size: 14px;color: #3C3C3C;font-weight: 700;}#rig_brm51 a {margin-left: 160px;}#rig_brm51 a:hover {color: #FF6C05;}#rig_brm51 a span:nth-child(1) {font-size: 12px;color: #3C3C3C;}#rig_brm51 a span:nth-child(2) {font-size: 10px;color: #C8C8C8;}#rig_brm51 a:hover span{color: #FF6C05;}#rig_brm52 {width: 100%;height: 48px;}#rig_brm52 li {position: relative;float: left;margin: 0 10px;}#saotb {position: absolute;top: -108px;left: -26px;width: 92px;height: 104px;border: 1px solid #F4F4F4;text-align: center;background-color: #fff;display: none;}#saotb img {width: 66px;height: 66px;margin: 14px;margin-bottom: 4px;}#saotb p {font-size: 12px;color: #666;}#rig_brm52 li a img {width: 32px;}#goods {width: 100%;height: 660px;margin-top: 12px;}#left_goods {float: left;width: 590px;height: 100%;background-color: #fff;}#inner_left_goods {width: 550px;height: 620px;margin: 20px;}#head_ilg {width: 100%;height: 24px;line-height: 24px;}#head_ilg p {float: left;margin-left: 5px;height: 24px;line-height: 24px;}#head_ilg img {float: left;height: 24px;}#head_ilg span {font-size: 12px;color: #999;line-height: 24px;}#body_ilg, #body_irg {width: 550px;height: 580px;margin: 20px 0;}#body_ilg li,#body_irg li {float: left;width: 180px;height: 270px;}#body_ilg li a,#body_irg li a {display: block;width: 180px;height: 270px;}#head_li01 {background-color: #4f4f4f;}#head_li01 img {width: 100%;height: 180px;display: block;transition: all .2s;margin-bottom: 10px;border: 0;}#head_li01 img {opacity: .9;}#head_li span {margin-left: 5px;color: black;}#body_ilg p,#body_irg p,#head_li i {font-style: normal;font-size: 14px;color: #999;margin-left: 5px;margin-top: 10px;}.sayok {font-size: 14px;color: #35B1FF;margin-left: 5px;margin-top: 20px;}#body_ilg li,#body_irg li {margin-right: 4px;margin-bottom: 20px;overflow: hidden;}#body_ilg li:nth-child(3n),#body_irg li:nth-child(3n) {margin-right: 0;}#rig_goods {float:right;width: 590px;height: 100%;background-color: #fff;}#inner_rig_goods {width: 550px;height: 620px;margin: 20px;}#head_irg {width: 100%;height: 24px;line-height: 24px;}#head_irg img {float: left;height: 24px;}#head_irg p {float: left;margin-left: 10px;line-height: 24px;font-size: 12px;color: #999;}#head_irg a {display: inline-block;float: right;margin-left: 10px;line-height: 24px;font-size: 12px;color: #999;}#head_li001 {background-color: #ededed;}#gshop {width: 100%;height: 538px;background-color: #f4f4f4;}#left_gshop,#rig_gshop {width: 590px;height: 100%;background-color: #fff;}#left_gshop {float: left;}#rig_gshop {float: right;}#head_lg,#head_rg {width: 550px;height: 24px;margin-left: 20px;margin-top: 20px;}#head_lg img,#head_rg img {float: left;height: 24px;}#head_lg p,#head_rg p {line-height: 24px;font-size: 12px;color: #999;}#head_lg .p1,#head_rg .p1 {float: left;margin-left: 10px;}#head_lg .p2 {float: right;margin-left: 10px;}#body_lg,#body_rg {width: 100%;height: 472px;margin-left: 20px;}#body_lg li,#body_rg li {float: left;width: 270px;height: 230px;margin-top: 5px;margin-bottom: 14px;margin-right: 4px;}#body_lg a,#body_rg a {display: block;width: 270px;height: 230px;}#up_blgli,#up_brgli {width: 100%;height: 42px;}#up_blgli p,#up_brgli p {line-height: 42px;}#up_blgli p:first-child,#up_brgli p:first-child {float: left;color: black;}#up_blgli p:nth-child(2),#up_brgli p:nth-child(2) {float: left;margin-left: 10px;font-size: 12px;color: #999;overflow: hidden;}#up_blgli p:first-child:hover,#up_brgli p:first-child:hover {color: red;}#down_blgli,#down_brgli {width: 100%;height: 182px;}#left_down_blgli,#left_down_brgli {float: left;width: 178px;height: 178px;background-color: #4f4f4f;}#left_down_blgli img,#left_down_brgli img {width: 178px;height: 178px;display: block;opacity: .9;}#rig_down_blgli,#rig_down_brgli {float: right;width: 88px;height: 88px;background-color: #4f4f4f;}#rig_down_blgli img,#rig_down_brgli img {width: 88px;height: 88px;opacity: .9;display: block;margin-bottom: 2px;}#left_down_brgli {position: relative;}#live {position: absolute;width: 100%;height: 36px;line-height: 36px;left: 0;bottom: 0;overflow: hidden;z-index: 2;color: #fff;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));}#left_live {float: left;margin-left: 4px;margin-top: 12px;width: 26px;height: 10px;line-height: 8px;border-radius: 2px;background-color: #FF2658;}#left_live span {overflow: hidden;line-height: 10px;font-size: 8px;}#live p {overflow: hidden;float: left;font-size: 14px;}#fashion {width: 100%;height: 290px;margin: 10px 0;background-color: #f4f4f4;}#left_fas {float: left;width: 840px;height: 100%;background-color: #fff;}#head_left_fas {width: 100%;height: 54px;line-height: 54px;}#head_left_fas span {float: left;display: block;margin-left: 20px;margin-top: 18px;width: 4px;height: 16px;background-color: #8558D6;}#head_left_fas h4 {float: left;margin-left: 10px;font-size: 20px;color: #AF4BE0;}#body_left_fas {width: 100%;height: 236px;}#body_left_fas li {float: left;width: 258px;height: 100%;padding-left: 20px;border-style: solid;border-width: 1px;border-color: #F4F4F4 #F4F4F4 transparent transparent;}#body_left_fas li:nth-child(3) {border-right: 0;}#body_left_fas li:hover {border: 1px solid red;}#body_left_fas li a {display: inline-block;margin-top: 32px;margin-bottom: 10px;font-size: 20px;color: #3C3C3C;}#body_left_fas li a:hover {color: red;}#body_left_fas li p {font-size: 14px;color: #999;}#down_blf {width: 260px;height: 162px;}#body_left_fas li #left_dblf,#body_left_fas li #rig_dblf {margin-top: 12px;}#left_dblf {float: left;}#rig_dblf {float: right;margin-right: 10px;}#rig_fas {float: right;overflow: hidden;width: 298px;height: 268px;background-color: #fff;padding: 20px 20px 0;border: 1px solid transparent;}#rig_fas:hover {border: 1px solid red;}#ulike {width: 100%;}#head_ulike {width: 100%;height: 52px;line-height: 52px;}#head_ulike span {float: left;display: block;margin-left: 20px;margin-top: 18px;width: 4px;height: 16px;background-color: #FF9F00;}#head_ulike h4 {float: left;margin-left: 10px;font-size: 20px;color: #FFA106;}#body_ulike {width: 100%;}#body_ulike li {position: relative;float: left;border: 1px solid #F4F4F4;width: 237px;height: 332px;margin-left: -1px;margin-top: -1px;}#body_ulike li:nth-child(5n+1) {border: 1px solid #F4F4F4;}#inner_li {width: 197px;height: 312px;margin: 20px 20px 0;}#inner_li a {display: block;width: 100%;height: 244px;}#inner_li_box {width: 100%;height: 197px;background-color: #4f4f4f;}#inner_li_box img {display: block;width: 197px;opacity: .9;}#inner_li .p0 {font-size: 14px;color: #666;margin: 10px 0;line-height: 22px;}#down_inner_li {width: 100%;height: 52px;line-height: 52px;font-family: 'microsoft yahei';}#down_inner_li span {float: left;font-size: 18px;color: #FF5F25;}#down_inner_li i {float: right;font-style: normal;font-size: 12px;font-weight: 400;color: #9DA1AB;}#down_inner_li span::before {content: "¥";font-size: 12px;}#body_ulike #hidbtm_inner_li {position: absolute;left: 0;bottom: 0;display: block;width: 100%;height: 82px;background-color: #FF4300;text-align: center;display: none;}#hidbtm_inner_li p:first-child {margin-top: 22px;color: #fff;font-size: 18px;}#hidbtm_inner_li span {display: block;width: 120px;height: 1px;background-color: #FE964A;margin: 8px auto;}#hidbtm_inner_li p:last-child {font-size: 12px;color: #fff;}#footer {width: 100%;height: 525px;overflow: hidden;}#sidebar {position: absolute;top: 550px;right: 290px;width: 50px;height: 350px;border-radius: 8px;background-color: #fff;text-align: center;z-index: 4;}#sb_font1 {position: absolute;top: -30px;right: 8px;font-size: 34px;color: #FF5500;/* margin-top: -24px; */z-index: 3;}#sb_ul {width: 100%;height: 100%;}#sb_ul li {list-style: none;width: 100%;height: 50px;/* line-height: 50px; */}#sb_ul li a {display: block;width: 26px;height: 26px;padding: 12px;font-size: 12px;}#sb_ul li a:hover {background-image: linear-gradient(135deg, #ff9000 0, #ff5000 100%);color: #fff;font-weight: 700;}#sb_ul li:last-child a {border-radius: 0 0 8px 8px;}#sb_ul li i {display: block;width: 34px;height: 0;border-top: 1px solid #f4f4f4;margin: 0 auto;}.sb_ula1 {color: #fff;font-weight: 700;background-image: linear-gradient(135deg, #ff9000 0, #ff5000 100%);border-radius: 8px 8px 0 0;}.sb_ula2 {color: #FF0055;}.sb_ula3 {color: #8D7AFB;}.sb_ula4 {color: #A8C001;}.sb_ula5 {color: #FF4400;}.sb_ula6 {line-height: 26px;}.sb_ula6,.sb_ula7 {color: #3C3C3C;}
重点来了 JS代码：
window.addEventListener('load',function() {//谁发生 就获取谁。 这里是大盒子发生消失事件。 所以不需要获取x盒子了。var phonetb = document.getElementById('phonetb');//怎么发生 x盒子添加一个点击事件 clickx.addEventListener('click', function() {//发生了什么 phonetb盒子消失了phonetb.style.display = 'none';});})//定位 中国大陆//获取元素var cdl_li01 = document.getElementById('cdl_li01');var areasBox = document.getElementById('areasBox');var areas = document.getElementById('areas');var area_change = document.getElementById('area_change');//注册鼠标经过事件//这里需要用冒泡 所以用mouseover mouseoutcdl_li01.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';areasBox.style.display = 'block';//点击了全球 li的内容变成全球 for(var i = 0; i < areas.children.length; i++) {areas.children[i].addEventListener('click', function() {area_change.innerHTML = this.innerHTML;areasBox.style.display = 'none';});}});cdl_li01.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';areasBox.style.display = 'none';});//我的淘宝//获取元素var rig_chdalu_li01 = document.getElementById('rig_chdalu_li01');var mytbBox = document.getElementById('mytbBox');//给li注册事件 //需要冒泡 鼠标经过 mouseover 鼠标离开 mouseoutrig_chdalu_li01.addEventListener('mouseover', function() {this.style.backgroundColor = '#fff';mytbBox.style.display = 'block';});rig_chdalu_li01.addEventListener('mouseout', function() {this.style.backgroundColor = '#f5f5f5';mytbBox.style.display = 'none';});//宝贝 天猫 店铺 搜索栏点击变化//获取元素var words_bb = document.getElementById('words_bb');var words_tm = document.getElementById('words_tm');var words_dp = document.getElementById('words_dp');var a = document.getElementById('a');var rleft_searchbar = document.getElementById('rleft_searchbar');var words_ul01 = document.getElementById('words_ul01');words_tm.addEventListener('click', function() {for(var i = 0; i < words_ul01.children.length; i++) {words_ul01.children[i].style.backgroundColor = '#fff';words_ul01.children[i].style.color = 'red';words_ul01.children[i].style.fontWeight = 'normal';words_ul01.children[i].style.borderRadius = 0;}a.style.display = 'none';rleft_searchbar.style.display = 'none';/*words_bb.style.backgroundColor = '#fff';words_bb.style.color = 'red';words_bb.style.fontWeight = 'normal';*/this.style.backgroundColor = '#FF6F00';this.style.color = '#fff';this.style.fontWeight = '700';this.style.borderRadius = '4px 4px 0 0';/*words_dp.style.backgroundColor = '#FFF';words_dp.style.color = 'red';words_dp.style.fontWeight = 'normal';words_dp.style.borderRadius = 0;*/});words_dp.addEventListener('click', function() {a.style.display = 'block';rleft_searchbar.style.display = 'none';words_bb.style.backgroundColor = '#fff';words_bb.style.color = 'red';words_bb.style.fontWeight = 'normal';words_tm.style.backgroundColor = '#FFF';words_tm.style.color = 'red';words_tm.style.fontWeight = 'normal';words_tm.style.borderRadius = 0;this.style.backgroundColor = '#FF6F00';this.style.color = '#fff';this.style.fontWeight = '700';this.style.borderRadius = '4px 4px 0 0';});words_bb.addEventListener('click', function() {a.style.display = 'block';rleft_searchbar.style.display = 'block';this.style.backgroundColor = '#FF6F00';this.style.color = '#fff';this.style.fontWeight = '700';this.style.borderRadius = '4px 4px 0 0';words_tm.style.backgroundColor = '#FFF';words_tm.style.color = 'red';words_tm.style.fontWeight = 'normal';words_tm.style.borderRadius = 0;words_dp.style.backgroundColor = '#FFF';words_dp.style.color = 'red';words_dp.style.fontWeight = 'normal';words_dp.style.borderRadius = 0;});//轮播图1//1，左右按钮初始隐藏 鼠标进入focus1_brm 按钮显示 鼠标离开focus1_brm 按钮隐藏//获取元素var focus1_brm = document.getElementById('focus1_brm');var leftbtn = document.getElementById('leftbtn');var rigbtn = document.getElementById('rigbtn');//因为图片宽度是多个事件需要用到 所以要定义为全局变量var pic_width = focus1_brm.clientWidth;//注册事件focus1_brm.addEventListener('mouseenter', function() {leftbtn.style.display = 'block';rigbtn.style.display = 'block';//清除定时器 停止自动播放 clearInterval(timer);//停止播放后 清空定时器变量 提升运行效率timer = null;});focus1_brm.addEventListener('mouseleave', function() {leftbtn.style.display = 'none';rigbtn.style.display = 'none';//timer在11条里声明过了 这里就不需要再加var进行声明了timer = setInterval(function() {rigbtn.click();}, 1500);});//6，创建动画函数animate 点击小圆点 图片会移动 //因为图片需要缓慢移动到目标位置 而不是瞬移 所以需要让动画函数带缓动效果function animate(obj, target, callback) {//obj是移动的对象 target是移动的目标位置 callback是回调函数clearInterval(obj.timer);//创建缓动函数 缓动的核心思想就是把移动到目标位置的距离分成若干小步//一定时间内走一小步，让这个距离在若干时间完成若干小步后走完function move() {//定义每一小步走的距离 把一次移动到目标位置的距离分为10份//每一份就是一个stepvar step = (target - obj.offsetLeft) / 10;//step可能不是整数 导致最终移动距离有误差 //所以要把每一步的step变成整数//如果step是正数 就取大于step的最小整数//如果step是负数 就取小于step的最大整数 用Math()的知识/*if(step > 0) {step = Math.ceil(step);//向上取整} else {step = Math.floor(step);//向下取整}*///可以将上面的if else语句简化为三元运算符step = step > 0 ? Math.ceil(step) : Math.floor(step);//如果走到了目标位置 就清除定时器if(obj.offsetLeft == target) {clearInterval(obj.timer);//因为回调函数是定时器结束后再调用函数 //所以这里清除定时器后 需要判断一下是否有回调函数 有就调用 没有就不调用/*if(callback) {callback();}*///上面的判断语句可以简化为callback&&callback();}//把每一小步移动的距离和offsetLeft之和，给obj的left值//注意，这里obj.style.left对应的是数值+像素单位，一定不要忘了+'px'obj.style.left = obj.offsetLeft + step + 'px';}//给obj创建专属的定时器 //用定时器实现一定时间走一小步的结果 这里是10毫秒移动一个step的距离//注意，专属定时器不需要用var了 obj.timer = setInterval(move, 10);}//2，动态添加小圆点 图片的数量就是小圆点的个数//获取元素var ul01 = document.getElementById('ul01');var ul02 = document.getElementById('ul02');//添加多个li 用for循环 for(var i = 0; i < ul01.children.length; i++) {//创建元素creLivar creLi = document.createElement('li');//3，创建自定义属性data-index 用来获取小圆点的索引号creLi.setAttribute('data-index', i); //添加元素ul02.appendChild(creLi);//4,当前点击的小圆点 颜色发生变化 创建类urrent//因为图片默认开始显示第一张 所以先让第一个小圆点小时current类ul02.children[0].className = 'current';//5，给小圆点创建点击事件 点击小圆点 当前点击的小圆点变色//用排他思想 for循环//注册点击事件creLi.addEventListener('click', function() {//干掉所有人for(var i = 0; i < ul02.children.length; i++) {ul02.children[i].className = '';}//留下我自己this.className = 'current';//7，点击小圆点 图片跟着动 调用动画函数//分析 点击圆点1 图片向左移动0个图片的宽度focus1_brm.clientWidth//点击圆点2 图片向左移动1个图片的宽度 以此类推//图片移动的距离 就是 当前被点击圆点的索引号乘以图片的宽度//获取自定义属性 当前被点击的小圆点的索引号var index = this.getAttribute('data-index');num = index;circle = index;animate(ul01, -index*pic_width);});}//8，右侧按钮//8.1 点击右侧按钮 图片向左移动//点击1次 图片向左移动1个图片宽度 显示图片2//点击2次 向左移动2个图片宽度 显示图片3 以此类推//当显示到第3张图片即最后一张图片时 再点击右侧按钮 会显示空白//重点： 实现无缝链接，即当显示到最后一张图片时 再点击右侧按钮 会显示图片1//怎么做 在图片3后面克隆一张图片1//显示图片3时 再点击按钮 ul01继续向左移动 显示图片1//然后迅速跳转到跳转到图片1 让ul01.style.left归零//设置次数变量numvar num = 0;//克隆图片1 先克隆 再添加 注意 克隆图片也是全局事件 不是局部的var liCopy = ul01.children[0].cloneNode(true)//深克隆ul01.appendChild(liCopy);//添加新的li后，注意取css里修改ul01的宽度//console.log(ul01.children.length); 元素个数变成了4//获取元素rigbtnvar rigbtn = document.getElementById('rigbtn');//给按钮点击事件安装节流阀var flag = true; //左右按钮都要用 所以设置全局变量//注册点击事件rigbtn.addEventListener('click', function() {if(flag) {//初始状态 先把节流阀关了 让自动播放的图片播放完一张图片前 点击按钮无效flag = false;//先做个判断 //点击第2次的时候 显示图片3 再点击 就显示克隆的图片1 //这时候 让ul01位置归零 让num的值归零以便从头开始if(num == ul01.children.length - 1) {ul01.style.left = 0;num = 0;}//点击1次 移动距离就是1*pic_width//点击1次 让num自增1num++;//注意 这里如果先自增 再做判断//会出现一个bug 就是当再次显示图片1时 点击无效 重新点击才会显示图片2//因为点击第三次时 本来应该跳转到图片1的 结果num被归零了 再点击还是显示图片1//调用动画函数animate(ul01, -num*pic_width, function() {//function(){}是回调函数//动画结束一个动作后 即播放完该图片后 再回头打开节流阀 让下一次点击生效flag = true;});circle++;if(circle == ul02.children.length) {circle = 0;}//因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用/*for(var i = 0; i < ul02.children.length; i++) {ul02.children[i].className = '';}ul02.children[circle].className = 'current';*/cir();}});function cir() {for(var i = 0; i < ul02.children.length; i++) {ul02.children[i].className = '';}ul02.children[circle].className = 'current';}//9，点击按钮 图片移动 小圆点跟着移动 点击小圆点 图片跟着移动 num次数也变化//让图片 小圆点 按钮次数 一起变化的核心 就是图片动 num变化 小圆点当前的current类发生变化//即 图片移动 当前小圆点变色 点击按钮 当前小圆点变色//当前小圆点变色 图片移动 按钮次数发生变化 num index 图片距离 一起变化 //但是index是局部变量 怎么让三者绑定呢//就要重新创建一个全局变量 代替index 作为小圆点当前的索引号 让三者绑定var circle = 0;//10，点击左侧按钮//和右侧按钮点击事件的代码基本相同 但是方向相反 需要修改一些数据//直接把右侧按钮点击事件的代码复制过来 然后修改数据//获取元素leftbtnvar leftbtn = document.getElementById('leftbtn');//注册点击事件leftbtn.addEventListener('click', function() {//同理，给左侧按钮也加个节流阀if(flag) {flag = false;//先做个判断 //开始时 未点击 num为0if(num == 0) {num = ul01.children.length-1;ul01.style.left = -num*pic_width + 'px';}//点击左侧按钮时 num自减num--;animate(ul01, -num*pic_width, function() {flag = true;});circle--;if(circle < 0) {circle = ul02.children.length - 1;}//因为这段排他思想的小圆点代码重复使用 所以可以封装成一个函数进行调用/*for(var i = 0; i < ul02.children.length; i++) {ul02.children[i].className = '';}ul02.children[circle].className = 'current';*/cir();}});//11，图片自动播放 相当于每隔一定时间 用定时器调用点击右侧按钮的时间 var timer = setInterval(function() {rigbtn.click();}, 1500);//12，鼠标进入focus1_brm 停止自动播放 鼠标离开focus1_brm 继续自动播放//13，节流阀 控制图片播放的频率//当前 快速点击按钮 图片高速播放 timer定时器还没执行结束 就开始播放下一张图片了//用flag控制 flag为true 打开节流阀 启用定时器 播放图片//flag为false 关闭节流阀 关闭的定时器 点击按钮无效 停止播放图片//给按钮点击事件安装节流阀//头部head 公告 规则 论坛//公告 默认字体加粗 14px 底边有色//鼠标经过规则 规则字体加粗 14px 底边有色 公告 论坛 安全 公益 字体正常 12px 底边无色//鼠标经过论坛 论坛字体加粗 14px 底边有色 公告 规则 安全 公益 字体正常 12px 底边无色//以此类推//获取元素 var rb3h_ul = document.getElementById('rig_brm3_head_ul01');var rb3b = document.getElementById('rig_brm3_body');//以规则为例/*rb3h_ul.children[1].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';});*///把1改成j 对数表经过事件进行遍历/*for(var j = 0; j < rb3h_ul.children.length; j++) {rb3h_ul.children[j].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[j].style.display = 'block';});}*///再以规则为例 鼠标经过规则 下面的第二个ul的内容显示出来 其他ul都隐藏//显示发生在鼠标经过事件的里面/*rb3h_ul.children[1].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[1].style.display = 'block';});rb3h_ul.children[2].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[2].style.display = 'block';});rb3h_ul.children[0].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[0].style.display = 'block';});rb3h_ul.children[3].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[3].style.display = 'block';});rb3h_ul.children[4].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//干掉所有人 for(var m = 0; m < rb3b.children.length; m++) {rb3b.children[m].style.display = 'none';}//留下我自己 rb3b.children[4].style.display = 'block';});*//*Uncaught TypeError: Cannot read property 'style' of undefined这个bug出现的原因：因为 第一个for里面包含的是一个函数 function(),addEventListener('mouseover', function() {})而for里面的j是var声明的局部变量，不能进入function()函数里去循环执行当j++后，j变成了5，不在for范围内了，成了块区域的变量 j=5就进入function里面执行但是li的索引号最多是4，j=5进入后就会导致函数在执行时 从html页面找不到索引号是5的li 。所以就会报错上面的bug。bug的第一种解决方法：把var 换成let就解决了for(let j = 0; j < rb3h_ul.children.length; j++) {rb3h_ul.children[j].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';//干掉所有人rb3b.children[i].style.display = 'none';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';console.log(j);//输出01234//留下我自己 rb3b.children[j].style.display = 'block';});}*///bug的第二种解决办法for(var m = 0; m < rb3h_ul.children.length; m++) {(function(j) {rb3h_ul.children[j].addEventListener('mouseover', function() {for(var i = 0; i < rb3h_ul.children.length; i++) {//干掉所有人rb3h_ul.children[i].style.borderBottom = '2px solid transparent';rb3h_ul.children[i].children[0].style.fontWeight = 'normal';rb3h_ul.children[i].children[0].style.fontSize = '12px';//干掉所有人rb3b.children[i].style.display = 'none';}//留下我自己this.style.borderBottom = '2px solid #FF4400';this.children[0].style.fontWeight = '700';this.children[0].style.fontSize = '14px';//console.log(j);//留下我自己 rb3b.children[j].style.display = 'block';});})(m)}//充话费 鼠标经过充话费盒子 显示下面的盒子//获取元素 var rig_brm4_ul = document.getElementById('rig_brm4_ul');//获取li的父元素ulvar rig_brm4_box1 = document.getElementById('rig_brm4_box1');//获取要显示的盒子//注册鼠标经过事件 rig_brm4_ul.children[0].addEventListener('mouseover', function() {rig_brm4_box1.style.display = 'block';/*this.style.borderColor = '#FF6C05';this.style.borderBottom = '1px solid transparent';*/});//点击× 盒子消失var x2 = document.getElementById('x2');x2.addEventListener('click', function() {rig_brm4_box1.style.display = 'none';});//充话费--输入手机号//获取元素var rb4b1c_02 = document.getElementById('rb4b1c_02');var autoc = document.getElementById('autoc');//输入框获得焦点 影像显示rb4b1c_02.children[0].addEventListener('focus', function() {autoc.style.display = 'block';//console.log(autoc.innerHTML);为了检测是否有显示方面的bug});//输入时 把input的内容 给 自动显示框rb4b1c_02.children[0].addEventListener('keyup', function() {//console.log(this.value);//手机号是11位数字 //首先要判断输入的是否为数字 不是数字 删除掉这个字符var n = this.value.length;if(isNaN(this.value)) {//console.log(1);//如果输入的不是整数 就删除输入的字符this.value = this.value.slice(0, n-1);autoc.innerHTML = this.value;} else {//console.log(0);//autoc.innerHTML = this.value;//判断输入的长度 如果达到11位数字了 就停止输入//停止输入就是只截取前面11位数字 //再简化一下 就是不管输入多少 只截取前面11位数字赋值给显示框//同时 因为autoc的内容显示格式是123-4567-7891//所以需要加个判断if(n < 3) {autoc.innerHTML = this.value;} else if(n == 3) {autoc.innerHTML = this.value + '-';} else if(n>3 && n<7) {autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3);} else if(n == 7) {autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-';} else if(n>7 && n<11) {autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-' + this.value.slice(7, 11);}else {this.value = this.value.slice(0, 11);//意思是input输入框里只截图前面11个数字来显示 相当于只能输入11位数autoc.innerHTML = this.value.slice(0, 3) + '-' + this.value.slice(3, 7) + '-' + this.value.slice(7, 11);autoc.style.display = 'none';}}//autoc.innerHTML = this.value;//因为autoc的内容显示格式是123-4567-7891//所以需要加个判断});//失去焦点 显示框隐藏rb4b1c_02.children[0].addEventListener('blur', function() {autoc.style.display = 'none';});//隐藏导航栏的宝贝搜索var serchnav_ul = document.getElementById('serchnav_ul');var left_bb = document.getElementById('left_bb');left_bb.addEventListener('mouseenter', function() {serchnav_ul.children[0].style.borderRadius = '20px 0 0 0';serchnav_ul.children[1].style.display = 'block';serchnav_ul.children[2].style.display = 'block';});serchnav_ul.addEventListener('mouseleave', function() {serchnav_ul.children[0].style.borderRadius = '20px 0 0 20px';serchnav_ul.children[1].style.display = 'none';serchnav_ul.children[2].style.display = 'none';});left_bb.addEventListener('mouseleave', function() {serchnav_ul.children[0].style.borderRadius = '20px 0 0 20px';serchnav_ul.children[1].style.display = 'none';serchnav_ul.children[2].style.display = 'none';});//显示和隐藏导航栏//当页面滚动到一定位置时 显示导航栏 当页面距离顶部小于一定距离时 导航栏消失document.addEventListener('scroll', function() {// console.log(window.scrollY);if(window.scrollY >= 188) {nav.style.display = 'block';} else {nav.style.display = 'none';}if(window.scrollY >= 470) {sidebar.style.position = 'fixed';sidebar.style.top = '88px';} else {sidebar.style.position = 'absolute';sidebar.style.top = '550px';}/* console.log(window.scrollY);console.log(sidebar.offsetTop);console.log(sidebar.clientTop + '-------'); */});
我用到的font字体图标：
用到的图片我就不贴了。页面上都可以直接弄到的。
--end--
