老师，我写对了吗？
来源：3-10 编程练习
xiao白做大事
2021-02-28 23:38:18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在此处补充代码*/
li {
list-style-type: none;
}
header {
display: flex;
justify-content: space-around;
background-color: #000;
height: 57px;
align-items:center
}
header .nav, header .login {
display: flex;
justify-content: space-between;
color: white;
}
header .nav {
width: 600px;
}
header .login {
width: 100px;
}
header .login input {
background-color: orange;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
</body>
</html>
1回答
-
好帮手慕慕子
2021-03-01
同学你好，整体思路是对的，但有些细节需要调整，如下：
1、由于图片默认下方存在空白间距，导致logo区域实际高度溢出导航条，效果不美观，如下图所示：
建议：可以给img设置display:block;属性，消除图片下方的间隙
2、由于ul默认左侧存在空白间距，导致内容水中居中存在误差，如下图所示：
建议：去掉ul默认的间距。
3、按钮有默认的边框，效果不美观，如下图所示：
建议：去掉边框，设置圆角的字体颜色
祝学习愉快~
0
相似问题