div设置成float后，消失了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>finalHomework</title> <link href="finalHomeworkcss/finalHomework.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="main"> <!--头部--> <div class="header"> <div class="headBtn"> <a id="loginLink" href="#">亲，请登录</a> <a id="registerLink" href="#">免费注册</a> <a id="checkImooc" href="#">手机逛慕课</a> </div> <div class="menus"> <div class="firstMenu"> <a href="#">联系客服 <img src="素材/icon/21.jpg"/></a> <div class="secondMenu"> <a href="#">消费者客服</a> </div> <div class="secondMenu"> <a href="#">卖家客服</a> </div> </div> <div class="firstMenu"> <a href="#">卖家中心 <img src="素材/icon/21.jpg"/></a> <div class="secondMenu"> <a href="#">免费开店</a> </div> <div class="secondMenu"> <a href="#">已卖出的宝贝</a> </div> <div class="secondMenu"> <a href="#">出售中的宝贝</a> </div> <div class="secondMenu"> <a href="#">卖家服务市场</a> </div> <div class="secondMenu"> <a href="#">体验中心</a> </div> </div> <div class="firstMenu"> <a href="#">商品分类 <img src="素材/icon/21.jpg"/></a> </div> <div class="firstMenu"> <a href="#">收藏夹 <img src="素材/icon/21.jpg"/></a> <div class="secondMenu"> <a href="#">收藏的宝贝</a> </div> <div class="secondMenu"> <a href="#">收藏的店铺</a> </div> </div> <div class="firstMenu"> <a href="#">我的慕课 <img src="素材/icon/21.jpg"/></a> <div class="secondMenu"> <a href="#">已买到的宝贝</a> </div> <div class="secondMenu"> <a href="#">我的足迹</a> </div> </div> </div> </div><!--头部结束--> <!--LOGO区域--> <div class="logoPart"> <div class="logo"> <a href="#"><img src="素材/logo.jpg"/></a> </div> <div class="searcher"> <input class="searchInput" type="text" value="灵魂美食一元抢"/> <input class="searchBtn" type="button" value="搜索"/> </div> <div class="shopCar"> <img class="carPic" src="素材/icon/26.jpg"/> <span class="toRed"> 购物车 | 0 </span> <img src="素材/icon/22.jpg"/> <!--购物车子菜单--> <div class="shopCarSecondMenu"> <h3>最新加入的商品</h3> <div class="myGoods"> <img src="素材/cart/1.jpg"/> <a href="javascript:;">adidas 男子 训练<br/>￥135×1</a> </div> <div class="myGoods"> <img src="素材/cart/2.jpg"/> <a href="javascript:;">玉兰迪多效修护三部曲套装<br/>￥199×2</a> </div> <div class="myGoods"> <img src="素材/cart/3.jpg"/> <a href="javascript:;">Apple Phone7<br/>￥6899×1</a> </div> <div class="myGoods"> <img src="素材/cart/4.jpg"/> <a href="javascript:;">飞利浦面条机<br/>￥689×4</a> </div> <div class="myGoods"> <img src="素材/cart/5.jpg"/> <a href="javascript:;">罗技G29 力反馈游戏方向<br/>￥2999×1</a> </div> <div class="goPay"> 共6件商品 共计0.00元 <a href='#'>去购物车</a> </div> </div><!--购物车子菜单尾部标签--> </div> </div><!--LOGO区域结束--> <!--导航栏部分--> <div class="nav"> <ul> <li><a href="javascript:;">数码城</a></li> <li><a href="javascript:;">天黑黑</a></li> <li><a href="javascript:;">团购</a></li> <li><a href="javascript:;">发现</a></li> <li><a href="javascript:;">二手特价</a></li> <li><a href="javascript:;">名晶汇</a></li> </ul> </div><!--导航栏部分结束--> <!--banner图部分--> <div class="banner"> <!--左边的商品分类区域--> <div class="chooseGoods"> <!--父菜单--> <div class="goodsHeadLine"> <img src="素材/icon/18.jpg"/> <span>商品分类</span> </div> <div class="goods"> <p>家用电器</p> <span> > </span> </div> <div class="goods"> <p>手机、运营商、数码</p> <span> > </span> </div> <div class="goods"> <p>电脑、办公</p> <span> > </span> </div> <div class="goods"> <p>家居、家具、家装、厨具</p> <span> > </span> </div> <div class="goods"> <p>男装、女装、童装、内衣</p> <span> > </span> </div> <div class="goods"> <p>化妆、清洁、宠物</p> <span> > </span> </div> <div class="goods"> <p>运动户外、钟表</p> <span> > </span> </div> <div class="goods"> <p>汽车、汽车用品</p> <span> > </span> </div> <div class="goods"> <p>母婴、玩具乐器</p> <span> > </span> </div> <div class="goods"> <p>食品、酒类、生鲜、特产</p> <span> > </span> </div> <div class="goods"> <p>医药保健</p> <span> > </span> </div> <div class="goods"> <p>图书、音像、电子书</p> <span> > </span> </div> <div class="goods"> <p>彩票、旅行、充值、票务</p> <span> > </span> </div> <!--子菜单 达到法定沙发沙发沙发上的发顺丰似懂非懂放到沙发上 --> <div class="goodsSecond ">0</div> <div class="goodsSecond ">1 <div class="goodsList"> <strong>电器</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>冰箱</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>洗衣机</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>电脑</strong> <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 class="goodsList"> <strong>微波炉</strong> <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 class="goodsList"> <strong>开水壶</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>吹风机</strong> <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 class="goodsList"> <strong>缝纫机</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">2 <div class="goodsList"> <strong>手机通讯</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>手机配件</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>摄影摄像</strong> <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 class="goodsList"> <strong>数码配件</strong> <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 class="goodsList"> <strong>影音娱乐</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>智能设备</strong> <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 class="goodsList"> <strong>电子教育</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">3 <div class="goodsList"> <strong>联想</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>苹果</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>显示屏</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>戴尔</strong> <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 class="goodsList"> <strong>华硕</strong> <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 class="goodsList"> <strong>打印机</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>照相机</strong> <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 class="goodsList"> <strong>索尼</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">4 <div class="goodsList"> <strong>复读机</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>MP3</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>乐视</strong> <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 class="goodsList"> <strong>VIVO</strong> <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 class="goodsList"> <strong>OPPO</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>智能</strong> <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 class="goodsList"> <strong>电子教育</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">5 <div class="goodsList"> <strong>手机通讯</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>电子配件</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>摄影摄像</strong> <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 class="goodsList"> <strong>微波炉</strong> <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 class="goodsList"> <strong>开水壶</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>吹风机</strong> <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 class="goodsList"> <strong>缝纫机</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">6 <div class="goodsList"> <strong>复读机</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>MP3</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>乐视</strong> <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 class="goodsList"> <strong>VIVO</strong> <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 class="goodsList"> <strong>OPPO</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>智能</strong> <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 class="goodsList"> <strong>电子教育</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">7 <div class="goodsList"> <strong>联想</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>苹果</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>显示屏</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>戴尔</strong> <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 class="goodsList"> <strong>华硕</strong> <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 class="goodsList"> <strong>打印机</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>照相机</strong> <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 class="goodsList"> <strong>索尼</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">8 <div class="goodsList"> <strong>复读机</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>MP3</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>乐视</strong> <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 class="goodsList"> <strong>VIVO</strong> <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 class="goodsList"> <strong>OPPO</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>智能</strong> <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 class="goodsList"> <strong>电子教育</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">9 <div class="goodsList"> <strong>电器</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>冰箱</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>洗衣机</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>电脑</strong> <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 class="goodsList"> <strong>微波炉</strong> <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 class="goodsList"> <strong>开水壶</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>吹风机</strong> <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 class="goodsList"> <strong>缝纫机</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">10 <div class="goodsList"> <strong>电器</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>冰箱</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>洗衣机</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>电脑</strong> <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 class="goodsList"> <strong>微波炉</strong> <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 class="goodsList"> <strong>开水壶</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>吹风机</strong> <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 class="goodsList"> <strong>缝纫机</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">11 <div class="goodsList"> <strong>联想</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>苹果</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>显示屏</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>戴尔</strong> <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 class="goodsList"> <strong>华硕</strong> <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 class="goodsList"> <strong>打印机</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>照相机</strong> <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 class="goodsList"> <strong>索尼</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">12 <div class="goodsList"> <strong>手机通讯</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>运营商</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>手机配件</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>摄影摄像</strong> <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 class="goodsList"> <strong>数码配件</strong> <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 class="goodsList"> <strong>影音娱乐</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>智能设备</strong> <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 class="goodsList"> <strong>电子教育</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> <div class="goodsSecond ">13 <div class="goodsList"> <strong>联想</strong> <a href="#">手机</a> <a href="#">对讲机</a> <a href="#">以旧换新</a> <a href="#">手机维修</a> </div> <div class="goodsList"> <strong>苹果</strong> <a href="#">充话费</a> <a href="#">170选号</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 class="goodsList"> <strong>显示屏</strong> <a href="#">手机壳</a> <a href="#">贴膜</a> <a href="#">手机储蓄卡</a> <a href="#">数据线</a> <a href="#">充电器</a> <a href="#">手机耳机</a> <a href="#">创意配件</a> <a href="#">手机饰品</a> <a href="#">手机电池</a> <a href="#">苹果周边</a> <a href="#">移动电源</a> <a href="#">蓝牙耳机</a> <a href="#">手机支架</a> <a href="#">车载配件</a> <a href="#">拍照配件</a> </div> <div class="goodsList"> <strong>戴尔</strong> <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 class="goodsList"> <strong>华硕</strong> <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 class="goodsList"> <strong>打印机</strong> <a href="#">耳机</a> <a href="#">音响/音色</a> <a href="#">无线音箱</a> <a href="#">收音机</a> <a href="#">麦克风</a> <a href="#">MP3/MP4</a> <a href="#">专业音频</a> </div> <div class="goodsList"> <strong>照相机</strong> <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 class="goodsList"> <strong>索尼</strong> <a href="#">学生平板</a> <a href="#">点读机</a> <a href="#">录音笔</a> <a href="#">电子书</a> <a href="#">电子词典</a> <a href="#">复读机</a> </div> </div> </div><!--chooseGoods的结尾标签--> <!--5张轮播图--> <div class="pics"> <!--五张图片--> <a class="pic active" href="javascript:;"> <img src="素材/focus-carousel/1.jpg"/> </a> <a class="pic" href="javascript:;"> <img src="素材/focus-carousel/2.jpg"/> </a> <a class="pic" href="javascript:;"> <img src="素材/focus-carousel/3.jpg"/> </a> <a class="pic" href="javascript:;"> <img src="素材/focus-carousel/4.jpg"/> </a> <a class="pic" href="javascript:;"> <img src="素材/focus-carousel/5.jpg"/> </a> <!--左右箭头--> <div class="toLeft"> <a href="javascript:;" ><img src="素材/focus-carousel/pre2.jpg"/></a> </div> <div class="toRight"> <a href="javascript:;" ><img src="素材/focus-carousel/pre.jpg"/></a> </div> <!--五个圆点--> <div class="fiveDots"> <span class="dot" id="dots-active"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div><!--5张轮播图尾部标签--> <!--右边的慕课快报--> <div class="news"> <a class="mukeNews" href="#">慕课报</a> <a class="more" href="#">更多></a> <div class="everyNews"> <a href="#"><strong>[特惠]</strong>精选图书每满150减50</a> </div> <div class="everyNews"> <a href="#"><strong>[公告]</strong>因广州图书仓搬仓升级配送延迟</a> </div> <div class="everyNews"> <a href="#"><strong>[特惠]</strong>爆款手机12期免息 抽奖赢电视</a> </div> <div class="everyNews"> <a href="#"><strong>[公告]</strong>广东、福建受台风影响配送延迟</a> </div> <div class="everyNews"> <a href="#"><strong>[特惠]</strong>大闸蟹领券满399减180</a> </div> <!--小图标--> <div class="iconPart"> <div class="icon"> <a href="#"><img src="素材/icon/1.jpg" /></a> <p>话费</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/2.jpg" /></a> <p>机票</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/3.jpg" /></a> <p>电影票</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/4.jpg" /></a> <p>游戏</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/5.jpg" /></a> <p>彩票</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/6.jpg" /></a> <p>加油卡</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/7.jpg" /></a> <p>酒店</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/8.jpg" /></a> <p>火车票</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/9.jpg" /></a> <p>众筹</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/10.jpg" /></a> <p>理财</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/11.jpg" /></a> <p>礼品卡</p> </div> <div class="icon"> <a href="#"><img src="素材/icon/12.jpg" /></a> <p>白条</p> </div> <div class="ad"> <img src="素材/ad.jpg"/> </div> </div> </div><!--慕课快报的结尾标签--> </div><!--banner图部分尾部标签--> <!--楼层区域--> <div class="firstFloor"> <div class="one">123</div> <div class="two">456</div> </div> </div><!--这是main的尾标签--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="finalHomeworkjs/finnalHomework.js"></script> </body> </html>
*{margin:0px;padding:0px;}
.main{
background-color:#f3f5f7;
}
/*公用部分*/
/*.changeWhite{
background-color: white;
}
.changeBlue{
background-color: #B0E2FF;
}*/
a{
text-decoration: none;
color:black;
}
a:hover{
color:red;
}
/*头部*/
.header{
width:1100px;
height:50px;
border-bottom:1px solid black;
margin:0 auto;
position: relative;
}
.headBtn{
padding-top:10px;
/*border:1px solid red;*/
width:400px;
}
.headBtn a {margin-right:20px;}
.menus{
height:50px;
/*border:1px solid black;*/
position:absolute;
right:0px;
top:8px;
z-index:99999;/*为了不让搜索栏挡住头部的下拉菜单*/
}
.firstMenu{
/*height:100px;*/
width:100px;
/*border:solid 1px black;*/
float:right;
}
.secondMenu{
display:none;
height:30px;
line-height: 30px;
text-align: center;
}/*头部结束*/
/*LOGO部分*/
.logoPart{
width:1100px;
height:100px;
border:1px solid black;
margin:0 auto;
position: relative;
z-index: 9999;
}
.logo ,.searcher, .shopCar{
float:left;
}
.logo{
margin-top:20px;
}
.searcher{
margin-top:30px;
margin-left:150px;
/*border:solid red 2px;*/
}
.searchInput,.searchBtn{float:left;}
.searchInput{
width:400px;
height:30px;
}
.searchBtn{
width:100px;
height:34px;
background-color: black;
color:white;
line-height: 30px;
text-align: center;
border:none;
}
.shopCar{
width:150px;
position:absolute;
right:0px;
top:25px;
padding:10px;
background-color: red;
}
.toRed{
color:white;
}
.shopCar a:hover{
color:red;
}
/*购物车子菜单*/
.shopCarSecondMenu{
display:none;
border:1px solid black;
width:250px;
position:relative;
left:-9px;
top:10px;
height:350px;
overflow-y:scroll;/*给子菜单添加高度和overflow用来造成下拉效果*/
}
.shopCarSecondMenu h3{color:black;}
.myGoods a{color:black;};
.goPay{
height:50px;
line-height: 50px;
}
.goPay a{
display: inline-block;
height:30px;
line-height: 30px;
background-color: red;
color:white;
}
.goPay a:hover{
background-color: white;
color:red;
}
/*LOGO部分结束*/
/*导航部分*/
.nav{
border:1px solid black;
position: relative;
height:50px;
background-color: black;
}
.nav ul{
overflow: hidden;
zoom:1;
/*border:1px solid red;*/
height:50px;
margin-left:420px;
}
.nav ul li{
float:left;
list-style: none;
margin-right:40px;
font-size:18px;
line-height: 50px
}
.nav ul li a{
color:white;
}
.nav ul li a:hover{
color:red;
}/*导航部分结束*/
/*banner图部分*/
.banner{
width:1100px;
height:550px;
margin:0 auto;
border:2px solid black;
/*position: relative;*/
}
.chooseGoods{
width:200px;
height:550px;
background-color:red;
position: relative;
top:-53px;
/*color:white;*/
}
.pics{
width:640px;
height:550px;
/*background-color: gray;*/
position:relative;
top:-550px;
left:210px;
}
.news{
width:250px;
height:550px;
background-color:white;
position: relative;
top:-1100px;
left:855px;
}
/*父菜单*/
.goods span{
display:inline-block;
position:relative;
left:180px;
top:-25px;
}
.goods{
background-color: red;
padding-top:0.5px;
}
.goodsHeadLine{
height:50px;
line-height:50px
}
/*子菜单*/
.goodsSecond{
display:none;
width:652px;
height:550px;
background-color: white;
position: absolute;
left:200px;
top:50px;
z-index: 9999;
border:2px solid black;
}
.goodsList{
margin-bottom:30px;
}
.goodsList a{margin-left:20px;}
/*轮播图部分*/
.pics{
position: relative;
/*top:-300px;*/
}
.pic img{
width:645px;
height:550px;
}
.pic{
display:none;
position: absolute;
}
/*左右箭头*/
.toLeft{
position:relative;
top:207px;
left:10px;
border:solid 1px black;
width:50px;
height:50px;
}
.toLeft a{
position:absolute;
left:12px;
top:12px;
}
.toRight{
position:relative;
left:550px;
top:160px;
border:solid 1px black;
width:50px;
height:50px;
}
.toRight a{
position:absolute;
left:15px;
top:12px;
}
/*5个圆点*/
.fiveDots{
position:relative;
/*border:2px solid black;*/
top:400px;
left:207px;
/*right:100px;
bottom:50px;*/
}
.fiveDots span{
display:inline-block;
width:15px;
height:15px;
border-radius: 50%;
background-color: #2B2B2B;
margin-left:10px;
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
}
#dots-active{/*用class就不行，不知道为什么*/
background-color: white;
}/*轮播图结束*/
/*右边的新闻区域*/
.mukeNews{
color:red;
font-size:18px;
margin-right:120px;
margin-left:20px;
}
.everyNews{
font-size:14px;
margin-top:10px;
margin-left:5px;
}
.iconPart{
width:250px;
height:180px;
border:3px solid #B0E2FF;
position: relative;
top:20px;
}
.icon{
float:left;
width:60px;
height:60px;
border:solid #B0E2FF 1px;
}
.icon a{margin-left:10px;}
.icon p{margin-left:10px;}
.ad img{
height:170px;
width:250px;
}/*新闻区结束*/
/*楼层区域*/
/*一楼*/
.firstFloor{
border:3px solid yellow;
width:1100px;
height:100px;
margin:0 auto;
position: relative;
top:500px;
/*background-color: white;*/
}
.one,.two{
width:50px;
height:50px;
border:solid 1px red;
float:left;/*?????????????????????????????????????????????????????????????*/
/*display: inline;
margin-right:50px;*/
}
/*.firstHeadLine{
width:1000px;
height:100px;
border:2px blue solid;
margin:0 auto;
}*/
/*.theBall{
border:1px solid black;
width:30px;
height:30px;
border-radius: 50%;
background-color: #2B2B2B;
margin-left:10px;
color:white;
text-align:center;
line-height:30px;
}*/
/*.theBall,.headName,.brandOne{
float:left;
/*margin-left:20px;
width:20px;
height:20px;
border:1px red solid;
}*/
/*.brandOne{
/*float:right;*/
/*margin-right:20px;*/
/*margin-left:20px;
}*/
/*VIP区域*/
.active{display:block;}
.changeWhite{
background-color: white;
}
.changeBlue{
background-color: #B0E2FF;
}/*头部*/
$('.firstMenu').mouseover(function(event){
$(this).find('.secondMenu').show();
$(this).addClass('changeWhite');
})
$('.firstMenu').mouseout(function(event){
$(this).children('.secondMenu').hide()
$(this).removeClass('changeWhite');
})
$('.secondMenu').mouseover(function(event){
$(this).addClass('changeBlue');
})
$('.secondMenu').mouseout(function(event){
$(this).removeClass('changeBlue');
})
/*购物车*/
$('.shopCar').mouseover(function(){
$('.shopCarSecondMenu').show();
$('.shopCarSecondMenu').addClass('changeWhite');
/*$('.shopCar').css('backgrounColor','white');*/
$('.carPic').attr('src',"素材/icon/25.jpg");
})
$('.shopCar').mouseout(function(){
$('.shopCarSecondMenu').hide();
$('.carPic').attr('src',"素材/icon/26.jpg");
})
$('.myGoods').mouseover(function(){
$(this).addClass('changeBlue');
$(this).siblings().removeClass('changeBlue');
})
/*banner图部分*/
/*图片轮播*/
var index=0;
var numberOfPics=$('.pic').length;
//封装一个能够让图片自动切换的函数
function mySlider(){
index++;
if(index>=numberOfPics){
index=0;
}
$('.pic').eq(index).addClass('active');
$('.pic').eq(index).siblings().removeClass('active');
$('.dot').eq(index).attr('id','dots-active');
$('.dot').eq(index).siblings().removeAttr('id');
}
//当鼠标没放在图片上时，图片每隔2秒自动轮播
$('.pics').mouseout(function(){
picAuto=setInterval(function(){
mySlider();
},1000);
})
//调用mouseout这个方法，使得自动执行mouseout事件，使页面刚加载出来就自动轮播
$('.pics').mouseout();
//当鼠标放在图片上时，清除间歇调用(setInterval),停止图片轮播
$('.pics').mouseover(function(){
clearInterval(picAuto);
})
//点击右边箭头切换图片
$('.toRight').click(function(){
mySlider();
}).mouseover(function(){
$(this).addClass('changeBlue');
}).mouseout(function(){
$(this).removeClass('changeBlue');
})
//点击左边箭头切换图片
$('.toLeft').click(function(){
index--;
if(index<0){
index=numberOfPics-1;
}
$('.pic').eq(index).addClass('active');
$('.pic').eq(index).siblings().removeClass('active');
}).mouseover(function(){
$(this).addClass('changeBlue');
}).mouseout(function(){
$(this).removeClass('changeBlue');
})
//点击圆点切换图片
$('.fiveDots').children('span').click(function(){//只能用切换id，用class或设置css就没法让圆点变白
//用index获取当前点击的圆点的索引
index=$(this).index();
$('.pic').eq(index).addClass('active');
$('.pic').eq(index).siblings().removeClass('active');
$(this).attr('id','dots-active');
$(this).siblings().removeAttr('id');
})/*图片轮播部分结束*/
/*左边的商品分类区域*/
$('.goods').mouseover(function(){
index=$(this).index();
$('.goodsSecond').eq(index).addClass('active');
$('.goodsSecond').eq(index).siblings().removeClass('active');
$(this).addClass('changeWhite');
$(this).siblings().removeClass('changeWhite');
})
$('.goodsSecond').mouseover(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
})
/*$('.goodsSecond').mouseout(function(){
$('.goodsSecond').removeClass('active');
$('.goods').removeClass('changeWhite');
})*/
$('.chooseGoods').mouseout(function(){
$('.goodsSecond').removeClass('active');
$('.goods').removeClass('changeWhite');
})楼层区时，我想让一些元素保持在一行上，所以用来float，但为什么把几个元素设置成float后，这几个div都消失不见了呢，之前从没有发生过这样的事情，到底是什么问题？？？？？？？？
5
收起
正在回答 回答被采纳积分+1
3回答
山河远阔ZZ
2019-01-28 19:02:30
relative让这些元素位置变动的，所以这三块banner虽然改变了位置，但是并没有脱离文档流，因为是使用的relative，所以原本常规流里的位置做了保留，这才导致后面的元素出现问题的。
给里面的元素设置浮动，布局会改变，可以参考下图：
同学你可以看一下，这个效果图是不是你想要的效果，如下：
1、banner区域布局建议：
一般情况下，看到这样的布局，会先把它看成是一个整体，就是banner区域；
然后banner区域里面分成三个块，分别是左侧、中间、右侧，因为这三个部分是块元素构成，所以一般情况下， 是使用浮动了来进行布局的。
里面有特殊布局情况下，例如：轮播图，是可以在css里面去使用定位样式来达到效果的。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星