老师，您好！帮我检查一下，谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.mainnav{
width: 100%;
height: 100px;
background-color: #000;
overflow: hidden;
zoom: 1;
}
.logo{
width: 300px;
height: 85px;
float: left;
}
.nav{
float: right;
margin-right: 30px;
font-size: 20px;
font-family: "微软雅黑"；
}
.nav ul li a{
list-style-type: none;
}
.nav ul li{
display: inline-block;
line-height: 100px;
padding-left: 50px;
}
li a{
text-decoration: none;
color: #fff;
}
.main{
width: 100%;
background: paleturquoise;
overflow: hidden;
font-size: 14px;
margin: 0 auto;
zoom: 1;
}
.left{
width: 40%;
height: 500px;
float: left;
padding-left: 10%;
padding-top: 100px;
}
.left ul,.right ul{
list-style-type: none;
}
span{
background: pink;
margin-right: 15px;

}
.left ul li,.right ul li{
margin: 10px 0;
}
.right{
width: 40%;
height: 500px;
float: right;
padding-left: 10%;
padding-top: 100px;
}

.footer{
width: 100%;
height: 100px;
background-color: #000;
bottom: 0;
text-align: center;
line-height: 100px;
font-size: 16px;
}
.footer ul li{
list-style-type: none;
display: inline-block;
margin: 0 10px;
}

</style>
</head>
<body>
<!-- 这是头部 -->
<div class="mainnav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></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="main">
<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>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</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>  



</body>
</html>

Sunflower加油 2019-04-19

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

好帮手慕慕子 2019-04-19 18:14:55

同学你好，效果实现了，不过有一点可以优化一下哦， logo图片这里，图片高度大于父级元素div的高度，虽然这样显示效果没问题，但是建议同学将div的高度调整与图片大小一致

如果帮助到了你，欢迎采纳

祝学习愉快~~~

收起回答

提问者 Sunflower加油 #1

如果不那样设置，某些情况下会有什么bug出现呢？没有很理解到

2019-04-19 18:40:04
好帮手慕慕子回复提问者 Sunflower加油 #2

同学你好，目前不会有什么bug出现, 老师这里提醒同学，是希望同学在书写的代码过程中可以更加规范和严谨一点哦。

2019-04-19 18:51:14