老师您好，给.middle设置overflow:hidden; 页面就错乱了，如果不加一切都是好的，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul,li{
margin:0;
padding: 0;
}
.top{
width: 100%;
height: 100px;
background: black;
color: #fff;
font-size: 30px;
}
.top_left{
float: left;
}
.top_right{
float: right;
}
.top_right ul li{
float: left;
list-style: none;
display: inline-block;
line-height: 100px;
text-align: center;
padding: 0 30px;
cursor: pointer;
}
li:hover{
color: orange;
}
.ff{
font-size: 30px;
}
.middle{
height: 600px;
padding:0 200px 0 300px;
}
.middle_center{
float: left;
width: 100%;
height: 600px;
background: pink;
position: relative;
}
.mc{
width: 600px;
height: 400px;
position:absolute;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
.middle_left{
float: left;
width: 300px;
height: 600px;
margin-left: -100%;
position: relative;
left: -300px;
background: #fff0f5;
}
.middle_right{
float: left;
width: 200px;
height: 600px;
position: relative;
margin-left: -200px;
right: -200px;
background: #f0ffff;
}
.middle_left_box{
margin-top: 100px;
margin-left:40px;
}
.middle_left_box ul li{
list-style: none;
margin-top: 20px;
}
.one{
background: orange;
}
.middle_right_box{
margin-top: 100px;
margin-left: 20px;
}
.log{
margin-top:20px;
}
.btn{
width: 170px;
background: red;
}
.log input{
height: 30px;
border: none;
}
.bottom{
width: 100%;
height: 100px;
background: black;
}
.bottom_box {
font-size: 30px;
text-align: center;
}
.bottom_box ul li{
display: inline-block;
margin: 0 20px;
line-height: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="top">
<div class="top_left">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
</div>
<div class="top_right">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>袁问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="middle">
<div class="middle_center">
<div class="mc">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
</div>
<div class="middle_left">
<div class="middle_left_box">
<div>
<span class="ff">课程推荐</span>
</div>
<div>
<ul>
<li><span class="one">职业路径</span> <span class="two">HTML与CSS实现</span></li>
<li><span class="one">职业路径</span> <span class="two">HTML与CSS实现</span></li>
<li><span class="one">职业路径</span> <span class="two">HTML与CSS实现动</span></li>
<li><span class="one">职业路径</span> <span class="two">HTML与CSS实页</span></li>
<li><span class="one">职业路径</span> <span class="two">HTML与动态网页</span></li>
</ul>
</div>
</div>
</div>
<div class="middle_right">
<div class="middle_right_box">
<div>
<span class="ff">登录</span>
</div>
<form>
<div class="log"><input type="text" name="" placeholder="username"></div>
<div class="log"><input type="password" name="" placeholder="password"></div>
<div class="log"><input class="btn" type="submit" value="按钮"></div>
</form>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom_box">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
</ul>
</div>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星