关于小三角的问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>project</title> <script src="jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="index.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <!--头部--> <div class="header"> <div class="headerLeft"> <ul> <li> <a href="#" class="one">亲，请登录</a> </li> <li> <a href="#" class="registered">免费注册</a> </li> <li>手机逛慕淘</li> </ul> </div> <div class="headerRight"> <ul> <li>我的慕淘 <div> <img src="素材/icon/21.png" alt="" /> </div> <ul class="select2"> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </li> <li>收藏夹 <div> <img src="素材/icon/21.png" alt="" /> </div> <ul class="select2"> <li>收藏的宝贝</li> <li>收藏的商铺</li> </ul> </li> <li>商品分类</li> <li>卖家中心 <div> <img src="素材/icon/21.png" alt="" /> </div> <ul class="select2"> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体验中心</li> </ul> </li> <li>联系客服 <div> <img src="素材/icon/21.png" alt="" /> </div> <ul class="select2"> <li>消费者客服</li> <li>卖家客服</li> </ul> </li> </ul> </div> </div> <!--遮罩层--> <div class="layer-mask"></div> <!--弹出窗口--> <div class="layer-pop"> <!--关闭按钮--> <div class="layer-close"> <img src="../jQproject/素材/icon/20.png" /> </div> <!--弹出窗口的内容之登录窗口--> <div class="layer-content"> <ul class=" layer-login"> <li class="login ">登录</li> <li class="registered ">注册</li> </ul> <div class="clear"></div> <ul class="layer-ipt "> <li><input type="text" name="usename" id="usename" value="" placeholder="请输入登录邮箱/手机号" /></li> <li class="error-msg"></li> <li><input type="password" name="pas" id="pas" value="" placeholder="6-16位密码，区分大小写，不能用空格" /></li> <li class="error-pas"></li> <li class="chkfather"><input type="checkbox" name="checkbox1" id="checkbox1" value="下次自动登录" /> <span id="spanleft"> 下次自动登录 </span> <span id="spanright"> 忘记密码 </span> </li> <li><input type="button" name="btn" id="btn" value="登录" /></li> <li class="image"><img src="素材/icon/xinlang.png" /><img src="素材/icon/weixin.png" /><img src="素材/icon/QQ.png" /></li> </ul> </div> </div> <!--注册的弹出窗口--> <div class="layer-pop2"> <!--关闭按钮--> <div class="layer-close"> <img src="../jQproject/素材/icon/20.png" /> </div> <!--弹出窗口的内容之注册窗口--> <div class="layer-content-registered"> <ul class=" layer-registered"> <li class="login">登录</li> <li class="registered layer-active">注册</li> </ul> <div class="clear"></div> <ul class="layer-ipt "> <li><input type="text" name="usename2" id="usename2" value="" placeholder="请输入注册邮箱/手机号" /></li> <li class="error2-msg"></li> <li><input type="password" name="pas2" id="pas2" value="" placeholder="请输入验证密码" /><img class="code" src="素材/verify.png" /></li> <li class="error2-pas"></li> <li><input type="button" name="btn" id="btn" value="注册" /></li> <li class="image"><img src="素材/icon/xinlang.png" /><img src="素材/icon/weixin.png" /><img src="素材/icon/QQ.png" /></li> </ul> </div> </div> <!--logo--> <div class="logo"> <!--logo的图片--> <div class="logoimg"><img src="素材/logo.png" /></div> <!--搜索框和搜索按钮--> <div class="search"> <input type="text" name="searchtxt" id="searchtxt" value="" /> <input type="button" name="seaechbtn" id="seaechbtn" value="搜索" /> </div> <!--购物车--> <div class="shopWrap"> <div class="shop"> <div class="shopbox"> <ul> <li><img src="素材/icon/26.png" /></li> <li>购物车 | 0</li> <li><img src="素材/icon/23.png" /></li> </ul> </div> <div class="shopbox2"> <ul> <li><img src="素材/icon/25.png" /></li> <li>购物车 | 0</li> <li><img src="素材/icon/24.png" /></li> </ul> </div> </div> <div class="shoppingCart"> <ul> <li><img src="素材/cart/1.png" />adidas最新衣服<br />￥399 ×1 </li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/2.png" />王兰多护肤品<br />￥1099 ×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/3.png" />apple ipone7<br />￥5099 ×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/4.png" />飞利浦面条机 HR2356/32<br />￥659×4</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/5.png" />罗巷G27力游戏方向<br />￥2999×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/1.png" />adidas最新衣服<br />￥399 ×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/2.png" />王兰多护肤品<br />￥1099 ×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/3.png" />apple ipone7<br />￥5099 ×1</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/4.png" />飞利浦面条机 HR2356/32<br />￥659×4</li><img class="cuo" src="素材/icon/20.png" /> <li><img src="素材/cart/5.png" />罗巷G27力游戏方向<br />￥2999×1</li><img class="cuo" src="素材/icon/20.png" /> </ul> </ul> </div> </div> </div> <!--导航--> <div class="nav"> <ul> <li>数码城</li> <li>天黑屋</li> <li>团购</li> <li>发现</li> <li>二手特价</li> <li>名品汇聚</li> </ul> </div> <!--banner--> <div class="banner"> <!--装菜单的容器--> <div class="menuWrap"> <!--红色的菜单栏--> <div class="menu menu-title"> <div class="main-item1 item1"> <a href=""> <span><img src="素材/icon/18.png"/> 商品分类</span> </a> </div> <div class="main-item"> <a href=""> <span>家用电器</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>手机、运营商、数码</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>电脑、办公</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>家具、家居、家装、厨具</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>男装、女装、童装、内衣</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>化妆、清洁、宠物</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>运动户外、钟表</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>汽车、汽车用品</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>食品、酒类、生鲜、特产</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>医药保健</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>图书、音像、电子书</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>彩票、旅行、充值、票务</span> <b>></b> </a> </div> <div class="main-item"> <a href=""> <span>理财、众筹、白条、保险</span> <b>></b> </a> </div> </div> <!--二级菜单栏--> <div class="twomenu"> <!--家用电器--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">冰箱</span> <span class="mr10">|</span> <a href="">手机壳</a> <a href="">手机存储卡</a> <a href="">数据线</a> <a href="">充电器</a> <a href="#">电池</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="#">中国联通</a> <a href="#">中国移动</a> <a href="#">中国电信</a> </div> <div class="twomenu-container"> <span class="bold mr10">电脑</span> <span class="mr10">|</span> <a href="#">智能手环</a> <a href="#">智能家居</a> <a href="#">智能手表</a> <a href="#">其他配件</a> </div> <div class="twomenu-container"> <span class="bold mr10">微波炉</span> <span class="mr10">|</span> <a href="#">耳机</a> <a href="#">音响</a> <a href="#">收音机</a> <a href="#">麦克风</a> </div> <div class="sub-row"> <span class="bold mr10">开水壶</span> <span class="mr10">|</span> <a href="#">耳机</a> <a href="#">音响</a> <a href="#">收音机</a> <a href="#">麦克风</a> </div> <div class="sub-row"> <span class="bold mr10">吹风机</span> <span class="mr10">|</span> <a href="#">耳机</a> <a href="#">音响</a> <a href="#">收音机</a> <a href="#">麦克风</a> </div> <div class="sub-row"> <span class="bold mr10">学习机</span> <span class="mr10">|</span> <a href="#">耳机</a> <a href="#">音响</a> <a href="#">收音机</a> <a href="#">麦克风</a> </div> </div> </div> <!--手机、运营商、数码--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">手机通讯</span> <span class="mr10">|</span> <a href="">笔记本</a> <a href="">平板</a> <a href="">一体机</a> </div> <div class="twomenu-container"> <span class="bold mr10">运营商</span> <span class="mr10">|</span> <a href="">显示器</a> <a href="">CPU</a> <a href="">主板</a> <a href="">硬盘</a> <a href="">电源</a> <a href="">显卡</a> <a href="">其他配件</a> </div> <div class="twomenu-container"> <span class="bold mr10">手机配件</span> <span class="mr10">|</span> <a href="">游戏机</a> <a href="">耳机</a> <a href="">游戏软件</a> </div> <div class="twomenu-container"> <span class="bold mr10">数码产品</span> <span class="mr10">|</span> <a href="">路由器</a> <a href="">网络机顶盒</a> <a href="">交换机</a> <a href="">存储卡</a> <a href="">网卡</a> </div> <div class="twomenu-container"> <span class="bold mr10">电子教育</span> <span class="mr10">|</span> <a href="">鼠标</a> <a href="">键盘</a> <a href="">U盘</a> <a href="">移动硬盘</a> <a href="">鼠标垫</a> <a href="">电脑清洁</a> </div> </div> </div> <!--电脑、办公--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电脑</span> <span class="mr10">|</span>国产品牌</a> <a href="">韩国品牌</a> <a href="">欧美品牌</a> </div> <div class="twomenu-container"> <span class="bold mr10">办公</span> <span class="mr10">|</span> <a href="">显示器</a> <a href="">柜式</a> <a href="">中央</a> <a href="">壁挂式</a> </div> <div class="twomenu-container"> <span class="bold mr10">冰箱</span> <span class="mr10">|</span> <a href="">多门</a> <a href="">对开门</a> <a href="">三门</a> <a href="">双门</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">滚筒式洗衣机</a> <a href="">迷你洗衣机</a> <a href="">洗烘一体机</a> </div> <div class="twomenu-container"> <span class="bold mr10">厨房电器</span> <span class="mr10">|</span> <a href="">油烟机</a> <a href="">洗碗机</a> <a href="">燃气灶</a> </div> </div> </div> <!--家具家具、家装、厨具--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">家纺</span> <span class="mr10">|</span> <a href="">被子</a> <a href="">枕头</a> <a href="">四件套</a> <a href="">床垫</a> </div> <div class="twomenu-container"> <span class="bold mr10">灯具</span> <span class="mr10">|</span> <a href="">台灯</a> <a href="">顶灯</a> <a href="">节能灯</a> <a href="">应急灯</a> </div> <div class="twomenu-container"> <span class="bold mr10">厨具</span> <span class="mr10">|</span> <a href="">烹饪锅具</a> <a href="">餐具</a> <a href="">菜板刀具</a> </div> <div class="twomenu-container"> <span class="bold mr10">家装</span> <span class="mr10">|</span> <a href="">地毯</a> <a href="">沙发垫套</a> <a href="">装饰字画</a> <a href="">照片墙</a> <a href="">窗帘</a> </div> <div class="twomenu-container"> <span class="bold mr10">生活日用</span> <span class="mr10">|</span> <a href="">收纳用品</a> <a href="">浴室用品</a> <a href="">雨伞雨衣</a> </div> </div> </div> <!--男装、女装、童装、内衣--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机5</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--化妆、清洁、宠物--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机6</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--运动户外、钟表--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机7</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--汽车、汽车用品--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机8</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--食品、酒类、生鲜、特产--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机9</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--医药保健--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机10</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--图书、音像、电子书--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机11</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--彩票、旅行、充值、票务--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机12</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> <!--理财、众筹、白条、保险--> <div class="menubox"> <div class=""> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机13</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">洗衣机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">运营商</a> <a href="">对话机</a> <a href="">嗖嗖嗖</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">打火机</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">空调</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> <div class="twomenu-container"> <span class="bold mr10">电器</span> <span class="mr10">|</span> <a href="">手机</a> <a href="">对话机</a> <a href="">以旧换新</a> <a href="">手机维修</a> </div> </div> </div> </div> </div> <!--中间的轮播图--> <div class="advertising"> <div class="banner-image imgactive"> <img src="素材/focus-carousel/1.png" /> </div> <div class="banner-image"> <img src="素材/focus-carousel/2.jpg" /> </div> <div class="banner-image"> <img src="素材/focus-carousel/3.jpg" /> </div> <div class="banner-image"> <img src="素材/focus-carousel/4.jpg" /> </div> <div class="banner-image"> <img src="素材/focus-carousel/5.jpg" /> </div> </div> <div class="left"> <img src="素材/focus-carousel/pre2.png"/> </div> <div class="right"> <img src="素材/focus-carousel/pre.png"/> </div> <div class="radio"> <ul> <li class="liActive"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!--右边的快报栏--> <div class="Letters"> <!--上面的文字和公告--> <div class="LettersTop"> <div class="LettersToptitle"> 慕快报<span>更多></span> </div> <ul> <li><span>[特惠]</span>精选图书每满150减50</li> <li><span>[公告]</span>因广州图书仓搬仓升级配送延迟</li> <li><span>[特惠]爆款手机12期免息 抽奖赢电视</span></li> <li><span>[公告]</span>广州、福建受台风影响配送延迟</li> <li><span>[特惠]</span>大闸蟹领卷满399减180</li> </ul> </div> <!--中间的小图标--> <div class="Lettersmain"> <div class="minimage"> <div class=""> <img src="../jqproject/素材/icon/1.png" /><p>话费</p> </div> <div class=""> <img class="hw32" src="../jqproject/素材/icon/2.png" /><p>飞机</p> </div> <div class=""> <img src="../jqproject/素材/icon/3.png" /><p>电影票</p> </div> <div class=""> <img src="../jqproject/素材/icon/4.png" /><p>游戏</p> </div> <div class=""> <img src="../jqproject/素材/icon/5.png" /><p>彩票</p> </div> <div class=""> <img src="../jqproject/素材/icon/6.png" /><p>加油站</p> </div> <div class=""> <img src="../jqproject/素材/icon/7.png" /><p>酒店</p> </div> <div class=""> <img src="../jqproject/素材/icon/8.png" /><p>火车票</p> </div> <div class=""> <img src="../jqproject/素材/icon/9.png" /><p>众筹</p> </div> <div class=""> <img src="../jqproject/素材/icon/10.png" /><p>理财</p> </div> <div class=""> <img src="../jqproject/素材/icon/11.png" /><p>礼品盒</p> </div> <div class=""> <img src="../jqproject/素材/icon/12.png" /><p>白条</p> </div> </div> </div> <!--下面的广告--> <div class="Letterfollow"> <img src="素材/ad.png"/> </div> </div> </div> <div class="clear"></div> <!--楼层区--> <div class="floor"> <!--楼层一--> <div class="floor1"> <div class="F1top"> <div class="left1"> <div class="censhu">1F</div><div class="names">服装鞋包</div> </div> <div class="right1"> <ul id="1Fright"> <li class="red">大牌</li><span>|</span> <li>男装</li><span>|</span> <li>女装</li> </ul> <ul class="clickchangeimg"> <li class="sanjiaoactive"><img src="素材/floor-arrow.png" alt="" /></li> <li><img src="素材/floor-arrow.png" alt="" /></li> <li><img src="素材/floor-arrow.png" alt="" /></li> </ul> </div> </div> <div class="Fimgagebox Fimgageboxactive"> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>1匡威男棒球开衬外套2015</p> <p class="money">￥479</p> </div> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>adidas训练球员</p> <p class="money">￥335</p> </div> <div class="F1img"> <img src="素材/floor/1.jpg" alt="" /> <p>必买bmai一体短衬</p> <p class="money">￥159</p> </div> <div class="F1img"> <img src="素材/floor/1.jpg" alt="" /> <p>2018最新款潮流短衬</p> <p class="money">￥62</p> </div> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>匡威男棒球开衬外套2018</p> <p class="money">￥479</p> </div> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>安踏男棒球开衬外套2018</p> <p class="money">￥479</p> </div> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>1安踏足球开衬外套2018</p> <p class="money">￥479</p> </div> <div class="F1img"> <img src="素材/floor/2.jpg" alt="" /> <p>2018户外三合一最新款女装裙子</p> <p class="money">￥289</p> </div> <div class="F1img"> <img src="素材/floor/2.jpg" alt="" /> <p>2018最新款女装裙子</p> <p class="money">￥369</p> </div> <div class="F1img"> <img src="素材/floor/1.png" alt="" /> <p>羽绒服2018吴一凡同款</p> <p class="money">￥689</p> </div> <div class="F1img"> <img src="素材/floor/3.jpg" alt="" /> <p>旅行双肩多功能背包</p> <p class="money">￥268</p> </div> <div class="F1img"> <img src="素材/floor/3.jpg" alt="" /> <p>户外旅行双肩背包OSSS</p> <p class="money">￥99</p> </div> </div> <div class="Fimgagebox"> <div class="F1img"> <img src="素材/floor/6.jpg"/> </div> </div> <div class="Fimgagebox"> <div class="F1img"> <img src="素材/floor/4.jpg"/> </div> </div> </div> </div> <!--友情链接区--> <div class="link"></div> <!--页脚--> <div class="footer"></div> </body> </html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: black;
}
ul li{
list-style: none;
}
body{
height: 5000px;
}
.clear{clear: both;}
.header{
width:1198px;
background-color: #f3f5f7;
margin: 0 auto;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #AAAAAA;
}
.header .headerLeft{
float: left;
height:50px;
}
.header .headerLeft ul li{
float: left;
margin-right:10px;
}
.header .headerLeft ul li:hover{
cursor: pointer;
}
.header .headerLeft ul li:hover a{color: red;}
.header .headerLeft ul li .one{
color: red;
}
.header .headerLeft ul li .one:hover{
}
/*头部右边*/
.header .headerRight{
float: right;
height: 50px;
}
.header .headerRight ul li{
float:left;
margin-left:20px;
width: 100px;
position: relative;
text-align: center;
}
.header .headerRight ul li div{
float: right;
height: 50px;
line-height:55px;
}
.header .headerRight ul li .select2 li{
float: none;
display: none;
background-color: white;
color: #000000;
border: 1px solid whitesmoke;
margin: 0;
}
.header .headerRight ul li:hover{
cursor: pointer;
color: red;
}
.header .headerRight ul li:hover .select2 li{
display: block;
cursor: pointer;
z-index: 9999;
}
.header .headerRight ul .select2 li:hover{
color:#cdd0d4 ;
}
/*遮罩层*/
.layer-mask{
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #000000;
opacity: 0.5;
position: fixed;
z-index: 99999;
display: none;
}
/*弹出窗口*/
.layer-pop{
width:400px;
height: 300px;
background-color: white;
z-index: 1000000;
position: fixed;
left: 50%;
height: 50%;
margin-left:-200px ;
top:150px;
text-align: center;
display: none;
}
/*弹出窗口的关闭按钮*/
.layer-pop .layer-close{
float: right;
margin: 20px 20px 10px 20px;
}
.layer-pop .layer-close:hover{
cursor: pointer;
}
.layer-pop .layer-content .layer-login {
height: 20px;
}
.layer-pop .layer-content .layer-login:hover{
cursor: pointer;
}
.layer-pop .layer-content .layer-login .login{
color: red;
padding-bottom:10px;
border-bottom: 2px solid red;
}
/*.layer-active{
color: red;
padding-bottom:10px;
border-bottom: 2px solid red;
}*/
/*错误提示框*/
.layer-pop .layer-content .error-msg{
height: 10px;
color: red;
}
.layer-pop .layer-content .error-pas{
height: 10px;
color: red;
}
.layer-pop .layer-content .layer-login li{
float: left;
margin: 20px 20px 10px 20px;
}
.layer-pop .layer-content .layer-ipt{
position: relative;
}
.layer-pop .layer-content .layer-ipt input{
width: 250px;
height: 30px;
margin: 10px;
}
/*单选按钮*/
.layer-pop .layer-content .layer-ipt .chkfather{
float: left;
padding-top:9px ;
}
.layer-pop .layer-content .layer-ipt .chkfather #spanleft{
margin-left: 90px;
margin-top: 20px;
}
.layer-pop .layer-content .layer-ipt .chkfather #spanright{
margin-left: 70px;
margin-top: 20px;
top: 20px;
}
/*单项按钮的位置*/
.layer-pop .layer-content .layer-ipt #checkbox1{
height: 15px;
width: 15px;
left: 70px;
top: 130px;
position:absolute;
}
.layer-pop .layer-content .layer-ipt #btn{
color: white;
background-color: red;
border: none;
height: 40px;
}
.layer-pop .layer-content .layer-ipt img{
background-color: #888888;
border-radius: 50%;
margin-left: 20px;
}
.layer-pop .layer-content .layer-ipt img:hover{
background-color:#07bbbf;
cursor: pointer;
}
/*注册列表*/
.layer-pop2{
width:400px;
height: 300px;
background-color: white;
z-index: 1000000;
position: fixed;
left: 50%;
height: 50%;
margin-left:-200px ;
top:150px;
text-align: center;
border: 1px solid red;
display: none;
}
.layer-pop2 .layer-close{
float: right;
margin: 20px;
}
.layer-pop2 .layer-close:hover{
cursor: pointer;
}
.layer-pop2 .layer-content-registered .layer-registered{
float: left;
}
/*登录和注册*/
.layer-pop2 .layer-content-registered .layer-registered li{
float: left;
margin: 20px;
}
.layer-pop2 .layer-content-registered .layer-registered li:hover{
cursor: pointer;
}
.layer-pop2 .layer-content-registered .registered{
color: red;
padding-bottom:10px;
border-bottom: 2px solid red;
}
.layer-pop2 .layer-content-registered .layer-ipt{
position: relative;
}
.layer-pop2 .layer-content-registered .layer-ipt li input{
width: 250px;
height: 30px;
margin: 10px;
}
.layer-pop2 .layer-content-registered .layer-ipt li #usename2{
width: 320px;
height: 30px;
margin-top:10px;
}
/*注册列表帐号的错误提示*/
.layer-content-registered .error2-msg{
height: 10px;
color: red;
}
.layer-pop2 .layer-content-registered .layer-ipt .code{
position: relative;
top:15px
}
/*注册列表验证码的错误提示*/
.layer-pop2 .layer-content-registered .layer-ipt .error2-pas{
height: 10px;
color: red;
}
.layer-pop2 .layer-content-registered .layer-ipt #btn{
background-color: red;
color: white;
height: 40px;
border: none;
}
.layer-pop2 .layer-content-registered .layer-ipt .image img{
background-color: #888888;
border-radius: 50%;
margin-left: 20px;
}
.layer-pop2 .layer-content-registered .layer-ipt .image img:hover{
background-color:#07bbbf;
cursor: pointer;
}
/*logo这样行*/
.logo{
width: 1198px;
margin: 0 auto;
background-color:#f3f5f7;
height: 140px;
position: relative;
}
/*logo的图标*/
.logo .logoimg{
float: left;
height: 140px;
line-height: 160px;
}
/*搜索框架*/
.logo .search{
height: 140px;
line-height: 130px;
float: left;
margin-left:150px ;
}
.logo .search input{
height: 30px;
}
.logo .search #searchtxt{
width: 500px;
height: 30px;
}
.logo .search #seaechbtn{
width: 70px;
background-color: #000000;
color: white;
border: none;
}
/*购物车*/
.logo .shop{
float:right;
width: 200px;
height: 140px;
line-height: 140px;
color: white;
position: relative;
}
.logo .shop .shopbox{
float: right;
/*background-color: red;*/
height:140px ;
line-height: 140px;
}
.logo .shop ul{
height: 40px;
background-color: red;
line-height: 40px;
margin-top:50px ;
}
.logo .shop ul li{
height: 30px;
background-color: red;
float:left;
margin-left: 10px;
padding-right:10px ;
}
/*隐藏的购物车盒子*/
.logo .shop .shopbox2{
float: right;
/*background-color: red;*/
height:140px ;
line-height: 140px;
left: 8px;
position: absolute;
display: none;
}
.logo .shop .shopbox2 ul{
height: 40px;
background-color: white;
line-height:40px;
margin-top:50px ;
}
.logo .shop .shopbox2 ul li{
color: red;
background-color: white;
margin-left: 10px;
padding-right:10.1px ;
}
/*购物车里面的东西*/
.shoppingCart{
float: left;
height: 260px;
width: 240px;
overflow: auto;
position: absolute;
top: 90px;
left: 1006px;
font-size: 15px;
background-color: white;
border: 1px solid red;
display: none;
z-index: 30;
}
.shoppingCart img{
float: left;
}
.shoppingCart ul li{
height: 60px;
}
.shoppingCart ul .cuo{
float: right;
margin-top:-60px ;
}
/*导航*/
.nav{
width: 100%;
height: 50px;
background-color: #000000;
line-height: 50px;
}
.nav ul{
margin-left: 230px;
}
.nav ul li{
float: left;
margin-left: 50px;
color: white;
}
.nav ul li:hover{
cursor:pointer;
color:red;
}
/*banner区域*/
.banner{
width: 1198px;
margin: 0 auto;
position: relative;
height:494px ;
}
/*左侧的菜单栏*/
.menu{
height: 549px;
float: left;
background: red;
position:absolute;
top: -55px;
width: 194px;
}
.main-item{
height:38px ;
line-height: 38px;
}
/*.main-item:hover{
background: white;
}
.main-item:hover a{
color: red;
}*/
.main-item-Active{
background-color: white;
}
.main-item .aActive{
color: red;
}
.main-item a{
color: white;
}
.main-item b{
float: right;
}
.menu .item1{
background-color: #BE0028;
height: 55px;
line-height: 55px;
}
.menu .item1 a{
color: white;
}
.item1:hover{
background-color: #BE0028;
}
.item1:hover a{
color:white;
}
/*二级菜单的内容*/
.banner .twomenu{
height: 504px;
width: 670px;
position: absolute;
left: 194px;
z-index: 30;
background-color:white;
color:gray ;
display: none;
}
.banner .twomenu .menubox{
padding:30px;
position: absolute;
width:670px;
height:435px ;
background-color: white;
display: none;
}
.banner .twomenu .menubox a:hover{
color: red;
}
.banner .twomenu .bold{
font-weight: bold;
color: #000000;
}
.banner .twomenu a{
color: gray;
margin-left:10px;
margin-right:10px;
}
.banner .twomenu .twomenu-container{
margin-top: 20px;
}
.banner .twomenu .twomenu-container .mr10{
margin-right: 10px;
margin-left:10px;
}
/*banner图*/
.banner .advertising{
position: absolute;
left: 194px;
}
.banner .advertising .banner-image{
position: absolute;
display: none;
}
.banner .advertising .banner-image img{
height:494px ;
width: 730px;
}
.banner .advertising .imgactive{
display: block;
}
/*左右按钮*/
.banner .left{
position: absolute;
left: 220px;
top: 220px;
width: 16px;
height: 30px;
}
.banner .right{
position: absolute;
left: 890px;
top: 220px;
width: 16px;
height: 30px;
}
.banner .right:hover,.banner .left:hover{
background-color: #000000;
opacity: 0.5;
}
.banner .right:hover,.banner .left:hover{
cursor: pointer;
}
/*圆点*/
.banner .radio{
position:absolute;
left: 450px;
top:450px ;
margin: 10px;
}
.banner .radio ul li{
float: left;
width: 10px;
height: 10px;
border-radius:50%;
background-color: grey;
margin: 5px;
}
.banner .radio ul li:hover{
cursor: pointer;
}
.banner .radio .liActive{
border:1px solid grey;
background-color: white;
}
/*banner区域右边的区域*/
.banner .Letters{
position: absolute;
left: 925px;
border: 1px solid gainsboro;
width: 268px;
height: 492px;
}
.banner .Letters .LettersTop .LettersToptitle{
color: red;
font-size: 20px;
padding: 10px;
height: 30px;
}
.banner .Letters .LettersTop .LettersToptitle span{
padding-left: 136px;
color: gray;
font-size: 15px;
}
.banner .Letters .LettersTop ul li{
padding-left: 10px;
font-size: 15px;
padding-top:10px ;
}
.banner .Letters .LettersTop ul li:hover{
cursor: pointer;
color: red;
}
/*右边的小图标*/
.banner .Letters .Lettersmain{
height: 191px;
float: left;
text-align: center;
border: none;
}
.banner .Letters .Lettersmain .minimage div{
float: left;
padding: 2.51px;
border:1px solid gainsboro;
text-align: center;
}
.banner .Letters .Lettersmain div img{
height: 32px;
width: 32px;
}
.banner .Letters .Lettersmain div p{
width: 60px;
}
.banner .Letters .Letterfollow{
height: 101px;
width: 268px;
}
.banner .Letters .Letterfollow img{
height: 101px;
width: 268px;
}
/*楼层区第一层*/
.floor{
width: 1198px;
margin: 0 auto;
}
.floor .F1top{
height: 50px;
position: relative;
padding-top:30px ;
}
.floor .F1top .censhu{
float: left;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
color: white;
background-color: #000000;
margin-top:10px;
}
.floor .F1top .names{
float: left;
margin-top:13px;
margin-left:10px ;
}
.floor .F1top .left1{
float: left;
}
.floor .F1top .right1{
float: right;
}
.floor .F1top .right1 ul li{
float: left;
padding: 12px;
}
.floor .F1top .right1 ul .red{
color: red;
}
.floor .F1top .right1 ul li:hover{
cursor: pointer;
color: red;
}
.floor .F1top .right1 span{
position: absolute;
float: right;
padding:12px 5px 12px 5px;
margin-left:-5px ;
}
.floor .F1top .right1 .clickchangeimg{
position: absolute;
left: 1002px;
top: 64px;
z-index: 10;
}
.floor .F1top .right1 .clickchangeimg li{
margin-left:42px ;
padding:0px;
display: none;
}
.floor .F1top .right1 .clickchangeimg li:hover{
cursor: default;
}
.floor .F1top .right1 .clickchangeimg .sanjiaoactive{
display: block;
}
.floor .floor1{
width: 1198px;
margin: 0 auto;
}
.floor .floor1 .Fimgagebox{
width: 1198px;
height:400px;
border-top: 1px solid red;
float: left;
position: absolute;
display: none;
}
.floor .floor1 .Fimgageboxactive{
display: block;
}
.floor .floor1 .F1img{
float: left;
margin:0 auto;
width: 190px;
height:150px ;
text-align: center;
margin-top:30px;
margin-left: 5px;
font-size: 12px;
}
.floor .floor1 .F1img img{
vertical-align:middle;
}$(function(){
// var login=$('.login')
// var registered=$('.registered')
//点击请登录，弹出遮罩层和登录框
$('.one').click(function(){
$('.layer-mask').show();
$('.layer-pop').show();
// login.removeClass('.layer-active')
// $('.registered').removeClass('.layer-active')
});
//点击注册时，弹出注册框
$('.registered').click(function(){
$('.layer-pop').hide();
$('.layer-pop2').show();
})
//点击登陆时，从注册框回到登录框
$('.login').eq(1).click(function(){
$('.layer-pop').show();
$('.layer-pop2').hide();
// console.log($('.login').eq(1))
})
//点击关闭按钮，隐藏遮罩层和登录框
$('.layer-close').click(function(){
$('.layer-mask').hide();
$('.layer-pop').hide();
$('.layer-pop2').hide();
//把错误提示清除
$('.error-msg').html("");
$('.error-pas').html("");
$('.error2-msg').html("");
$('.error2-pas').html("");
//把文本框的内容清空
$('#usename').val("");
$('#pas').val("");
$('#usename2').val("");
$('#pas2').val("");
});
//文本框失去焦点时判断
$('#usename').blur(function(){
var usename= $("input[name='usename']").val()
// console.log( usename.length)
if(usename.length!=11){
$('.error-msg').html("手机号码不是11位数")
}else{
if(isNaN(usename)){
$('.error-msg').html("不是纯数字");
}else{
console.log("对了")
}
}
//获得焦点时，把错误提示清除
$('#usename').focus(function(){
$('.error-msg').html("");
})
})
$('#pas').blur(function(){
var pas= $("input[name='pas']").val()
if(pas.length<6 || pas.length>16 ){
$('.error-pas').html("密码小于6位或者密码大于16位");
}
$('#pas').focus(function(){
$('.error-pas').html("");
})
})
//注册框的文本内容
$('#usename2').blur(function(){
var usename= $("input[name='usename']").val()
// console.log( usename.length)
if(usename.length!=11){
$('.error2-msg').html("手机号码不是11位数")
}else{
if(isNaN(usename)){
$('.error-msg2').html("不是纯数字");
}else{
console.log("对了")
}
}
//获得焦点时，把错误提示清除
$('#usename2').focus(function(){
$('.error2-msg').html("");
})
})
//注册框的验证文本
$('#pas2').blur(function(){
var pas= $("input[name='pas']").val()
if(pas!="Gyyd"){
$('.error2-pas').html("验证码错误");
}
//获得焦点时，把错误提示清除
$('#pas2').focus(function(){
$('.error2-pas').html("");
})
})
//鼠标移入到购物车里，发生动作
$('.shopWrap').hover(function(){
$('.shopbox').hide()
$(".shopbox2").show()
$('.shoppingCart').show()
},function(){
$('.shopbox').show()
$(".shopbox2").hide()
$('.shoppingCart').hide()
})
// 鼠标移入红色菜单栏时，二级菜单显示
$('.main-item').mouseover(function(){
$('.twomenu').show();
$('.menubox').eq($(this).index()-1).show();
$(this).addClass('main-item-Active');
$(".main-item a").eq($(this).index()-1).addClass('aActive');
})
.mouseout(function(){
$('.twomenu').hide();
$('.menubox').eq($(this).index()-1).hide();
$(this).removeClass('main-item-Active');
$(".main-item a").eq($(this).index()-1).removeClass('aActive');
})
$('.twomenu').mouseover(function(){
$(this).show();
})
.mouseout(function(){
$(this).hide();
});
//鼠标划过二级菜单，改变红色菜单的样式和弹出二级菜单的内容
$('.menubox').mouseover(function(){
$(this).show();
$('.main-item').eq($(this).index()).addClass('main-item-Active');
$(".main-item a").eq($(this).index()).addClass('aActive');
})
.mouseout(function(){
$(this).hide();
$('.main-item').eq($(this).index()).removeClass('main-item-Active');
$(".main-item a").eq($(this).index()).removeClass('aActive');
});
var index=0,
len=$('.banner-image').length
// console.log(len)
//banner的轮播
$('.advertising').hover(function(){
//移入停止
clearInterval(timer)
},function(){
//离开轮播
banner()
})
//移入左右按钮时停止，离开启动
$(".right").hover(function(){
clearInterval(timer)
},function(){
banner()
})
$(".left").hover(function(){
clearInterval(timer)
},function(){
banner()
})
//移入圆点，离开启动
$(".radio ul li").hover(function(){
clearInterval(timer)
},function(){
banner()
})
//自动轮播
banner();
// 点击上一张
leftImg();
//下一张函数
rightImg()
//调用点击按钮图片跳转的函数
clickradio()
//banner添加类和移除类
function changeImg(){
for(var i=0;i<len;i++){
$('.banner-image').removeClass('imgactive')
$('.radio ul li').removeClass('liActive')
}
$('.banner-image').eq(index).addClass('imgactive')
$('.radio ul li').eq(index).addClass('liActive')
}
// 封装图片轮播的效果
function banner(){
timer=setInterval(function(){
index++
if(index>4){
index=0;
}
changeImg()
},2000)
}
// 封装上一张函数
function leftImg(){
$('.left').click(function(){
index--;
if(index<0) index=len-1
changeImg();
})
}
// 封装下一张函数
function rightImg(){
$('.right').click(function(){
index++;
if(index>=len) index=0
changeImg();
})
}
//点击圆点跳转到那张图片
function clickradio(){
$('.radio ul li').click(function(){
index=$(this).index()
changeImg()
})
}
$('.right1 #1Fright li').click(function(){
$('this').removeClass('red');
$('.Fimgagebox').removeClass('Fimgageboxactive');
$('.clickchangeimg li').removeClass('sanjiaoactive');
$(this).addClass('red');
$('.Fimgagebox').eq($(this).index()/2).addClass('Fimgageboxactive');
$('.clickchangeimg li').eq($(this).index()/2).addClass('sanjiaoactive');
console.log($(this).index())
})
})就是我点击楼层一右边的选项，小三角不是在选项下面出现，而是再同一个位置。
并且我的$(this).index()，出现乘以二的奇怪现象
0
收起
正在回答
2回答
同学你的代码是不是完整，我没有找到你说的楼层导航，不过看了一下你的代码，有两个简单的地方出了问题，这个虽然不会有太大的影响，但是却是一个最基本的要求：
1、中文乱码的问题处理：
1、js加在要早body的最下面，避免dom没有加载完就执行了js，这个时候就会报错。
建议同学重新把问题重新描述清楚，必要时可以加图片描述，图文结合描述清楚自己的需求，由于这里面涉及到了图片等大量的代码，你也可以提交作业，在作业中把问题描述清楚，批作业的老师也会给你具体的解决方案，两种方案都可以哦，你看看哪个方便一些就用哪个方法。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星