麻烦老师检查代码还有没有可以优化的地方？
来源：4-4 自由编程
慕工程2208425
2021-11-11 01:33:43
<!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>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.nav {
background-color: #07cbc9;
width: auto;
height: 48px;
padding: 16px 0;
}
.nav nav {
width: 1200px;
height: 48px;
margin: 0 auto;
}
.logo {
float: left;
width: 260px;
height: 48px;
background-image:url(../Career_Bulider_porject/images/logo.png);
}
.logo h1 {
display: none;
}
.tool {float: right;}
.tool ul li {
float: left;
font-size: 16px;
color: white;
margin-right: 20px ;
line-height: 48px;
}
.tool ul li.end {
margin-right: 0;
}
</style>
</head>
<body>
<div class="nav">
<nav>
<div class="logo">
<h1>Career Builder</h1>
</div>
<div class="tool">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li class="end">CONTACT</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
1回答
-
好帮手慕小李
2021-11-11
同学你好，效果完成的不错，先赞一个。
优化建议如下：
1、当我们鼠标移入按钮时，我们可以加小手状~
如下：
2、下图中的li建议去掉end类名，可以直接在层叠样式表中用:last-child 选择器来实现效果。
3、logo在做处理的时候，可能会出现直接用文字的情况，这一块同学要注意一下，这里没有错，只是弱弱的提示一番。
祝学习愉快~
2
相似问题