棒棒糖！要原味的~
老规矩：直接上货，先看效果图~~
上传的图片有大小要求。
内容目录：
- 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="https://www.taobao.com/" 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="https://www.taobao.com/?spm=a21bo.2017.201857.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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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">2020春秋新款欧美风衣马夹女装长款时尚修身收腰薄款马甲</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盒子添加一个点击事件 click
x.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 mouseout
cdl_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 鼠标离开 mouseout
rig_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份
//每一份就是一个step
var 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++) {
//创建元素creLi
var 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归零
//设置次数变量num
var num = 0;
//克隆图片1 先克隆 再添加 注意 克隆图片也是全局事件 不是局部的
var liCopy = ul01.children[0].cloneNode(true)//深克隆
ul01.appendChild(liCopy);//添加新的li后，注意取css里修改ul01的宽度
//console.log(ul01.children.length); 元素个数变成了4
//获取元素rigbtn
var 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自增1
num++;
//注意 这里如果先自增 再做判断
//会出现一个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，点击左侧按钮
//和右侧按钮点击事件的代码基本相同 但是方向相反 需要修改一些数据
//直接把右侧按钮点击事件的代码复制过来 然后修改数据
//获取元素leftbtn
var leftbtn = document.getElementById('leftbtn');
//注册点击事件
leftbtn.addEventListener('click', function() {
//同理，给左侧按钮也加个节流阀
if(flag) {
flag = false;
//先做个判断
//开始时 未点击 num为0
if(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的父元素ul
var 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--
原创文章 28
获赞 35
访问量 1万+