您好老师，check pls ,thanks a lot.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding:0px;
}
ul,li{
margin: 0px;
padding: 0px;
}
.top{
background: black;
width: 100%;
height: 100px;
margin: 0 auto;
}
.top_left{
float: left;
}
.top_left img{
display: block;
}
.top_right{
float: right;
}
.top_right ul li{
line-height: 68px;
float: right;
color:#fff;
font-size: 35px;
margin:0 30px;
list-style: none;
cursor: pointer;
}
.main{
width: 100%;
height: 400px;
background: #66ccff;
margin: 0 auto;
}
.main_left{
float: left;
width: 30%;
height: 400px;
}
.main_right{
float: left;
width: 40%;
height: 400px;
}
.main_left_container{
margin-top: 50px;
margin-left: 150px;
}
.main_right_container{
margin-top: 50px;
margin-left: 20px;
margin-left:40px;
}
.title{
font-size: 26px;
}
.one{
background: orange;
}
.main_left_container ul li{
list-style: none;
margin-top: 10px;
}
.main_right_container ul li{
list-style: none;
margin-top: 10px;
}
.main_rightright{
float: right;
width: 30%;
height: 400px;
}
.right_container{
margin-top: 50px;
margin-left: 50px;
}
.bottom{
width: 100%;
height: 100px;
background: black;
margin:0 auto;
}
.bottom_box{
width: 60%;
height: 100px;
overflow: hidden;
margin: 0 auto;
}
.bottom_box ul li{
list-style: none;
float: left;
color:#fff;
line-height: 100px;
margin: 0 30px;
font-size: 20px;
}
.login{
margin-top: 20px;
}
.btn{
width: 173px;
background: red;
border-style: none;
font-size: 20px;
}
.rightright_left{
float: left;
width: 2%;
height: 500px;
background: orange;
}
.rightright_right{
float: right;
width: 98%
}
</style>
</head>
<body>
<div class="top">
<div class="top_left">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
</div>
<div class="top_right">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>猿问</li>
<li>实战</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="main">
<div class="main_left">
<div class="main_left_container">
<p class="title">课程推荐</p>
<div>
<ul>
<li><span class="one">职业路径</span> <span>html5与css3实现动态网页</span></li>
<li><span class="one">职业路径</span> <span>零基础入门Androd</span></li>
<li><span class="one">职业路径</span> <span>html5与css3实现动态网页</span></li>
<li><span class="one">职业路径</span> <span>html5与css3实现动态网页</span></li>
<li><span class="one">职业路径</span> <span>零基础入门Androd</span></li>
</ul>
</div>
</div>
</div>
<div class="main_right">
<div class="main_right_container">
<p class="title">相关课程</p>
<div>
<ul>
<li><span>html5 css javascript</span></li>
<li><span>html5 css javascript</span></li>
<li><span>移动端基础</span> <span>移动app</span></li>
</div>
</div>
</div>
<div class="main_rightright">
<div class="rightright_left"></div>
<div class="rightright_right">
<form>
<div class="right_container">
<div class="title">登录</div>
<div class="log">
<div class="login"><input type="text" placeholder="请登录" ></div>
<div class="login"><input type="password" placeholder="请输入密码"></div>
<div class="login"><input class="btn" type="submit" value="登录"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom_box">
<ul>
<li>
网站首页
</li>
<li>
企业合作
</li>
<li>
人才招聘
</li>
<li>
联系我们
</li>
<li>
常见问题
</li>
<li>
友情链接
</li>
</ul>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，可以参考下面优化建议：
1、顶部右侧导航项显示顺序相反，并且看起来在父容器中没有垂直居中显示，如下：
（1）每个导航项设置的右浮动，这样代码中排列在前面的元素就会先浮动到右侧，所以导致显示顺序相反，需要修改为左浮动
（2）顶部整体高度为100px，如果想要垂直居中显示，也需要设置导航项行高为100px
参考修改：
2、中间区域右侧黄色线条超出了：
可以在父容器中添加超出隐藏：
3、底部导航项没有居中显示：
父盒子是居中的，但是导航项并没有居中。建议不设置浮动，修改为行内元素，父元素中设置文本居中即可。参考：
自己可以完善测试下，祝学习愉快！
欢迎采纳~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星