老师帮看下代码，哪些地方需要完善。
来源：2-4 编程练习
仙女3783364
2020-06-03 12:56:57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.continer{width: 1100px;height: 100px;text-align: center;line-height:100px;background-color: black;color: white;overflow: hidden;position:absolute;top:50%;left: 50%;margin-top:-50px;margin-left: -550px; }
.left{position: absolute;left: 0;}
.right{position: absolute;right: 0;}
ul{list-style: none;}
li{float:left;margin-right: 50px;font-size: 20px;}
a{text-decoration: none;color: white;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="continer">
<div class="left">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
</div>
<div class="right">
<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>
</div>
</body>
</html>
1回答
-
好帮手慕糖
2020-06-03
同学你好，代码中需要注意的地方如下：
1、左右两个块，不需要定位，直接设置左浮动与右浮动即可，例：
2、如下，左侧盒子的高度是超出的，因为父级设置的行高是对这个有影响的。
这里左侧不需要设置行高，只有右侧需要，所以不需要设置给父级，单独设置给右侧即可，例：
3、如下，logo图撑开的父级的高度还是有些超出。
这是由于img标签本身的特性，存在间隙。建议：可以给父级设置font-size为0除去，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题