老师，nav部分 为了给“商品分类”定位，加了position:absolute
为什么后面的数码城跑到前面去了 给.nav加了clearfix也不管用？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>moshop</title>
<link href="css/layout.css" rel="stylesheet"/>
<link href="css/base.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<p class="login">
<a href="#" class="log">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛慕淘</a>
</p>
<p class="top-nav">
<a href="#">我的慕淘</a>
<a href="#" class="collect">收藏夹</a>
<a href="#" class="class">商品分类</a>
<a href="#">卖家中心</a>
<a href="#">联系客服</a>
</p>
<div class="line"></div>
</div>
</div>
<div class="header">
<div class="wrap clearfix">
<a class="logo" href="#"><img src="img/logo.png"/></a>
<input type="text" placeholder="灵魂美食一元抢"/>
<div class="search">搜索</div>
<div class="cart"></div>
</div>
</div>
<div class="nav clearfix">
<div class="wrap clearfix">
<div class="link menu">商品分类
<div class="menu-list"></div>
</div>
<a href="#" class="link">数码城</a>
<a href="#" class="link">天黑黑</a>
<a href="#" class="link">团购</a>
<a href="#" class="link">发现</a>
<a href="#" class="link">二手特价</a>
<a href="#" class="link">名品汇</a>
</div>
</div>
<div class="banner">
<div class="banner-slider"></div>
<div class="banner-r"></div>
</div>
<div class="floors">
<div class="wrap">
<div class="floor floor1"></div>
<div class="floor floor2"></div>
<div class="floor floor3"></div>
<div class="floor floor4"></div>
<div class="floor floor5"></div>
</div>
</div>
<div class="friend-link">
<div class="wrap">
</div>
</div>
<div class="footer">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="js/imoo.js"></script>
</body>
</html>
a{
text-decoration:none;
}
p{
margin:0;
padding:0;
display:inline-block;
}
/*top*/
.top a{
line-height:44px;
font-size:13px;
color:#888;
}
.top a:hover{
color:red;
}
.top .login{
float:left;
margin-left:10px;
}
.top .login a{
margin-right:6px;
}
.top .login .log{
color:red;
}
.top .top-nav{
float:right;
}
.top .top-nav a{
padding-right:42px;
background:url(../img/icon/21.png) no-repeat 56px 2px;
}
.top .top-nav .collect{
background-position:44px 2px;
}
.top .top-nav .class{
background:none;
padding-right:30px;
}
.top .line{
height:43px;
border-bottom:1px solid #ccc;
}
/*header*/
.header{
position:relative;
}
.header .logo{
width:140px;
height:50px;
display:inline-block;
padding:37px 12px;
}
.header .logo img{
width:100%;
height:100%;
}
.header input{
width:604px;
height:40px;
position:absolute;
top:41px;
left:296px;
padding-left:10px;
font-size:13px;
}
.header .search{
width:74px;
height:42px;
background-color:#07111b;
color:#fff;
line-height:42px;
text-align:center;
position:absolute;
top:42px;
left:902px;
}
.header .cart{
width:160px;
height:42px;
background-color:red;
position:absolute;
top:42px;
right:20px;
}
/*nav*/
.nav{
height:48px;
position:relative;
}
.nav .link{
display:inline-block;
float:left;
padding:0 20px 0 30px;
line-height:48px;
font-size:16px;
text-align:center;
color:#fff;
}
.nav a:hover{
color:red;
}
.nav .menu{
width:206px;
height:54px;
padding:0;
background-color:#c91518;
position:absolute;
top:-6px;
}
*{
margin:0;
padding:0;
}
.wrap{
width:1200px;
margin:0 auto;
position:relative;
}
.clearfix:after{
content:' ';
display:block;
height:0;
line-height:0;
clear:both;
zoom:1;
}
.top{
height:44px;
background-color:#f3f5f7;
}
.header{
height:124px;
background-color:#f3f5f7;
}
.nav{
height:48px;
background-color:#07111b;
}
.banner{
width:986px;
margin:0 auto;
height:504px;
padding:8px 0 0 214px;
}
.banner-slider{
width:728px;
height:504px;
float:left;
background-color:#eee;
}
.banner-r{
float:right;
width:246px;
height:504px;
border:1px solid #eee;
}
.floors{
padding-top:12px;
}
.floor{
height:550px;
}
.floor5{
border-bottom:1px solid #eee;
}
.friend-link{
height:140px;
}
.footer{
height:102px;
background-color:#f3f5f7;
}
正在回答
你好 , 同学的情况老师已经了解了 . 幕淘网作业可能有些难度 . 建议同学先把挂号平台的作业完成之后 ,然后再做幕淘网作业 . 做完之后 , 可以在作业区上传作业 , 批复作业的老师会对作业进行详细指导 .
另外 , 同学反映的"一看就会，一做就废”这个是很正常的 . 每个人在刚接触新知识的时候都会遇到题不会做 , 没有思路 这样的情况 , 老师也是从这一阶段慢慢经历过来的 , 所以同学不用担心 . 只要多练习 , 慢慢形成自己的一个知识体系 , 能力就提升上去了 . 所以你可以看视频的时候跟着老师的例子练习 . 看完之后整理一下老师的思路 , 多模仿老师的例子自己去实现一个小效果 . 认真做课程的习题 . 相信经过不断的努力 , 就会有很大的进步 .
当然 , 在整个过程中 ,遇到了难题 , 可以来问老师 . 老师会帮助你渡过难关 . 加油 !
祝学习愉快 .望采纳 .
你好同学 , 因为商品分类设置了定位脱离文档流后 ,不占据文档流位置 , 后面的文字就会往前移动了 ,被标题挡住了
这一块建议同学调整结构 .商品标题与banner区域左边侧栏整体放在一个盒子中 . 然后给整个整体的盒子设置定位 ,让它往上移动 .
而导航建议嵌套一个div, 如下:
然后给盒子设置一个左边距 ,这样侧栏定位往上移动就不会挡住导航文字了 .
另外 ,老师根据同学最近的学习状态 , 给同学几点建议 :
同学最近应该是在学<挂号平台的>的课程 , 目前也是经常问挂号平台的作业 . 但是这里同学又开始做瀑布流的作业 . 两个作业穿插着学习 , 很容易造成知识的混乱 . 这样的话 , 两个阶段的知识 , 都不会掌握的太扎实 , 效率很低 . 学习要脚踏实地 , 一步一步的进行 . 建议同学按照课程步骤 ,一个一个的学习 , 作业也是按照顺序完成一个再做另一个 .
知识要先打好基础 , 在进行练习才能巩固 : 因为从这几天问答当中 , 感觉有一些很基础的东西同学掌握的还不是很扎实 . 在做挂号平台作业的时候 , 建议同学一定先把视频的知识先学习掌握了 . 然后再来练习作业 , 效率更好 .
遇到问题 , 要学会先思路 , 培养自己独立思考和解答问题的能力 , 这一点在工作中很重要 : 同学在学习的时候 ,可能有些疑问 , 自己先尝试去验证 , 有的也是可以解决的 . 如果在尝试的过程中 . 哪里卡住了 .再来拿着代码问题老师 . 老师根据代码给你有针对性的指导 .这样对自己能力提升是有很大的帮助的
老师也是希望不仅帮助同学解答疑问 ,也能帮助同学各方面能力都能得到提升 . 所以给同学几个建议性的指导 . 希望同学再接再厉 , 加油 !
祝学习愉快 !
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星