老师为什么我的友情链接区会往上跑

<!DOCTYPE html>

<html>

<head>

<title>jquery大作业</title>

</head>

<body>

<a href="#">手机逛慕课</a>

</div>

<li>

<ul>

<li>已买到的宝贝</li>

</ul>

</li>

<li>

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</li>

<li>

</li>

<li>

<ul>

<li>已卖出的宝贝</li>

<li>出售中的宝贝</li>

<li>卖家服务市场</li>

<li>卖家培训中心</li>

</ul>

</li>

<li>

<ul>

<li>消费者客服</li>

</ul>

</li>

</ul>

</div>

<form>

</form>

</div>

<h3>最新加入的商品</h3>

<ul>

<li class="one"><img src="img/cart/1.png" /><div><p class="name">addidas 阿迪达斯训练男子</p><p>￥335 x 1</p></div><span>X</span></li>

<li><img src="img/cart/2.png" /><div><p class="name">玉兰油多效修护三部曲套装</p><p>￥199 x 2</p></div><span>X</span></li>

<li><img src="img/cart/3.png" /><div><p class="name">Appple iPhone 7(A1660)</p><p>￥6188 x 1</p></div><span>X</span></li>

<li><img src="img/cart/4.png" /><div><p class="name">飞利浦面条机HR56/31</p><p>￥659 x 4</p></div><span>X</span></li>

<li><img src="img/cart/5.png" /><div><p class="name">罗技G29力反馈游戏方向</p><p>￥2999 x 1</p></div><span>X</span></li>

<li><img src="img/cart/1.png" /><div><p class="name">addidas 阿迪达斯训练男子</p><p>￥335 x 1</p></div><span>X</span></li>

<li><img src="img/cart/2.png" /><div><p class="name">玉兰油多效修护三部曲套装</p><p>￥199 x 2</p></div><span>X</span></li>

<li><img src="img/cart/3.png" /><div><p class="name">Appple iPhone 7(A1660)</p><p>￥6188 x 1</p></div><span>X</span></li>

<li><img src="img/cart/4.png" /><div><p class="name">飞利浦面条机HR56/31</p><p>￥659 x 4</p></div><span>X</span></li>

<li><img src="img/cart/5.png" /><div><p class="name">罗技G29力反馈游戏方向</p><p>￥2999 x 1</p></div><span>X</span></li>

</ul>

</div>

<p>共27件商品共计￥0.00</p>

<form>

</form>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</div>

<a href="#">手机壳</a><a href="#">贴膜</a><a href="#">手机储存卡</a><a href="#">数据线</a><a href="#">充电器</a><a href="#">手机耳机</a><a href="#">创意配件</a><a href="#">手机饰品</a><a href="#">手机电池</a><a href="#">苹果周边</a><a href="#">移动电源</a><a href="#">蓝牙耳机</a><a href="#">手机支架</a><a href="#">车载配件</a><a href="#">拍照配件</a>

</div>

</div>

</div>

</div>

<a href="#">智能手环</a><a href="#">智能手表</a><a href="#">智能眼镜</a><a href="#">智能机器人</a><a href="#">运动跟踪器</a><a href="#">健康监测</a><a href="#">智能配饰</a><a href="#">智能家居</a><a href="#">体感车</a><a href="#">无人机</a><a href="#">其他配件</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="rRed"><span>[特惠] </span>精选图书每满150减50</p>

<p class="rRed"><span>[公告] </span>因广州图书仓搬仓升级配送延迟</p>

<p class="rRed"><span>[特惠] </span>爆款手机12期免息抽奖赢电视</p>

<P class="rRed"><span>[公告] </span>广东、福建受台风影响配送延迟</P>

<p class="rRed"><span>[特惠] </span>大闸蟹领券满399减180</p>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</div>

<table>

<tr>

<td><img src="img/floor/1.png" /><p>1匡威男棒球开衫外套2015</p><p class="fRed">￥479</p></td>

<td><img src="img/floor/1.png" /><p>adidas 阿迪达斯训练男子</p><p class="fRed">￥335</p></td>

<td><img src="img/floor/1.jpg" /><p>必迈BMAI——体织跑步短袖T恤</p><p class="fRed">￥159</p></td>

<td><img src="img/floor/1.jpg" /><p>NBA袜子半毛圈运动高邦棉袜</p><p class="fRed">￥65</p></td>

<td><img src="img/floor/1.png" /><p>特步官方运动帽男女帽子2016</p><p class="fRed">￥69</p></td>

<td><img src="img/floor/1.png" /><p>KELME足球训练防寒防风手套</p><p class="fRed">￥4999</p></td>

</tr>

<tr>

<td><img src="img/floor/2.jpg" /><p>战地吉普三合一冲锋衣</p><p class="fRed">￥289</p></td>

<td><img src="img/floor/2.jpg" /><p>探路者户外男士徒步鞋</p><p class="fRed">￥369</p></td>

<td><img src="img/floor/1.png" /><p>羽绒服2015秋冬新款轻薄男士</p><p class="fRed">￥399</p></td>

<td><img src="img/floor/1.png" /><p>溯溪鞋涉水鞋户外鞋</p><p class="fRed">￥689</p></td>

<td><img src="img/floor/3.jpg" /><p>旅行背包多功能双肩背包</p><p class="fRed">￥269</p></td>

<td><img src="img/floor/3.jpg" /><p>户外旅行双肩背包OS0099</p><p class="fRed">￥99</p></td>

</tr>

</table>

</div>

<table>

<tr>

<td><img src="img/floor/6.jpg" /><p>2adidas 阿迪达斯训练男子</p><p class="fRed">￥335</p></td>

</tr>

</table>

</div>

<table>

<tr>

<td><img src="img/floor/4.jpg" /><p>3必迈BMAI——体织跑步短袖T恤</p><p class="fRed">￥335</p></td>

</tr>

</table>

</div>

</div>

<table>

<tr>

<td><img src="img/floor/5.jpg" /><p>1韩束红石榴鲜活水盈七件套装</p><p class="fRed">￥169</p></td>

<td><img src="img/floor/5.jpg" /><p>温碧泉八杯水亲亲水润五件套装</p><p class="fRed">￥198</p></td>

<td><img src="img/floor/5.jpg" /><p>御泥坊红酒透亮矿物蚕丝面膜贴</p><p class="fRed">￥79.9</p></td>

<td><img src="img/floor/5.jpg" /><p>吉列手动剃须刀隐致护</p><p class="fRed">￥228</p></td>

<td><img src="img/floor/5.jpg" /><p>Mediheal水润保湿面膜</p><p class="fRed">￥119</p></td>

<td><img src="img/floor/5.jpg" /><p>纳益其尔芦荟舒缓保湿凝胶</p><p class="fRed">￥39</p></td>

</tr>

<tr>

<td><img src="img/floor/1.png" /><p>宝拉珍选基础护肤旅行四件套</p><p class="fRed">￥299</p></td>

<td><img src="img/floor/1.png" /><p>温碧泉透芯润五件套装</p><p class="fRed">￥257</p></td>

<td><img src="img/floor/1.png" /><p>玉兰油多效修护三部曲套装</p><p class="fRed">￥199</p></td>

<td><img src="img/floor/1.png" /><p>LOREAL火山岩控油清痘洁面膏</p><p class="fRed">￥36</p></td>

<td><img src="img/floor/1.png" /><p>百雀羚水嫩倍现盈透精华水</p><p class="fRed">￥139</p></td>

<td><img src="img/floor/1.png" /><p>珀莱雅新柔皙莹润三件套</p><p class="fRed">￥99</p></td>

</tr>

</table>

</div>

<table>

<tr>

<td><img src="img/floor/1.jpg" /><p>2adidas 阿迪达斯训练男子</p><p class="fRed">￥335</p></td>

</tr>

</table>

</div>

<table>

<tr>

<td><img src="img/floor/1.png" /><p>3必迈BMAI——体织跑步短袖T恤</p><p class="fRed">￥159</p></td>

</tr>

</table>

</div>

<table>

<tr>

<td><h3>消费者保障</h3></td>

</tr>

</table>

</div>

</body>

</html>

*{padding:0px;margin:0px;text-decoration:none;list-style:none;}

.top{width:100%;height:41px;background:#f3f5f7;font-size:13px;}

.top .main{width:1100px;margin:0 auto;height:40px;line-height:40px;border-bottom:1px solid gray;}

.top .main .left{width:600px;height:40px;float:left;}

.top .main .left .login{color:red;margin-left:10px;}

.top .main .left a:hover{color:red;cursor:pointer;}

.top .main .right{width:500px;height:40px;float:left;}

.top .main .right .list:hover{cursor:pointer;}

.top .main .right .list>li{display:inline-block;float:left;margin-right:5px;width:85px;padding-left:10px;}

.top .main .right .list>li div{width:83px;margin-left:-10px;padding-left:10px;}

.top .main .right .list>li div:hover{color:red;}

.top .main .right .list ul{display:none;background:white;border:1px solid gray;margin-left:-10px;position:relative;z-index:1;}

.top .main .right .list ul li{line-height:30px;width:83px;padding-left:10px;}

.top .main .right .list ul li:hover{background-color:#cdd0d4;;}

.logo{width:100%;height:130px;background:#f3f5f7;}

.logo .main{width:1100px;height:130px;margin:0 auto;position:relative;font-size:13px;}

.logo .main .tu{padding-left:10px;padding-top:35px;}

.logo .main .tu:hover{cursor:pointer;}

.logo .main .form{width:560px;height:35px;position:absolute;left:50%;margin-left:-295px;top:50%;margin-top:-17.5px;}

.logo .main .form input{width:490px;height:35px;float:left;}

.logo .main .form button{width:65px;height:35px;color:white;background:black;border:none;float:left;}

.logo .main .form button:hover{cursor:pointer;}

.logo .main .cart{position:absolute;top:50%;left:880px;width:160px;height:35px;background:red;margin-top:-17.5px;line-height:35px;color:white;border-radius:2px;}

.logo .main .cart:hover{color:red;background-color:white;box-shadow:0px 0px 20px 0px rgba(8, 1, 3,0.3);}

.logo .main .cart .tu1,.tu2{margin:0px 12px;vertical-align:middle;}

.logo .main .cartMenu{width:305px;position:absolute;top:50%;margin-top:17.5px;left:880px;box-shadow:0 0 5px 2px rgba(8,1,3,0.3);border-radius:2px;background-color:white;z-index:999;}

.logo .main .cartMenu h3{font-size:13px;height:40px;line-height:40px;padding-left:17px;}

.logo .main .cartMenu .scroll{overflow:auto;height:290px;}

.logo .main .cartMenu .scroll li{width:267px;height:55px;position:relative;font-size:12px;border-bottom:1px solid #C0C0C0;margin:0 auto;}

.logo .main .cartMenu .scroll li:hover{background-color:#f3f5f7;}

.logo .main .cartMenu .scroll .one{border-top:1px solid #C0C0C0;}

.logo .main .cartMenu .scroll li img{margin-left:7px;width:50px;height:50px;padding-top:2.5px;}

.logo .main .cartMenu .scroll li div{position:absolute;top:10px;margin-left:66px;}

.logo .main .cartMenu .scroll li div .name:hover{color:red;cursor:pointer;}

.logo .main .cartMenu .scroll li span{position:absolute;top:12px;left:252px;}

.logo .main .cartMenu .last{width:303px;height:60px;line-height:60px;position:relative;}

.logo .main .cartMenu .last p{margin-left:13px;font-size:12px;}

.logo .main .cartMenu .last button{width:94px;height:40px;position:absolute;left:185px;top:50%;margin-top:-20px;background-color:red;border:none;color:white;border-radius:3px;}

.nav{width:100%;height:45px;background-color:#07111b;font-size:14px;color:white;}

.nav .navContent{width:1100px;height:45px;margin:0 auto;}

.nav .navContent ul{margin-left:20.5%;}

.nav .navContent ul li{float:left;line-height:45px;margin-right:50px;}

.nav .navContent ul li:hover{color:red;cursor:pointer;}

.banner{width:1100px;margin:0 auto;position:relative;height:600px;}

.banner .menu{width:195px;height:550px;font-size:14px;background-color:red;color:white;position:absolute;top:-50px;opacity:0.85;}

.banner .menu h3{height:50px;line-height:50px;font-size:15px;padding-left:18px;}

.banner .menu h3 img{vertical-align:middle;margin-right:8px;}

.banner .menu ul li{padding-left:14px;height:35px;line-height:35px;position:relative;}

.banner .menu ul li span{position:absolute;right:11px;}

.banner .commodity{height:585px;width:655px;position:absolute;left:195px;font-size:13px;overflow:hidden;}

.banner .commodity .assortment{background-color:white;height:580px;width:650px;border:1px solid gray;display:none;box-shadow:0px 0px 4px 1px rgba(8, 1, 3,0.3);}

.banner .commodity .assortment .con{margin-top:38px;position:relative;height:30px;}

.banner .commodity .assortment .con .title{width:80px;display:inline-block;font-weight:bold;}

.banner .commodity .assortment .con span{margin-left:11px;color:#C0C0C0}

.banner .commodity .assortment .con .title p{text-align:right;}

.banner .commodity .assortment .con .list{left:115px;margin-right:50px;position:absolute;top:0px;height:29px;}

.banner .commodity .assortment .con .list a{margin-right:10px;color:black;}

.banner .commodity .assortment .con .list a:hover{color:red;}

.banner .center{height:500px;width:650px;position:absolute;left:195px;}

.banner .center .lbt{margin-left:6px;margin-top:6px;width:644px;height:494px;position:relative;}

.banner .center .lbt .image{overflow:hidden;}

.banner .center .lbt .image img{width:644px;height:494px;display:none;}

.banner .center .lbt .image .show{display:block}

.banner .center .lbt .button{position:absolute;width:48px;height:82px;top:50%;margin-top:-41px;text-align:center;line-height:82px;}

.banner .center .lbt .prev{left:0px;}

.banner .center .lbt .next{right:0px;}

.banner .center .lbt .button:hover{background-color:black;opacity:0.8;}

.banner .center .lbt .button img{vertical-align:middle;}

.banner .center .lbt .dots{position:absolute;width:120px;height:20px;bottom:10px;left:50%;margin-left:-60px;}

.banner .center .lbt .dots .dot{margin-left:4px;width:10px;height:10px;border:1px solid white;background-color:gray;display:inline-block;border-radius:50%;}

.banner .center .lbt .dots .active{background-color:white;border:1px solid gray;}

.banner .right2{height:494px;width:245px;position:absolute;left:852px;top:6px;}

.banner .right2 .rtop{border:1px solid #A9A9A9;height:187px;width:245px;font-size:12px;border-bottom:none;}

.banner .right2 .rtop p{height:25px;margin-left:18px;color:#696969;}

.banner .right2 .rtop .rRed span{font-weight:bold;color:black;}

.banner .right2 .rtop .rfirst{height:50px;line-height:50px;}

.banner .right2 .rtop .rfirst .mukuaibao{color:red;font-size:17px;}

.banner .right2 .rtop .rfirst .more{color:#A9A9A9;margin-left:120px;}

.banner .right2 .rtop .rfirst .more:hover{cursor:pointer;}

.banner .right2 .rtop .rRed:hover{cursor:pointer;color:red;}

.banner .right2 .middle{height:206px;width:247px;}

.banner .right2 .middle table{height:204px;width:247px;border:1px solid #A9A9A9;border-collapse:collapse;}

.banner .right2 .middle table td{height:68px;width:25%;border:1px solid #A9A9A9;text-align:center;}

.banner .right2 .middle table td:hover{cursor:pointer;}

.banner .right2 .middle table td img{width:23px;height:23px;}

.banner .right2 .middle table td p{color:#A9A9A9;font-size:13px;}

.banner .right2 .bottom{height:100px;width:247px;}

.banner .right2 .bottom img{width:247px;height:100px;}

.banner .right2 .bottom img:hover{cursor:pointer;}

.floor{width:100%;height:auto;position:absolute;margin-top:-100px;border:1px solid green;}

.floor .fContent1{width:1100px;height:auto;margin:0 auto;}

.floor .fTop{height:83px;width:100%;border-bottom:1px solid red;}

.floor .fTop .fTitle{font-size:22px;margin-top:36px;display:inline-block;height:35px;line-height:35px;}

.floor .fTop .fTitle .tubiao{text-align:center;line-height:24px;background-color:black;border-radius:50%;width:24px;height:24px;margin-right:15px;color:white;font-size:13px;border:1px solid black;display:inline-block;}

.floor .fTop .classify{display:inline-block;font-size:13px;height:55px;color:#A9A9A9;float:right;margin-top:29px;}

.floor .fTop .classify span{display:inline-block;height:55px;margin-right:10px;margin-left:10px;line-height:55px;text-align:center;}

.floor .fTop .classify span:hover{color:red;cursor:pointer;}

.floor .fTop .classify .jiantou{background-image:url(../img/floor-arrow.png);background-repeat:no-repeat;background-position:50% 100%;}

.floor .fImg1{width:100%;height:480px;top:83px;display:none;}

.floor .fImg1 table{width:100%;height:480px;}

.floor .fImg1 table td{text-align:center;width:16.6%;height:236px;border:1px solid white;}

.floor table td img{margin-bottom:15px;}

.floor table td p{font-size:12px;margin-bottom:5px;}

.floor table td .fRed{color:red;font-size:14px;}

.floor table td:hover{box-shadow:0px 0px 3px 0px rgba(8, 1, 3,0.6);}

.floor .fImg2{width:100%;height:240px;display:none;}

.floor .fImg2 table{width:16.6%;height:240px;}

.floor .fImg2 table td{text-align:center;width:100%;height:236px;border:1px solid white;}

.floor .fImg3{width:100%;height:240px;display:none;}

.floor .fImage{display:block;}

.floor .fImg3 table{width:16.6%;height:240px;}

.floor .fImg3 table td{text-align:center;width:100%;height:236px;border:1px solid white;}

.floor .fContent2{width:1100px;height:auto;margin:0 auto;}

.link{width:1100px;height:1100px;border:1px solid blue;margin:0 auto;}

$(document).ready(function(){

/*顶部*/

var rightDiv=$('.right div');

rightDiv.hover(function(){

$(this).nextAll().css('display','inline-block');

$(this).parent().siblings().find('ul').css('display','none');

$(this).css({'border-left':'1px solid gray','border-right':'1px solid gray','background-color':'white'}).parent().siblings().find('div').css({'border':'none','background-color':'#f3f5f7'});

$(this).find('img').attr('src','img/icon/24.png');

},function(){

$(this).find('img').attr('src','img/icon/21.png');

});

$('.right ul').mouseleave(function(){

$('.list').find('ul').css('display','none');

rightDiv.css({'border':'none','background-color':'#f3f5f7'});

});

/*logo区*/

var cartMenu=$('.logo .cartMenu');

cartMenu.hide();

$('.cart').hover(function(){

$(this).find('.tu1').attr('src','img/icon/25.png');

$(this).find('.tu2').attr('src','img/icon/22.png');

$(this).find('span').css('color','#CDCDCD');

cartMenu.show();

},function(){

$(this).find('.tu1').attr('src','img/icon/26.png');

$(this).find('.tu2').attr('src','img/icon/23.png');

$(this).find('span').css('color','white');

cartMenu.hide();

});

cartMenu.hover(function(){

$(this).show();

},function(){

$(this).hide();

});

/*商品分类*/

var inde=0,

commodity=$('.commodity'),

assortment=$('.assortment'),

bannerLi=$('.banner .menu li');

bannerLi.hover(function(){

commodity.css('z-index','1');

$(this).css({'background-color':'white','color':'red'}).siblings().css({'background-color':'red','color':'white'});

inde=$(this).index();

if(inde==0||inde==10||inde==12){

assortment.eq(0).css('display','block').siblings().css('display','none');

}

if(inde==1||inde==4||inde==7||inde==9||inde==11||inde==13){

assortment.eq(1).css('display','block').siblings().css('display','none');

}

if(inde==2){

assortment.eq(2).css('display','block').siblings().css('display','none');

}

if(inde==3||inde==5||inde==6||inde==8){

assortment.eq(3).css('display','block').siblings().css('display','none');

}

assortment.hover(function(){

commodity.css('z-index','1');

$(this).css('display','block');

bannerLi.eq(inde).css({'background-color':'white','color':'red'});

},function(){

$(this).css('display','none');

bannerLi.css({'background-color':'red','color':'white'});

commodity.css('z-index','0');

})

},function(){

assortment.css('display','none');

$(this).css({'background-color':'red','color':'white'});

commodity.css('z-index','0');

})

/*轮播图*/

var index=0,

img=$('.center .image img'),

lbt=$('.center .lbt '),

len=img.length,

timer=null,

prev=$('.lbt .prev'),

next=$('.lbt .next'),

dot=$('.lbt .dot');

lbt.mouseleave(function(){

timer=setInterval(function(){

index++;

if(index==len){

index=0;

}

changeImg();

},1000);

});

lbt.mouseenter(function(){

if(timer){

clearInterval(timer);

}

});

lbt.mouseleave();

/*上一张下一张*/

prev.click(function(){

index--;

if(index==-1){

index=len-1;

}

changeImg();

});

next.click(function(){

index++;

if(index==len){

index=0;

}

changeImg();

})

/*小圆点*/

dot.click(function(){

index=$(this).index();

changeImg();

})

/*切换图片*/

function changeImg(){

img.eq(index).css('display','block').siblings().css('display','none');

dot.eq(index).addClass('active').siblings().removeClass('active');

}

/*慕快报*/

$('.rRed').hover(function(){

$(this).find('span').css('color','red');

},function(){

$(this).find('span').css('color','black');

})

/*楼层区*/

var fIndex;

$('.fContent1 .classify span').click(function(){

$(this).addClass('jiantou').siblings().removeClass('jiantou');

fIndex=$(this).index();

$('.fContent1').find('.x').eq(fIndex).addClass('fImage').siblings().removeClass('fImage');

})

$('.fContent2 .classify span').click(function(){

$(this).addClass('jiantou').siblings().removeClass('jiantou');

fIndex=$(this).index();

$('.fContent2').find('.x').eq(fIndex).addClass('fImage').siblings().removeClass('fImage');

})

慕雪5599117 2019-03-05

源自：项目：JQ实现瀑布流 5-2 作业题

收起

2回答

Steve007 2019-03-06 09:59:48

同学，你好。如果一定要使用绝对定位，可以给绝对定位后面的元素设置margin-top值为绝对定位元素的高，如图：

祝学习愉快！

收起回答

Steve007 2019-03-05 17:43:20

同学，你好。这是因为给floor盒子设置了绝对定位，会脱离文档流，不占据位置，这里将绝对定位的样式去掉就好了，如图：

祝学习愉快！

收起回答

提问者慕雪5599117 #1

老师如果一定要用到绝对定位那要怎么解决这样的问题呢

2019-03-05 21:33:48
提问者慕雪5599117 #2

我发现把绝对定位去掉了之后确实不会往上跑了但是这样就不能点击floor顶部的区域了这怎么解决呢

2019-03-05 21:54:59

相似问题

3-7作业，友情链接区用什么格式，老师请问

为什么这里会采用超链接

友情链接区和页脚区怎么添加背景色？

为什么此时是蓝色和红色重叠，但是橘色的文字也出现了重叠？

我什么我点一个链接其它链接的样式也发生了改变

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

老师为什么我的友情链接区会往上跑

老师为什么我的友情链接区会往上跑

正在回答回答被采纳积分+1

请选择置顶位置