使用CSS和HTML的导航栏出现问题_Html_Css_Frontend

使用CSS和HTML的导航栏出现问题

html css

使用CSS和HTML的导航栏出现问题,html,css,frontend,Html,Css,Frontend,我现在是初学者，我需要一些帮助我的网站应该是这样的：导航栏为灰色，白色文本透明。当你进入该页面时，按钮变为黄色但看起来是这样的：吧台上方有一个很大的空白。就在那一页上。单击按钮时，按钮不会变为黄色，文本为黑色如果我可以得到一些关于突出显示的文本的帮助，因为某些原因，它位于一个大的黄色框中，那也太棒了导航栏的CSS 这是该页面的HTML 你能分享你的标记和CSS样式吗？这样就有更多的信息了？很可能是CSS中的某些内容导致了问题编辑：谢谢分享代码。锚点变为黄色的原因是，当锚点处于活动状

我现在是初学者，我需要一些帮助

我的网站应该是这样的：

导航栏为灰色，白色文本透明。当你进入该页面时，按钮变为黄色

但看起来是这样的：

吧台上方有一个很大的空白。就在那一页上。单击按钮时，按钮不会变为黄色，文本为黑色

如果我可以得到一些关于突出显示的文本的帮助，因为某些原因，它位于一个大的黄色框中，那也太棒了

导航栏的CSS

这是该页面的HTML

你能分享你的标记和CSS样式吗？这样就有更多的信息了？很可能是CSS中的某些内容导致了问题

编辑：谢谢分享代码。锚点变为黄色的原因是，当锚点处于活动状态时，您已将其背景色设置为黄色。请参阅以下内容：

此外，我建议您学习如何使用Chrome的devtools来检查标记和样式，以便更轻松地查看布局是如何被破坏的。请参阅此处：

建议，如果您没有回答问题，可能最好添加评论，而不是将其放在回答中对不起，由于没有足够的代表，无法添加评论shrugAh不知道，对不起！

<style>@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
</style>
/* General __________________________*/

* {
    box-sizing: border-box;
}


/*Navbar________________________*/

.menu {
    top: 0;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    background-color: rgba(50, 50, 50, 0.3);
    position: fixed;
    text-decoration: none;
}

li {
    float: left;
}

a {
    display: inline-block;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 22px;
    padding-right: 22px;
    font-weight: bold;
    color: white;
    letter-spacing: 1pt;
}

a:active {
    background-color: #FFCC00;
}

a:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Equipo</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
</head>

<body>
<!--Menú-->
<li><a href="#equipo">Equipo</a></li>
<ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="medio.html">Medio</a></li>
        <li><a href="equipo.html">Equipo</a></li>
        <li><a href="contacto.html">Contacto</a></li>
</ul>

<!--Banner-->
<div class="col-12 banner" id="bannerequipo">
</div>

<!--Cajas-->
<div class="container">
<div class="estante">
    <div class="row">
    <div class="col-3">
        <div class="caja">
            <h1>Defendamos juntos el medio ambiente</h1>
        </div>
    </div>
    <div class="col-3">
        <div class="caja">
            <h3>Programas</h3>
            <img src="img/logo_onu.png" alt="Logo de la ONU">

            <p>El <a href="https://www.unenvironment.org/es">Programa de las Naciones Unidas para el Medio Ambiente</a> es el portavoz, dentro del sistema de la ONU, para la coordinación de actividades y toma de iniciativas de conciencia global.</p>
        </div>
    </div>
    <div class="col-3">
        <div class="caja">
            <h3>Activistas</h3>
            <img src="img/logo_greenpeace.png" alt="Logo de Greenpeace">
            <p>La ONG <a href="https://www.greenpeace.org/argentina/"> Greenpeace</a> es un ejemplo de movimiento que defiende el medio ambiente, y está integrado por más de 3 millones de personas en 55 países que actúan para poner fin a los atentados del humano contra la naturaleza.</p>
        </div>
    </div>
    <div class="col-3">
        <div class="caja">
            <h3>Voluntarios</h3>
            <p>En Latinoamérica existen diversas iniciativas que nuclean a la población preocupada por el impacto medioambiental que tienen las decisiones políticas, y a técnicos especializados en el medio ambiente, entre las cuales destacamos:</p>
<!--links-->
            <a href="http://laredvida.org">Red Vida (Lat)</a><br>
            <a href="http://www.movusuruguay.org">Movus (Uy)</a><br>
            <a href="http://gudynas.com">Gudynas.com (Uy)</a><br>
            <a href="http://porelagua.sejuntalagente.org">Asamblea por el agua (Uy)</a>
        </div>
    </div>
    </div>
</div>
</div>

<!--Footer-->
        <div class="col-12" id="footer"><img src="img/logo.png">
            <h4>Lic. en Diseño de Comunicación Visual</h4>
            <h5>FADU | UDELAR</h5>
        </div>

</body>

</html>