5-2练习问题。1为啥我的中间部分没有全部占满 2 我的底部为啥没有显示在最底下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
html,body{
margin: 0;
height: 100%;
}
#header,#footer{
background-color: black;
height: 100px;
}
#header{
background-image: url(http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png);
height: 100px;
text-align: right;
background-repeat: no-repeat;
}
#header a{
color:lightgray;
text-decoration:none;
line-height:100px;
margin-right:20px;
}
#z1{
background-color: lightblue;
margin-top:0%;
}
#z1 a{
text-decoration:none;
color: black;
}
nav{
background-color: lightblue;
height: 100%;
width: 30%;
padding-top: 4%;
padding-left:10%;
float:left;
}
nav ul{
list-style-type: none;
padding-left:20px;
}
nav li{
margin-bottom:10px;
}
nav span{
background-color: lightcoral;
margin-right:10px;
}
#z2{
background-color: lightblue;
height: 100%;
width: 25%;
padding-top:4%;
padding-left:5%;
float: left;
}
#z2 ul{
list-style-type: none;
padding-left: 20px;
}
#z2 li{
margin-bottom: 10px;
}
#f2{
height: 100%;
border: 2px solid #EE9572;
float: left;
}
aside{
background-color: lightblue;
height: 100%;
width: 25%;
padding-left: 5%;
padding-top: 4%;
float: left;
}
aside input{
margin-bottom:10px;
padding-left: 20px;
}
aside button{
color: white;
background-color: red;
height: 30px;
width: 200px;
font-size: 20px;
}
#footer{
height: 100px;
width: 100%;
line-height: 100px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div id="header">
<a href="">慕课</a>
<a href="">职业</a>
<a href="">实战</a>
<a href="">原文</a>
<a href="">手记</a>
</div>
<div id="z1">
<nav>
<h2>课程推荐</h2>
<ul>
<li>
<a href=""><span>职业路径</span></a>
<a href="">HTML5与CSS3实现动态页面</a>
</li>
<li>
<a href=""><span>职业路径</span></a>
<a href="">零基础入门Android语法与界面</a>
</li>
<li>
<a href=""><span>职业路径</span></a>
<a href="">IOS基础语法与常用控件</a>
</li>
<li>
<a href=""><span>职业路径</span></a>
<a href="">PHP入门开发</a>
</li>
<li>
<a href=""><span>职业路径</span></a>
<a href="">JAVA入门开发</a>
</li>
</ul>
</nav>
<div id="z2">
<h2>相关课程</h2>
<ul>
<li><a href="">HTML</a>
<a href="">CSS</a>
<a href="">JavaScipt</a></li>
<li><a href="">HTML5</a>
<a href="">CSS3</a>
<a href="">JQuery</a></li>
<li><a href="">移动端基础</a>
<a href="">移动端APP开发</a>
</ul>
</div>
<div id="f1"></div>
<aside>
<h2>登录</h2>
<form>
<input type="text" name="" placeholder="请输入邮箱/手机号">
<br/>
<input type="password" name="" placeholder="6-16位密码，区分大小写，不能用空格" >
<br/>
<button type="submit" form="">登录</button>
</form>
</aside>
</div>
<div id="footer">
<a href="">网站首页</a>
<a href="">企业合作</a>
<a href="">人才招聘</a>
<a href="">联系我们</a>
<a href="">常见问题</a>
<a href="">友情链接</a>
</div>
</body>
</html>
正在回答
您好，1.中间部分没有全部占满是因为其父元素没有设置高度，那么内容部分就会根据自身的内容填充高度，因此会出现没有占满的效果。
#z1{
background-color: lightblue;
margin-top:0%;
height:400px;//设置高度
}2.由于没有清除浮动，所以底部会浮动到上面。清除浮动对于底部的影响。
#footer{
height: 100px;
width: 100%;
line-height: 100px;
clear:both;//清除浮动
}祝学习愉快！
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星