老师您好，请检查作业，是否有可以优化的地方呢

・4-4 自由编程，将练习题页面的顶部导航效果实现一下吧~

CSS相关代码：

*{
margin: 0;
padding: 0;
}
header{
height: 80px;
background-color: #07cbc9;
}
header .header-top{
width: 1200px;
margin: 0 auto;
text-align: center;
}
header .header-top .logo{
float: left;
height: 48px;
padding-top: 16px;
color: white;
}
header .header-top nav{
float: right;
}
header .header-top nav ul li{
float: left;
list-style: none;
font-size: 16px;
color: white;
margin: 10px;
padding-top: 20px;
}

HTML相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
<div class="header-top">
<div class="logo">
<h1>Career Builder</h1>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>

lura827 2023-07-24

源自：浮动与定位 4-5 小慕医生项目开发（4）

收起

1回答

好帮手慕小李回答被采纳获得+3积分 2023-07-24 13:12:37

同学你好，代码可以还原顶部。另建议同学要考虑一点，当使用浮动时是否要清除浮动。如下：

这部分是浮动的父级，当我们使用控制台去查看它时发现它本身是没有高度的。当清除浮动后我们在看：

这样做可以使得结构更加“牢固”因为浮动设置后如果不清浮动元素很有可能会扰乱后面的结构。

祝学习愉快！

收起回答

lura827 提问者 #1

感谢老师的答复。
还有一个问题，代码还原顶部是指点击logo的时候回到首页吗？

2023-07-25 09:57:50
好帮手慕小李回复提问者 lura827 #2

1、代码还原是指将顶部按照UI图进行一比一还原。
2、对于点击logo回到首页，在正常项目中来说都会有这样的需求，所以这里直接加上即可。

2023-07-25 10:28:24
lura827 提问者回复好帮手慕小李 #3

好的理解了，感谢老师答复！

2023-07-25 13:25:19