老师看我写的行吗？
来源：4-4 自由编程
神知
2021-10-21 16:59:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<nav>
<div class="nav-1">
<div class="logo">
<a href="#">Career Builder</a>
</div>
<div class="nav-2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
}
nav{
background: #07cbc9;
width: 100%;
height: 80px;
}
a{
text-decoration: none;
color: #fff;
}
.nav-1{
width: 1200px;
height: 80px;
margin: 0 auto;
}
.nav-1 .logo a{
color: #fff;
font-size: 48px;
line-height: 80px;
float: left;
}
.nav-1 .nav-2{
float:right;
}
.nav-1 .nav-2 ul li{
float: left;
list-style-type: none;
margin-right: 20px;
line-height: 80px;
font-size: 16px;
}
1回答
-
好帮手慕星星
2021-10-21
同学你好，代码布局以及实现效果可以。
优化：在前面练习中有提供图片
https://class.imooc.com/lesson/1607#mid=40715
可以使用这里的图片作为logo，设置如下
祝学习愉快！0
相似问题