老师帮忙批改下,底部的文字无法居中,图片不能全部显示出来被放大了
<style type="text/css"> * { margin: 0px; padding: 0px; } .top { width: 100%; height: 100px; background-color: black; position:fixed; top: 0px; margin: 0 auto; } im { float: left; cursor: pointer; } ul { float: right; } .im1{margin-top: 100px; margin-bottom: 100px; width:100%; background-repeat: no-repeat;} ul li { list-style-type: none; display: inline; color: #fff; text-align: center; line-height: 100px; font-size: 25px; font-family: "微软雅黑"; margin: 30px; } .nv2 li { list-style-type: none; display: inline-block; color: #fff; font-size: 25px; font-family: "微软雅黑"; margin: 30px; } .foot{ width: 100%; height: 100px; background-color: black; position: fixed; text-align: center; line-height: 100px; bottom: 0px; left: 0px; word-spacing:50px; } </style> </head> <body> <div class="top"> <img alt="" src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"> <ul> <li>课程</li> <li>职业路径</li> <li>实践</li> <li>猿问</li> <li>手记</li> </ul> </div> <div class="img1"> <img alt="" src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"> <img alt="" src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"> <img alt="" src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"> </div> <div class="foot"> <ul class="nv2"> <li>课程</li> <li>职业路径</li> <li>实践</li> <li>猿问</li> <li>手记</li> </ul></div> </body>
24
收起
正在回答
2回答
底部文字不能居中是因为你给所有的ul都定了一个向右浮动,只给顶部右侧的导航定义浮动即可
其次文字的垂直居中,设置完line-height之后,就不要在设置顶部和底部的margin值了
最后建议将图片宽度100%显示
相似问题
登录后可查看更多问答,登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星