3-3页尾怎么显示不出来,还有就是为什么图片和内容的居中显示怎么做
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
body{min-width:900px;}
.header{width:100%;height:60px;background:black;}
img{width:100px;height:50px;padding-top:5px;float:left;}
.song{list-style:none;display:inline-block;color:white;float:right;padding-right:20px;cursor:pointer;}
.song:hover{color:orange;}
.xiao{line-height:60px;}
.container{padding:0 220px 0 200px;}
.left,.middle,.right{position:relative;float:left;}
.middle{width:100%;background:#1a5acd;height:500px;}
.left{width:200px;background:#30a457;margin-left:-100%;
left:-200px;height:500px;}
.right{width:220px;background:#f00;height:500px;margin-left:-220px;right:-220px; }
.footer{width:100%;height:60px;background:black;}
.yang{ padding-top:100px;}
.middle img{width:200px;height:250px;}
.jun{padding-top:150px;padding-left:20px;}
.wei{ padding-left:100px;padding-top:100px;}
/*此处写代码*/
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
<div>
<ul class="xiao">
<li class="song">课程</li>
<li class="song">课程</li>
<li class="song">课程</li>
<li class="song">课程</li>
<li class="song">课程</li>
</ul>
</div>
</div>
<div class="container" >
<div class="middle">
<div class="wei"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"></div>
</div>
<div class="left">
<ul class="yang">
<h4>课程推荐</h4>
<li>职业路线�htlm5和css3实现动态网页</li>
<li>职业路线�htlm5和css3实现动态网页</li>
<li>职业路线�htlm5和css3实现动态网页</li>
<li>职业路线�htlm5和css3实现动态网页</li>
</ul>
</div>
<div class="right">
<div class="jun"><h3>登录</h3>
<form>
<div><input type="text" name="name" size="25" maxlength="6" placehoder="请出入邮箱"></div>
<div><input type="password" name="name" size="25" maxlength="6" placehoder="请出入邮箱"></div>
<div class="small1"><input type="submit" name="submit" value="登录" /></div>
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>课程安排</li>
<li>课程安排</li>
<li>课程安排</li>
<li>课程安排</li>
<li>课程安排</li>
</ul>
</div>
<!-- 此处写代码 -->
</body>
</html>12
收起
正在回答 回答被采纳积分+1
4回答
慕婉清7059351
2017-08-25 00:48:32
加个浮动
.footer{
width:100%;
height:60px;
background:black;
float: left;
color: white;
}
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星