麻烦老师帮我看一下，蟹蟹~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
}
.head{
height:100px;
width:100%;
background:black;
overflow:hidden;
top:0;
}
.logo{
float:left;
line-height:100px;
}
.nav{
float:right;
line-height:100px;
margin-right:20px;
}
li{
color:white;
list-style:none;
float:left;
margin-right:50px;
}
.contain{
width:100%;
height:1000px;
background:#99CCFF;
padding-top:100px;
}
.main{
width:70%;
height:auto;
margin:0 auto;
}
.left{
width:50%;
height:1000px;
float:left;
}
.right{
width:50%;
height:1000px;
float:right;
}
p{margin:20px 0;}
p span{background:red;}
.footer{
width：100%;
height:100px;
background:black;
line-height:100px;
text-align:center;
}
a{
color:white;
text-decoration:none;
margin:0 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>
<!--页头-->
<div class="head">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>
<div class="nav">
<ul>
<li>XX</li>
<li>XXXX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>
</div>
<!--主体-->
<div class="contain">
<div class="main">
<div class="left">
<h2>sdas</h2>
<p><span>职业路径</span> sdgkljgsjgjosdjflajdas</p>
<p><span>职业路径</span> sdgkljgsjgjosdjflajdas</p>
<p><span>职业路径</span> sdgkljgsjgjosdjflajdas</p>
<p><span>职业路径</span> sdgkljgsjgjosdjflajdas</p>
<p><span>职业路径</span> sdgkljgsjgjosdjflajdas</p>
</div>
<div class="right">
<h2>相关课程</h2>
<p>dl;ajl;dakdask'</p>
<p>opfaskpofkp</p>
<p>fasfsgsgshahf</p>
</div>
</div>
</div>
<!--页脚-->
<div>
<div class="footer">
<a href="#">XXXX</a>
<a href="#">XXXX</a>
<a href="#">XXXX</a>
<a href="#">XXXX</a>
<a href="#">XXXX</a>
</div>
</div>
</div>
</body>
</html>
正在回答
同学你好，代码中问题：
（1）logo图片超出：
这是因为img标签的特性造成的，建议修改：
（2）顶部的导航样式可以优化，如下：
（3）底部的导航建议使用li标签包含a标签去实现。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星