检查代码，圣杯布局不用这个代码，中间padding挤进来，两边用定位 一个左边 一个右边，可以吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
margin:0;
padding:0;
}
.wrap {
width:100%;
}
.wrap .head {
width:100%;
height:100px;
background:black;
}
.wrap .head .logo {
float:left;
}
.wrap .head .logo a,
.wrap .head .logo img {
display:block;
}
.wrap .head .nav {
float:right;
}
.wrap .head .nav ul li {
font-family:"微软雅黑";
font-size:16px;
text-align:center;
float:left;
list-style: none;
}
.wrap .head .nav ul li a {
color:white;
display:block;
line-height:100px;
padding:0 30px;
text-decoration:none;
}
.wrap .head .nav ul li a:hover {
color:orange;
}
.wrap .content {
padding:0 350px 0 400px;
min-width: 600px;
}
.wrap .content .middle,
.wrap .content .left,
.wrap .content .right {
position:relative;
float:left;
min-height:700px;
}
.wrap .content .middle {
width:100%;
background:pink;
position:relative;
}
.wrap .content .middle img {
position:absolute;
left:50%;
top:50%;
margin-left: -300px;
margin-top: -200px;
float:left;
display:block;
}
.wrap .content .left{
width:400px;
background:#FFFFE0;
margin-left:-100%;
left:-400px;
}
.wrap .content .left h2{
margin-left: 40px;
margin-top: 60px;
}
.wrap .content .left ul{
list-style: none;
font-family: "微软雅黑";
font-size: 16px;
margin-left: 40px;
}
.wrap .content .left ul li {
margin:20px 0;
}
.wrap .content .left ul li span {
background:pink;
margin-right: 15px;
}
.wrap .content .right{
width:350px;
background:skyblue;
margin-left:-350px;
right:-350px;
}
.wrap .content .right h2 {
margin-top: 60px;
margin-left: 40px;
margin-bottom: 20px;
}
.wrap .content .right input {
width:250px;
height:30px;
margin-bottom: 20px;
margin-left: 40px;
}
.wrap .content .right .btn {
border: none;
color:white;
background:red;
}
.wrap .foot {
float:left;
width:100%;
height:100px;
background:black;
text-align:center;
}
.wrap .foot ul {
display:inline-block;
}
.wrap .foot ul li{
float:left;
font-family:"微软雅黑";
font-size:16px;
}
.wrap .foot ul li a {
text-decoration:none;
color:white;
display:block;
line-height:100px;
padding:0 30px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="wrap">
<div class="head">
<div class="logo">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.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="content">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt="" />
</div>
<div class="left">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span>HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span>零基础入门Android语法与界面</li>
<li><span>职业路径</span>IOS基础语法与常用控件</li>
<li><span>职业路径</span>PHP入门开发</li>
<li><span>职业路径</span>JAVA入门开发</li>
</ul>
</div>
<div class="right">
<h2>登录</h2>
<form action="">
<input type="text" placeholder="请输入登录邮箱/手机号" /><br />
<input type="text" placeholder="6-16位密码，区分大小写，不能用空格" /><br />
<input class="btn" type="submit" />
</form>
</div>
</div>
<div class="foot">
<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>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星