老师请检查,有什么可以优化的地方
来源:2-4 编程练习
keepangry2297447
2020-03-18 10:46:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-4编程练习</title>
<style>
*{
padding: 0;
margin: 0;
}
.nav{
background: #000;
width: 1100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -550px;
margin-top: -50px;
}
ul li,ul{
list-style: none;
text-align: center;
float: right;
color: #fff;
line-height: 100px;
padding: 0 20px
}
</style>
</head>
<body>
<div class="nav">
<div>
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="慕课网">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>提问</li>
<li>猿记</li>
</ul>
</div>
</div>
</body>
</html>
1回答
同学你好,代码布局是可以的。
优化:
1、div高度超出了父容器
这是因为图片为行内元素,有文字特性,默认存在间隙。可以将图片设置为块元素,然后左浮动显示:
2、导航项显示顺序与效果图中相反。这是因为li设置了右浮动,排列在前面的元素会先显示到右侧。可以修改为左浮动,整个盒子右侧浮动
自己修改测试下,祝学习愉快!
相似问题