麻烦老师检查一下是否还有地方需要改进
来源: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设置了固定宽度,而文字长短不一,所以间隙也就不等。建议将宽度去掉,修改为左右间距,参考

自己再测试下,祝学习愉快!