老师，为啥我的圣杯布局窗口一缩小 布局就全乱了呐 不能实现教程中的效果
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
body{min-width: 900px;}
.header,.footer{width: 100%;height: 100px;color: white;background-color: black;float: left;}
.header .logo{float: left;}
a{color: white;text-decoration: none;}
.header .rightsiderba ul{float: right;}
.header .rightsiderba ul li{float: left;list-style: none;height: 100px;line-height: 100px;margin-left: 50px;margin-right: 50px;}
.header .rightsiderba{overflow: hidden;}
.container{padding: 0 350px 0 370px;}
.left,.middle,.right{position: relative;float: left;min-height: 800px;}
.middle{width: 100%;background-color: rgb(255,192,203);text-align: center;}
.left{width: 370px;background-color: rgb(255,239,219);}
.right{width: 350px;background-color:rgb(173,216,230)}
.left{margin-left: -100%;left: -370px;}
.right{margin-left: -350px;right:-350px;}
.footer ul {text-align: center;}
.footer ul li{display: inline-block;list-style: none;height: 100px;line-height: 100px;margin-left: 100px;text-align: center;}
.container .left ul li a{color: black;}
.container .left ul li{text-align: left;list-style: none;color: black;line-height: 15px}
.container .left ul{width: 291px;margin:0px auto;margin-top: 250px;}
h1{color: black;height: 57px}
.right ul{padding-left: 25px;line-height: 60px;color: black;margin-top: 250px}
.right ul li{list-style: none;}
.submit{
width:300px;
height:50px;
background-color:#f00;
border:none;
cursor:pointer;
color:white;
font-size:20px;}
input{height: 40px;width: 300px;font-size: 15px;}
.middle img{width:700px;height: 450px ;margin-top: 250px}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<!--logo-->
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
</div>
<!--右导航-->
<div class="rightsiderba">
<div class="introduce">
<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">
<ul>
<h1>课程推荐</h1>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li><br/>
<li><span>职业路径</span> 零基础入门Andriod语法与界面</li><br/>
<li><span>职业路径</span> IOS基础语法与常用控件</li><br/>
<li><span>职业路径</span> PHP入门开发</li><br/>
<li><span>职业路径</span> JAVA入门开发</li><br/>
</ul>
</div>
<!--右边部分-->
<div class="right">
<form>
<ul>
<li><h2>登录</h2></li>
<li><input type="text" name="user" placeholder="请输入账号" </li>
<li><input type="password" name="user" placeholder="请输入密码" ></li>
<li><input class="submit" type="submit" name="enter" value="登录"></li>
</ul>
</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>
</div>
</body>
</html>
正在回答
页面缩小后 ,宽度变小 , 所以会把内容挤下来 . 根据作业要求 ,为内容设置最小宽度 , 是页面缩小后出现滚动条就可以了 ,如下 :
希望能够帮到你 ,祝学习愉快 ,望采纳
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星