老师,麻烦帮我看一下代码有没有要修改的地方
来源:2-4 编程练习
慕9588112
2019-05-13 20:31:44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>经典行布局</title>
<style type="text/css">
*{margin:0;padding:0;}
a{
text-decoration:none;
color:white;
font-size:20px;
margin-right:30px;
}
/* 导航条样式设置 */
.nav{
width:1100px;
height:100px;
background:black;
position:relative;
position:absolute;
top:50%;
left:50%;
margin-left:-550px;
margin-top:-50px;
}
.img{
position:absolute;
top:0px;
left:0;
}
.nav-a{
width:500px;
height:50px;
position:absolute;
top:50%;
right:0;
margin-top:-25px;
line-height:50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="img">
<a href="#">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</a>
</div>
<div class="nav-a">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
</body>
</html>1回答
同学你好!
有需要修改的地方哦~左侧的logo图超出了父级:
这是因为img标签本身存在间隙,会超出父级容器。这是一个特殊现象。
解决方法:这里给img设置浮动,让它display表现为块级


如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题
回答 1
回答 2