代码感觉有点乱，请老师检查下。谢谢！
来源：2-12 编程练习
慕风月
2020-01-29 01:26:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
background:#a9d7e4;
overflow: hidden;
zoom:1;
}
.header{
width: 100%
height:100px;
background: black;
overflow: hidden;
zoom:1;
}
.logo{
background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png)no-repeat;
float: left;
width:300px;
height: 100px;
}
.header .nav{
display: inline;
list-style: none;
float: right;
padding: 20px;
text-align: center;
line-height: 100px;
overflow: hidden;
zoom:1;
}
.header .nav li{
color:white;
font:normal 20px "微软雅黑";
float: left;
padding: 20px;
}
.main{
width: 70%;
margin: 0 auto;
background:#a9d7e4;
height: 600px;
padding: 100px;
}
.main .left{
float: left;
width: 50%;
}
.main .right{
float: left;
width: 50%;
}
.main .left div{
font: normal 24px "微软雅黑";
line-height: 2em;
}
.main .left div p{
font: normal 16px "微软雅黑";
line-height: 2em;
}
.main .right div{
font: normal 24px "微软雅黑";
line-height: 2em;
}
.main .right div p{
font: normal 16px "微软雅黑";
line-height: 2em;
}
.left span{
background-color:#d86d77;
margin-right: 2em; }
.right span{
padding-right: 2em;
}
.foot{
width: 100%;
height: 100px;
background: black;
position: fixed;
bottom: 0;
left: 0;
}
.foot .ul{
list-style: none;
width: 50%;
margin: 0 auto;
line-height: 100px;
}
.foot .ul li{
display: inline;
color: white;
font:normal 16px "微软雅黑";
padding:40px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="main">
<div class="left">
<div>课程推荐
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Android语法与界面</p>
<p><span>职业路径</span>iOS基础语法</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p></div>
</div>
<div class="right">
<div>相关课程
<p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
<p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
<p><span>移动端基础</span><span>移动端APP开发</span></p>
</div>
</div>
<div class="foot">
<ul class="ul">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，针对你代码中的问题，解答如下：
如下位置，缺少分号，建议添加上
如下，检查元素可知，导航项实际占据的高度超出了头部高度。
建议：去掉nav的padding值，给li添加line-height属性，调整左右padding值即可。
如下，老师电脑上测试同学的代码，无法完整显示所有的内容
建议：去掉ul的固定宽度，添加text-align:center;属性，让内容水平居中显示。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题