老师,您好!帮我检查一下,谢谢!

老师,您好!帮我检查一下,谢谢!

<!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>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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

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

http://img1.sycdn.imooc.com//climg/5cb99f660001710b03410118.jpg

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

祝学习愉快~~~

  • 提问者 Sunflower加油 #1
    如果不那样设置,某些情况下会有什么bug出现呢?没有很理解到
    2019-04-19 18:40:04
  • 好帮手慕慕子 回复 提问者 Sunflower加油 #2
    同学你好, 目前不会有什么bug出现, 老师这里提醒同学,是希望同学在书写的代码过程中可以更加规范和严谨一点哦。
    2019-04-19 18:51:14
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师