老师，能否请您帮忙检查一下代码哪里可以改进
来源：3-10 编程练习
PADAopanda
2021-08-22 23:34:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航项弹性布局</title>
<style>
header {
width: 100%;
height: 80px;
margin: 0 auto;
background-color: #000;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav {
width: 50%;
height: 80px;
line-height: 80px; /*文字垂直居中*/
text-align: center;
color: white;
list-style: none;
display: flex;
justify-content: space-around;
/* justify-content: space-between; */
}
.nav li{
width: 25%;
cursor: pointer;
}
.nav li:hover{
color: black;
background-color: #ccc;
}
.login input{
padding: 5px 15px; /*扩大内边距*/
margin: 10px; /*扩大外边距*/
color: white;
background-color: rgba(255, 119, 0, 0.911);
border: none; /*去除边框*/
border-radius: 10px; /*边框圆角*/
cursor: pointer;
}
</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>
问题描述：
盒子的width和height一般要怎么设置？我nav的宽擅自用了50%但如果是做项目这边要如何调整呢？
写回答
1回答
-
同学你好，对于你的问题解答如下：
1、代码整体效果实现的不错，不过有一个细节需要调整下：由于ul有默认的内边距，导致导航项距离logo和按钮的间距不同，如下：
建议：可以直接使用通配符，去除所有元素默认的内外边距
另外，ul设置为flex布局后，里面的li默认会自动均分ul剩余的宽度，所以可以不用给li设置宽度，简化代码
2、width和height一般都是根据实际要实现的效果来设置，一般没有固定要求的，灵活应用所学知识实现效果即可。
3、这里使用50%是可以的，如果是实际开发中做项目，一般都会提供设计稿的，根据设计稿测量的结果来设置对应的值即可。
祝学习愉快~
0
相似问题