老师救命~这个作业垮了。左侧内容的起点被定在了某一个位置用了清除浮动也不行还有页脚被我强行定在最下方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-10-1</title>
<style type="text/css">
/*此处写代码*/
body{margin:0; padding:0; background-color: #add8e6; }
* li{list-style-type: none;}
.container{width:100%; height:1000px;
border:1px solid green;
}
.logo{
margin: 0 auto;
float: left;
margin-right: 300px;
border:1px solid red;
}
.header{
background-color: black;
width:100%;
height:100px;
border:1px solid blue;
}
.header ul{
float: right;
/*border: 1px solid red;*/
top:0;
right:0;
bottom:0;
left:0;
margin:0 auto;
}
.header ul li{
color: white;
font-size:20px;
display: inline;
/*垂直居中*/
height:100px;
line-height:100px;
padding:0px 20px;
/*border: 1px dashed white;*/
}
.main{
width:100%;
}
.main ul{list-style-type:none;
margin:0;
padding:0;
}
.left{
width:50%;
height:400px;
/*line-height:400px;*/
background-color: green;
float: left;
/*position:absolute;
top: 200px;
left:200px;
line-height:30px;*/
}
.right{
width:50%;
background-color: orange;
float:right;
/**/
}
.clearfix:after{
content:'.';
height:0;
display:block;
visibility:hidden;
clear:both;
}
.left ul span{
background-color: #f3a1a3;
}
.footer{
width:100%;
background-color:black;
text-align: center;
position:fixed;
bottom:0px;
}
.footer ul li{
display: inline;
color:white;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container clearfix">
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="clear"></div>
</div>
<div class="main">
<div class="left">
<h3>课程推荐</h3>
<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">
<h3>相关课程</h3>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
正在回答
同学你好， 因为img标签本身自带间距， 导致logo超出了顶部高度，对下面浮动的内容造成了影响， 示例：
建议修改： 在.logo类下添加font-size:0;属性，消除图片自带的间距影响
代码中还有其他问题需要注意一下。示例:
1、 因为container和header设置了边框导致水平方向出现了滚动条， 这里不需要设置边框，可以删除， 示例：
2、 中间内容的与left和right的上边缘和左边缘没有间距， 可以为标题添加左外边距和上外边距实现空白间距。 为列表ul和p标签添加做左外边距，实现左侧空白间隙。参考下图：
另， left和right可以不设置颜色哦~~
3、页脚每个链接挨的太近，显示效果不好看， 可以为li添加左右内边距， 让每个链接之间有间距。 示例：
4、页脚可以使用固定定位， 将其定位在底部， 同学这样做是可以的
如果帮助到了你， 欢迎采纳
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星