麻烦老师检查下代码,谢谢
来源: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属性实现整体内容居中显示,参考如下

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

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

建议参考如下修改

祝学习愉快!
相似问题
回答 2
回答 1
回答 1
回答 1
回答 1