麻烦老师帮我看下，改进哪里可以更好
来源：2-10 编程练习
weibo_慕婉清1565219
2019-10-21 13:41:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color:#33CCCC;
}
li{
list-style: none;
display:inline-block;
}
.container{
background-color: #000;
font-size: 25px;
width: 100%;
height: 100px;
position: absolute;
top: 0;
}
.logo{
width: 300px;
float: left;
cursor:pointer;
}
.nav{
float: right;
}
.nav li a{
line-height:100px;
padding:0 20px;
}
a{
text-decoration: none;
color: #fff;
}
.banner{
width: 80%;
height: 700px;
margin-top: 100px;
margin:150px auto;
margin-bottom: 0;
}
.left{
width: 35%;
height: 300px;
float: left;
}
.left ul li{
padding: 10px 10px 10px 0;
}
span{
background-color: #CC3300;
}
.right{
width: 35%;
height: 300px;
float: right;
}
.right ul li{
padding: 10px 10px 10px 0;
}
.footer{
width: 100%;
height: 100px;
background-color: #000;
position: absolute;
bottom: 0;
}
.footer ul{
text-align: center;
font-size: 25px;
line-height: 100px;
}
.footer ul li{
padding: 0 30px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="left">
<h3>课程推荐</h3>
<div>
<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>
<div class="right">
<h3>相关课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Jquery</li>
</ul>
<ul>
<li>移动端基础</li>
<li>移动端APP开发</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，修改如下：
1、网页底部区域盖住了网页中间的内容：
这是因为中间内容的高度过高并且底部设置了绝对定位导致的，同学可以修改下网页中部banner的高度，但是我更推荐另外一种解决办法，由于网页底部是绝对定位，是相对于浏览器窗口来定位的，我们可以将其改为固定定位，将网页底部固定在浏览器的底部，这样就不用计算中间内容的高度了：
2、网页头部logo图片超出了父容器：
这是由于图片是内联元素，底部默认存在间隙，可以将图片设置为block块：
希望我的回答能够帮助到你，望采纳，祝学习愉快！
0
相似问题