3-3关于右侧定位的一点问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*此处写代码*/ *{ margin:0; padding:0; } .header{ background-color:black; width:100%; top:0; position:fixed; height:80px; min-width: 800px; } .logo{ float:left; } .header img{ height:80px } .nav{ float:right; line-height:80px; } li{ display:inline; padding:0 20px; } a{ color:white; } .header a:hover{ color:orange; } .container{ background-color:#ececec; height:1000px; top:80px;/*这里设置距离顶部的距离 但是似乎没有用 还是用最上部开始*/ margin:80px 0px;/*marginy有用top bottom没用为什么呢?*/ min-width: 800px; padding:0px 220px 0px 200px; } .footer{ height:80px; background:black; min-width: 800px; bottom:0; width:100%; position:fixed; line-height:80px; text-align:center; } .middle,.right,.left{ float:left; min-height:300px; position:relative; } .middle{ background-color:#CC99CC; width:100%; } .left{ width:200px; background-color:#FFFF99; margin-left:-100%; left:-200px; } .right{ width:220px; margin-left:-220px; right:-220px; /* margin-left:-220px; margin-right:-100%;*/ background-color:#66FFFF; } .login-buttom{ color:white; background-color:red; text-align:center; } input{ margin:10px 0px; height:25px; width:80px; } form{ padding:10px; } .left a{ margin-right:10px; background-color:orange; } .middle img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:200px; height:200px; } </style> </head> <body> <!-- 此处写代码 --> <div class="header"> <div class="logo"> <a> <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/> </a> </div> <div class="nav"> <ul><!--当宽度不够的时候 导航条会被排挤下来异位 但是下部导航条又不会有这个情况--> <li><a href="#">课程</a></li> <li><a href="#">职业路径</a></li> <li><a href="#">实战</a></li> <li><a href="#">猿问</a></li> <li><a href="#">手记</a></li> </ul> </div> </div> <div class="container"> <div class="middle"> <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/> </div> <div class="left"> <dl> <dt>推荐课程</dt> <dd><a>职业路径</a>html and css3</dd> <dd><a>职业路径</a>android</dd> <dd><a>职业路径</a>ios</dd> <dd><a>职业路径</a>php</dd> <dd><a>职业路径</a>java</dd> </dl> </div> <div class="right"> <form> <h2>登录</h2> <div><input type="text" name="username" placeholder="请输入登录邮箱/手机号"> <div><input type="password" name="password" placeholder="6~16位密码,区分大小写,不能用空格"></div> <div><input type="submit" value="登录" class="login-buttom"></div></div> </form> </div> </div> <div class="footer"> <ul> <li><a href="#">企业合作</a></li> <li><a href="#">人才招聘</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">讲师招募</a></li> <li><a href="#">常见问题</a></li> </ul> </div> </body> </html>
问题1:用下图图似乎也能达到效果 这样可以么?和老师方法比有什么区别?
问题2:在定位右侧右侧div的时候,视频用的margin-left:-220px,但是用margin-left:-100%却是图2效果,这是为什么?
17
收起
正在回答 回答被采纳积分+1
1回答
精慕门6590561
2017-06-20 10:32:05
补充一个问题 ,当三个高度都给了100%,滚动的时候会遮盖掉导航条,给导航条设置z-index后就看起来可以了 这个现实顺序该怎么理解呢?
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星