请老师检查一下
来源：3-10 编程练习
qq_慕用6596887
2020-12-17 20:58:53
# 具体遇到的问题
请问达到要求的效果了吗？
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*在此处补充代码*/
header {
display:flex;
justify-content:space-around;
align-items:center;
height: 60px;
background-color: #000;
font-size: 16px;
}
.logo {
display:inline-flex;
align-items:center;
justify-content: center;
}
.nav {
display:inline-flex;
justify-content:space-between;
align-items:center;
height: 60px;
list-style-type: none;
}
.nav li {
width: 120px;
color: #fff;
}
.login {
display:inline-flex;
justify-content:space-between;
align-items: center;
height: 60px;
width: 100px;
}
.login input {
background-color: orange;
color: white;
border:none;
border-radius: 5px;
height: 20px;
}
</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回答
-
好帮手慕久久
2020-12-18
同学你好，代码中有如下问题：
1、元素默认的padding、margin等样式没有消除：
由于在不同的浏览器上，元素默认的margin和padding有差异，不清除默认样式会导致在不同的浏览器上页面效果有差异。
建议使用通配符选择器，去掉多余的margin和padding，如下：
2、中间导航，文字在.nav中没有居中显示：
建议调整此处的样式：不给li设置固定宽度，而是给.nav设置固定宽度，这样更规范，如下：
3、优化建议：
去掉默认样式后，右侧按钮文字紧挨边框，样式不好看：
建议添加padding，如下：
4、logo没必要设置弹性布局，如下样式可删除：
5、header设置了弹性盒子之后，子元素就会在一行显示，所以子元素没必要设置成inline-flex，直接设置成flex即可，如下：
祝学习愉快！
0
相似问题