麻烦老师检查下代码,谢谢

来源:4-4 自由编程

叫我丽红

2021-04-16 10:14:30

相关代码:

css:
*{
margin: 0;
padding: 0;
}
.header{
height: 60px;
background-color:aqua;
text-align: center;


}

.header .logo-nav{

height: 60px;
margin: 0 auto;

}

ul li{
list-style: none;
}

.header .logo-nav .logo{
float: left;
width: 300px;
height: 60px;
text-align:center;
color: white;
font-size: 16px;
}

.header .logo-nav .nav{
float: right;
width: 700px;
height: 60px;
}

.header .logo-nav .nav ul li{
float: left;
width: 100px;
height: 60px;
line-height: 60px;


}

.header .logo-nav .nav ul li a{
display: inline-block;
text-decoration: none;
color: white;
font-weight: bold;

}

.header .logo-nav .nav ul li a:hover{
background-color: orange;
}






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>career builder</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 网页头部 -->
<div class="header">
<div class="logo-nav">
<div class="logo">
<h2>Career Builder</h2>
</div>

<div class="nav">
<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>


</div>


写回答

1回答

好帮手慕然然

2021-04-16

同学你好,页面实现效果基本还可以,但是存在一些需要优化的地方,具体如下

1、建议给内容盒子logo-nav设置固定的宽度1200px, 结合margin属性实现整体内容居中显示,参考如下

http://img1.sycdn.imooc.com/climg/6078fe330935efe904580209.jpg

2、logo文字建议在蓝色背景盒子中垂直居中显示,参考如下

http://img1.sycdn.imooc.com/climg/6078fe6c09dd630006680298.jpg

3、鼠标移入菜单项时,文字与黄色盒子边缘距离太近,效果不美观,如图

http://img1.sycdn.imooc.com/climg/6078fe920926880306370080.jpg

建议参考如下修改

http://img.mukewang.com/climg/60792ea4098284c008520505.jpg

祝学习愉快!


0

0 学习 · 15276 问题

查看课程