请老师指导，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 清除默认 */
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;}
/* 容器 */
.container{width: 100%; height: auto;}
/* 头部 */
.header{ width: 100%; height: 100px; background: black;
position: fixed;
top: 0;
left: 0;}
/* logo */
.logo{ float: left;}
/* 导航 */
.nav{ float: right;}
.nav li{ float: left;color: #fff;
line-height: 100px; margin: 0 20px;}
/* main */
.main{ width: 100%; height: auto;}
/* footer */
.footer{
width: 100%; height: 100px; background: black;
position: fixed;
bottom: 0;
left: 0;
text-align: center;}
.footer ul{
display: inline-block; }
.footer li{
float:left;
line-height: 100px; ;
color: #fff;
margin: 0 60px;}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 头部 -->
<div class="header">
<!-- logo -->
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" alt="很抱歉"></a> </div>
<!-- 导航 -->
<div class="nav">
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
</div>
<!-- main -->
<div class="main">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" alt="很抱歉" width="100%">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" alt="很抱歉" width="100%">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" alt="很抱歉" width="100%">
</div>
<!-- footer -->
<div class="footer">
<ul>
<a href="#"><li>网站首页</li></a>
<a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>友情链接</li></a>
</ul>
</div>
</div>
</body>
</html>6
收起
正在回答
1回答
同学你好，代码布局是不错的，还有些小问题可以优化：
1、logo超出了父容器，中间图片之间存在空白部分
这是因为图片为行内元素，有文字特性，默认存在间隙。建议将图片设置为块元素
2、顶部和底部设置固定定位脱离文档流，下面的内容向上移动，就会被顶部和底部遮盖住一部分。建议给中间部分设置上下间距，参考
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星