老师请检查作业。
来源：2-4 编程练习
鲸落2020
2020-03-30 17:24:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{width:1200px;
height:3000px; }
.mian{width:1100px;
height:100px;
background: black;
position:fixed;
top:50%;
left: 50%;
margin-top: -50px;
margin-left: -550px;
}
.logo{float: left;
margin-right: 150px;}
.tit ul li{list-style: none;
font-size: 25px;
font-weight: bold;
float:left;
color: #ffffff;
padding: 0 30px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="mian">
<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></div>
<div class="tit">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实践</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码问题如下：
1、如下，logo图撑开的父级的高度，超出了。如下：
这是由于img标签本身的特性，存在间隙。建议：可以给父级设置font-size为0除去，例：
2、不建议使用给logo设置左外边距的方式调整与导航项之间的间距，虽然效果实现了，但是这个间距需要算，且整体的宽度不一致，这个值也需要修改，建议：可以直接给导航项部分设置右浮动，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
