老师 帮忙看看

老师 帮忙看看

html

<!-- 楼层区 -->

<div class="floor">

<!-- 楼层区1 -->

<!-- 上面部分 -->

<div class="floor-arrow1">

<div class="floor-top">

<div class="floor-top-left">

<span class="floor-top-left1">1F</span>

<span class="floor-top-left2">服装鞋包</span>

</div>

<div class="floor-top-right">

<span class="floor-top-right1 floor-top-right2">大牌</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">男装</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">女装</span>

</div>

<!-- 三角形图标 -->

<div class="lf1"></div>

<div class="md1"></div>

<div class="rg1"></div>

</div>


<!-- 下面部分 -->

<div class="floor-bottom">

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">adidas 阿迪达斯 训练男子</div>

<div class="march">￥335</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥4999</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/2.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/2.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/3.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/3.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

<!-- 隐藏部分 -->

<div class="floor-bottom2">

<div class="floor-bottom1 hiden">

<img src="images/floor/6.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1 hiden">

<img src="images/floor/4.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

</div>

<!-- 楼层区2 -->

<!-- 上面部分 -->

<div class="floor-arrow2">

<div class="floor-top">

<div class="floor-top-left">

<span class="floor-top-left1">2F</span>

<span class="floor-top-left2">个护美妆</span>

</div>

<div class="floor-top-right">

<span class="floor-top-right1 floor-top-right2">热门</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际大牌</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际名牌</span>

</div>

<!-- 三角形图标 -->

<div class="lf2"></div>

<div class="md2"></div>

<div class="rg2"></div>

</div>


<!-- 下面部分 -->

<div class="floor-bottom">

<div class="floor-bottom1">

<img src="images/floor/5.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/5.jpg">

<div class="cloth">adidas 阿迪达斯 训练男子</div>

<div class="march">￥335</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/5.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥4999</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/2.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/5.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/1.png">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/3.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/3.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

<!-- 隐藏部分 -->

<div class="floor-bottom2">

<div class="floor-bottom1 hiden">

<img src="images/floor/6.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1 hiden">

<img src="images/floor/4.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

</div>

<!-- 楼层3 -->

<!-- 上面部分 -->

<div class="floor-arrow3">

<div class="floor-top">

<div class="floor-top-left">

<span class="floor-top-left1">3F</span>

<span class="floor-top-left2">手机通讯</span>

</div>

<div class="floor-top-right">

<span class="floor-top-right1 floor-top-right2">热门</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际大牌</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际名牌</span>

</div>

<!-- 三角形图标 -->

<div class="lf2"></div>

<div class="md2"></div>

<div class="rg2"></div>

</div>


<!-- 下面部分 -->

<div class="floor-bottom">

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">adidas 阿迪达斯 训练男子</div>

<div class="march">￥335</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥4999</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

<!-- 隐藏部分 -->

<div class="floor-bottom2">

<div class="floor-bottom1 hiden">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1 hiden">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

</div>

<!-- 楼层4 -->

<!-- 上面部分 -->

<div class="floor-arrow4">

<div class="floor-top">

<div class="floor-top-left">

<span class="floor-top-left1">4F</span>

<span class="floor-top-left2">家用电器</span>

</div>

<div class="floor-top-right">

<span class="floor-top-right1 floor-top-right2">热门</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际大牌</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际名牌</span>

</div>

<!-- 三角形图标 -->

<div class="lf2"></div>

<div class="md2"></div>

<div class="rg2"></div>

</div>


<!-- 下面部分 -->

<div class="floor-bottom">

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">adidas 阿迪达斯 训练男子</div>

<div class="march">￥335</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥4999</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

<!-- 隐藏部分 -->

<div class="floor-bottom2">

<div class="floor-bottom1 hiden">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1 hiden">

<img src="images/floor/8-1.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

</div>

<!-- 楼层5 -->

<!-- 上面部分 -->

<div class="floor-arrow5">

<div class="floor-top">

<div class="floor-top-left">

<span class="floor-top-left1">5F</span>

<span class="floor-top-left2">电脑数码</span>

</div>

<div class="floor-top-right">

<span class="floor-top-right1 floor-top-right2">热门</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际大牌</span>

<span class="floor-top-right1">|</span>

<span class="floor-top-right1">国际名牌</span>

</div>

<!-- 三角形图标 -->

<div class="lf2"></div>

<div class="md2"></div>

<div class="rg2"></div>

</div>


<!-- 下面部分 -->

<div class="floor-bottom">

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">adidas 阿迪达斯 训练男子</div>

<div class="march">￥335</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥4999</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1">

<img src="images/floor/9.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

<!-- 隐藏部分 -->

<div class="floor-bottom2">

<div class="floor-bottom1 hiden">

<img src="images/floor/8.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

<div class="floor-bottom1 hiden">

<img src="images/floor/7.jpg">

<div class="cloth">1匡威男棒球开衫外套2015</div>

<div class="march">￥479</div>

</div>

</div>

</div>

</div>

<!-- 友情衔接区 -->

<div class="titl">

<div class="titls">

<div class="titl-t">消费者保障</div>

<div class="titl-b">

<span>保障范围</span>

<span>退货退款流程</span>

<span>服务中心</span>

<span>更多特色服务</span>

</div>

</div>

</div>

css

/*楼层样式*/

.floor{

width: 1400px;

height: 2000px;

margin: 0 auto;

margin-top: 20px;

}

/*楼层上面部分样式*/

.floor-arrow1{

position: relative;

width: 100%;

height: 400px;

}

.floor-top{

border-bottom: 1px solid #f01414;

box-sizing: border-box;

width: 100%;

height: 50px;

line-height: 50px;

}

.floor-top-left{

float: left;

}

.floor-top-left1{

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

background: #07111b;

color:#fff;

font-size: 12px;

line-height: 20px;

text-align: center;

margin-right: 10px;

}

.floor-top-left2{

font-size: 20px;

font-weight: bold;

display: inline-block;

}

.floor-top-right{

float: right;

}

.floor-top-right1:hover{

cursor: pointer;

color: #f01414;

}

.floor-top-right1{

margin:5px;

color:#999;

font-size: 15px;

}

.floor-top-right .floor-top-right2{

color: #f01414;

}

/*楼层下面部分样式*/

.floor-bottom{

position: absolute;

top:70px;

left: 0px;

width: 100%;

height: 400px;

}

 .cloth{

font-size: 14px;

margin-top:20px;

}

 .march{

color: #f01414;

}

.floor-bottom .floor-bottom1{

text-align: center;

float: left;

margin-left: 60px;

margin-bottom: 45px;

}


/*三角形图标样式*/

.lf1{

position: absolute;

right: 140px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}

.md1{

display: none;

position: absolute;

right: 78px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}

.rg1{

display: none;

position: absolute;

right: 14px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}



/*隐藏部分*/

.floor-bottom2 {

position: absolute;

top:70px;

height: 220px;

overflow: hidden;

display: none;

}

.floor-bottom2 .floor-bottom1{

text-align: center;

margin-left: 45px;

margin-bottom: 45px;

}

/*楼层2样式*/

.floor-arrow2{

position: relative;

top: 100px;

width: 100%;

height: 400px;

}

/*三角形图标样式*/

.lf2{

position: absolute;

right: 200px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}

.md2{

display: none;

position: absolute;

right: 120px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}

.rg2{

display: none;

position: absolute;

right: 30px;

top:42px;

width: 14px;

height: 8px;

background: url(../images/floor-arrow.png) no-repeat center center;

}

/*楼层3样式*/

.floor-arrow3{

position: relative;

top: 200px;

width: 100%;

height: 400px;

}

/*楼层4样式*/

.floor-arrow4{

position: relative;

top: 300px;

width: 100%;

height: 400px;

}

/*楼层5样式*/

.floor-arrow5{

position: relative;

top: 400px;

width: 100%;

height: 400px;

}


/*友情衔接区*/

.titl{

width: 1400px;

height: 300px;

margin: 0 auto;

}

友情链接那块下不去，变成这样

http://img1.sycdn.imooc.com//climg/5bd3d0680001ca5407540249.jpg
夕落呀 2018-10-27
源自：项目：JQ实现瀑布流   5-2 作业题
0
收起

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

登陆购买课程后可参与讨论，去登陆吧

4回答
好帮手慕夭夭 2018-10-29 11:56:35

老师给同学一个思路哦 , 如下:

购物车按钮与下拉菜单放在一个大盒子里面

http://img1.sycdn.imooc.com//climg/5bd682fb0001cc5a09100201.jpg

css样式中 ,整体的大盒子设置position: relative; 然后给下拉菜单设置   position: absolute;使其参照大盒子定位 . 并设置display: none;让下拉菜单默认隐藏 .

然后在js中为整体的大盒子绑定hover事件 , 鼠标移入盒子时 ,为下拉菜单设置显示 , 鼠标移出时 ,为下拉菜单设置隐藏 

同学按照如上思路实战一下吧 , 如果哪一步的思路不会 , 可以重新提问 , 把代码上传一下 .老师会针对你的代码帮你指导的 . 祝学习愉快 ,望采纳


0
收起回答
好帮手慕夭夭 2018-10-29 10:50:53

你好同学 , 你的代码并没有购物车这一块的 . 可以重新提问 , 把完整的代码上传一下 . 以便老师针对代码进行测试 . 如果代码太多 , 建议同学先把整体的页面做出来 . 然后上传作业 . 批作业的老师会对页面中存在的问题进行详细指导的 .

祝学习愉快 !

0
收起回答
  • 提问者 夕落呀 #1
    我想问下购物车里下拉菜单该怎么样写，老师给个提示
    2018-10-29 11:42:11
Miss路 2018-10-28 11:20:47

同学，你好，你的代码粘贴的不完整哦。有两个解决方案：1、重新粘贴完整的代码，老师为你详细的查看问题。2、如果你觉得代码太多，并且还有大量图片觉得有点麻烦，同学可以先把作业中的会的部分先做完，不会的或者做的不好的，在作业中标注出来，做完之后，提交作业，批作业的老师会为你做详细的批改，并给出修改建议。

祝学习愉快！


0
收起回答
  • 提问者 夕落呀 #1
    楼层区修改好了了，购物车那块下拉框老师能提示一下吗？有点不明白那块
    2018-10-28 11:54:30
提问者 夕落呀 2018-10-27 21:12:26

还有，楼层区那块html结构和样式，是不是写的有点复杂了

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师帮忙看一下
12 0 7
老师帮忙看一下
14 0 2
请老师帮忙查看
14 0 3
帮忙看下对不对
5 0 1
卡住了 老师帮忙看看
13 0 6

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师