请老师检查下，谢谢！

首页课程实战体系课手记专栏慕课教程

请老师检查下，谢谢！

来源：4-4 自由编程

我不是胖球球

2021-04-21 17:25:45

问题描述：

老师，关于各项宽高的正确数值我不太清楚，很多都是直接写的数字；关于鼠标移入的效果，怎么样才能让颜色区和每个导航标题的区域相同大小呢？请老师检查下代码

html部分

相关代码：

<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">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!-- header区域 -->
    <header>
        <div class="headertop">
            <div class="logo">
                <h1>Career Builder</h1>
            </div>
            <div class="main-nav">
                <ul>
                    <li><a href="" class="a1">HBME</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>
    </header>

问题描述：

css部分

相关代码：

header {
    width: 100%;
    height: 80px;
    background-color:#07CBC9;
}

header .headertop {
    height: 80px;
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}

/* logo左浮动 */
header .headertop .logo {
    float: left;
    height: 48px;
    padding-top: 16px;
    text-align: center;
    color: white;
    font-size: 16px;
}

/* 导航栏右浮动 */
header .headertop .main-nav {
    float: right;
    height: 80px;
}

/* li左浮动 */
header .headertop .main-nav ul li {
    float: left;
    margin-left: 20px;
}

header .headertop .main-nav ul li a { 
    font-size: 16px;
    color: rgb(250, 244, 244);
    display: inline-block;
    line-height: 80px;
}

header .headertop .main-nav ul li a:hover { 
    background-color: rgb(207, 190, 190);
}