老师请帮看下代码是否需要完善?
来源:2-4 编程练习
Nyakoonya
2020-08-21 17:01:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body,div,span{
margin: 0;
padding:0;
}
.nav{
width: 1100px;
height: 100px;
background: black;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -550px;
}
.navbar{
width: auto;
height: 20px;
position: absolute;
right:0;
top: 50%;
margin-top: -10px;
color: #fff;
}
.list{
margin: 30px;
}
.list a{
text-decoration: none;
color: #fff
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
</div>
<div class="navbar">
<span class="list"><a href="#">课程</a></span>
<span class="list"><a href="#">职业路径</a></span>
<span class="list"><a href="#">实战</a></span>
<span class="list"><a href="#">猿问</a></span>
<span class="list"><a href="#">手记</a></span>
</div>
</div>
</body>
</html>
1回答
好帮手慕久久
2020-08-21
同学你好,代码中有如下问题可优化:
1. a标签没有完全包裹图片:
原因是图片具有特殊性,它无法撑开a标签。
建议将a标签转成块级元素,如下:
另外,logo所在的父元素高度超出:
原因是图片是行内元素,底部有默认的间隙。
建议将它也转成块级元素:
2. 文字所在的父元素navbar是垂直居中的,但是文字不一定是垂直居中的,因为不确定文字在父元素navbar中是否是垂直居中的。
建议文字垂直居中使用行高实现,如下:
如果我的回答帮到了你,欢迎采纳,祝学习愉快!
相似问题