不知道怎么写了，请老师指导一下，谢谢
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!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积分~
来为老师/同学的回答评分吧