麻烦老师检查一下是否还有地方需要改进
来源:2-4 编程练习
粉墨登场
2020-07-17 19:16:44
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>慕课CSS布局基础练习</title> <style> * { margin: 0; padding: 0; text-align: center; font: bold 20px "微软雅黑"; } a { text-decoration: none; color: whitesmoke; } #container { width: 1100px; height: 100px; background: black; position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -550px; } img { width: 251px; height: 84px; position: absolute; left: 0; top: 50%; margin-top: -42px; } ul { width: auto; list-style: none; float: right; position: absolute; top: 50%; margin-top: -30px; right: 15px; } ul>li { float: left; width: 100px; height: 30px; line-height: 30px; margin: 15px; } </style> </head> <body> <div id="container"> <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></a> <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> </body> </html>
2回答
粉墨登场
提问者
2020-07-18
好的谢谢老师
好帮手慕星星
2020-07-18
同学你好,代码布局是可以的。样式上还可以优化:
1、右侧导航定位可以修改为浮动,会简单些。li设置高度与大盒子高度一致,行高高度也一致。虽然导航设置了右侧浮动,但是也设置定位,浮动就失效了。参考
2、导航项之间的间隙不等
这是因为li设置了固定宽度,而文字长短不一,所以间隙也就不等。建议将宽度去掉,修改为左右间距,参考
自己再测试下,祝学习愉快!