为了账号安全,请及时绑定邮箱和手机立即绑定

圣杯布局如何实现自适应,我写的圣杯布局中间栏设置了width:100%但达不到自适应的效果?

圣杯布局如何实现自适应,我写的圣杯布局中间栏设置了width:100%但达不到自适应的效果?

慕斯卡7039390 2020-03-06 17:59:52
<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>圣杯布局</title>  <style type="text/css">    *{    margin:0;    padding:0;    list-style:none;    text-decoration:none;    color:orange;    font-size:16px;    }    body{    min-width:40%;    min-height:40%;    }    .header,.footer{    width:100%;    height:100px;    background:#000;    line-height:100px;    } .header ul{ float:right; margin-right:120px; } .footer ul{ margin-left:25%; } .header ul li,.footer ul li{ float:left; margin-right:55px; } .main{ background:#e4e5e9; padding:0 382px 0 320px; overflow:hidden; } .main .left{ float:left; width:320px; margin-left:-100%; position:relative; left:-320px; } .main .left .course{ margin:96px 30px; line-height:30px; } .main .left .course h4{ font-size:20px; } .main .left .course ul li span{ background:red; margin-right:5px; } .main .left .course ul li a{ display:inline-block; font-size:14px; } .main .left .course h4,.main .left .course ul li span,.main .left .course ul li a,.main .right form h4,.main .right form input{ color:#000; } .main .right{ float:left; width:382px; position:relative; margin-left:-382px; left:382px; color:#000; } .main .center{ width:100%; float:left; position:relative; } .main .center img{ position:absolute; top:50%; margin-top:-200px; } .main .right form{ margin:100px 35px; line-height:30px; } .main .right form input{ display:block; line-height:30px; margin-top:10px; width:100%; height:30px; } .main .center{ height:480px; }  </style></head><body>  <div class="header">  <img src="http://climg.mukewang.com/590037f600016ce303000100.png">  <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 class="main">  <div class="center">  <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">  </div>  <div class="left">  <div class="course">  <h4>课程推荐</h4>  <ul>  <li><span>职业路径</span><a href="#">HTML与CSS实现动态网页</a></li>  <li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li>  <li><span>职业路径</span><a href="#">iOS基础语法和常用控件</a></li>  <li><span>职业路径</span><a href="#">PHP入门开发</a></li>  <li><span>职业路径</span><a href="#">JAVA入门开发</a></li>  </ul>  </div>  </div>  <div class="right">  <form action="#">  <h4>登录</h4>  <input type="text" placeholder="请输入登录邮箱/手机号" />  <input type="password" placeholder="6-16位密码,区分大小写,不能用空格" />  <input type="submit" style="background:red" value="登录">  </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>  <li><a href="#">友情链接</a></li>  </ul>  </div></body></html>
查看完整描述

1 回答

?
慕码人9569303

TA贡献2条经验 获得超0个赞

试试把left:-320px;改成right:-320px;

查看完整回答
反对 回复 2020-03-07
  • 1 回答
  • 0 关注
  • 774 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信