不知道怎么写了，请老师指导一下，谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.header{width:1358px;height: 100px;background:black;position:fixed;margin:0 auto;overflow: hidden;}
.nav{float:right; }
ul{list-style: none;color: white;}
.logo img{display: block;float: left;}
ul li{float: left;padding:0 20px;line-height: 100px;}
.content{}
.footer{width:1358px:height100;packground:black;position: fixed;bottom: 0;}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"></div>
<div><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"></div>
</div>
<div class="footer">
<div class="foot">
<ul>
<li>网站首页</li>
<li>职业路径</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>1
收起
正在回答
2回答
你好同学，这是因为你在代码中直接使用标签选择器为li设置的浮动，如下：
使用标签选择元素会把页面中所有ul下面的li都选中，尾部也使用的li ， 如下样式自然也作用在尾部的li上面。所以要给它取消浮动哦
祝学习愉快 ，望采纳。
好帮手慕星星
2019-04-27 18:46:38
同学你好，
1、顶部和底部要设置宽度为100%，水平方向上全屏显示，并且属性之间要用分号隔开；底部导航可以不设置浮动，把li变为内联元素，父容器设置居中显示即可：
2、header顶部少一个结束标签，否则content就会被包裹在顶部中：
顶部设置了超出隐藏，中间区域就会显示不出来。
修改之后显示如下：
（1）顶部和底部设置了固定定位，会脱离文档流，就会遮盖住中间一部分，可以设置上下边距。
（2）图片水平方向上没有全屏显示。可以设置宽度为100%。
（3）图片因为是内联元素，默认是有间隙的，可以设置成block元素。
参考：
可以重新测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星