请老师纠错，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 清除默认 */
*{margin: 0; padding: 0;}
ul,li{ list-style:none;}
a{ text-decoration: none;}
body{ min-width: 700px;}
/* 容器 */
.container{ width: 100%; height: auto;}
/* 头部 */
.header{ width: 100%; height: 100px; background: black;}
/* logo */
.logo{ float: left;}
.logo a,.logo img{display: block;}
/* nav */
.nav{float: right;line-height: 100px;font-size: 18px;}
.nav li{float: left; margin: 0 30px;}
.nav a{ color: #fff;}
.nav li:hover a{ color:orange}
/* main */
.main{height: 800px; padding: 0 200px 0 300px;}
.middle,
.left,
.right{position: relative;
float: left;}
/* middle */
.main .middle{width: 100%; height: 800px; background: pink;}
.main .middle img{ position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;}
/* left */
.main .left{ width: 270px; height: 700px; background:#ffefdb;
line-height: 40px; padding: 100px 0 0 30px;
margin-left: -100%;
left: -300px;}
.main .left a{ color:black;}
.main .left span{ background: pink;}
/* right */
.main .right{ width: 170px; height: 700px; background: #add8e6;
padding: 100px 0 0 30px;
margin-right: -100%;
}
.right input{ width: 150px;height: 40px; }
.right .input_3{ background: red;border: none;}
/* footer */
.footer{width: 100%; height: 100px; background: black;text-align: center;}
.footer ul{display: inline-block;}
.footer li{ float: left;padding: 0 60px;
line-height: 100px; font-size: 18px;}
.footer a{ color: #fff;}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" alt="很抱歉"></a>
</div>
<!-- nav -->
<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="main">
<!-- 中间 -->
<div class="middle"><img src="http://img1.sycdn.imooc.com\/climg/590037e00001fab706000400.jpg" alt="很抱歉"></div>
<!-- 左边 -->
<div class="left">
<h2>课程推荐</h2>
<a href="#"><span>职业路径</span> HTML5与CSS3实现动态网页版</a><br/>
<a href="#"><span>职业路径</span> 零基础入门Android语法与界面</a><br/>
<a href="#"><span>职业路径</span> iOS基础语法与常用控件</a><br/>
<a href="#"><span>职业路径</span> PHP入门开发</a><br/>
<a href="#"><span>职业路径</span> JAVA入门开发</a><br/>
</div>
<!-- 右边 -->
<div class="right">
<h2>登录</h2>
<br />
<form action=".." method="POST" name="right">
<input type="text" name="ZH" placeholder="请输入登录邮箱/手机号">
<br />
<br />
<input type="password" name="MM" placeholder="6-16位密码，区分大小写，不能用空格">
<br />
<br />
<input type="submit" name="DL" value="登录" class="input_3">
</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>
</div>
</body>
</html>PS：圣杯布局理解了一会才明白，请问老师圣杯布局在日常中运用的多吗？
5
收起
正在回答
1回答
同学你好，主体左侧的内容发生了换行，如下：
建议：将左侧内容的宽度调整的大一些。
另外，圣杯布局确实有一点难度。不过不用担心，实际开发中不会用到这样的布局。这个课程作为课程学习，简单练习一下即可。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星