Question

我很好奇在我的简单项目HTML和CSS中发现我的错误。

我对“file.css”中的修改不起作用，但是当我更改“file.css”时，html的另一个组件正常工作。我只是尝试多次更改我的代码，例如： .navegacao-site li，.navegacao-site a，nav li，nav a，旁边一个，旁边的李，但是更糟糕。按照我的代码：

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <title class="título">Studio Platinum</title>
        <meta charset="utf-8" />
        <link rel="icon" href="img/logo2.jpg">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <main>
            <div>
                <img class="logoStudioPlatinum" src="img/logo.jpg" alt="logo do Studio Platinum
            </div>
            <h1>Studio Platinum</h1>


        <aside> 
            <nav class="navegacao-site">
                <ul >
                    <li><a href="index.html">Home</a></li>
                    <li><a href="servicos.html">Serviços</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="videos.html">Videos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </aside>

            <div class="secao-rodape secao-informacoes">
                <h2>Informações</h2>
                <a href="#/contato.html">Nossa Equipe</a>
                <a href="#/index.html">Horario de Funcionamento</a>
                <a href="#/contato.html">Fale Conosco</a>
            </div>
            <div class="secao-rodape secao-localizacao">
                <h2>Localização</h2>
                <p>Studio Platinum</p>
                <p>Rua doSenhor do Roubado, n15</p>
                <p>Telefone: 215 689 752</p>
            </div>
            <div class="secao-rodape secao-saiba-mais">
                <p>Studio Platinum de Odivelas</p>
                <p>O salão com mais likes</p>
                <p>do facebook desta zona</p>
                <button class="button-saiba-mais">Saiba Mais</button>
            </div>
            <div class="secao-rodape secao-facebook">
                <h2>Siga-nos no facebok:</h2>
                <img class="logo-facebook" src="img/Facebook.png" alt="siga a pagina do Studio Platinum no facebook">
            </div>
        </main>
        <footer>
            <div class="rodape">
            </div>
        </footer>
    </body>
</html>

CSS：

.logoStudioPlatinum{
    box-sizing: border-box;
    width: 300px;
    border: 1em solid #b106ff;
    transform: scale(0.5, 0.5);
}
body{
    position: relative;
    background-color: rgb(252, 252, 252);
}
h1{
    float: left;
    color: #000;    
}
.navegacao-site li {
    box-sizing: border-box !important;
    background-color: #7C3D99 !important;
    border: 2px solid #b106ff;
    font-family: serif ;
    margin:  .4em;
    padding: .5em;
    text-align: left;
    width: 6em;
    font-family: "Open Sans Condensed", sans-serif;
    color: #FFF !important;
}

.navegacao-site a{
    color: rgba(99, 170, 140, 0.747);
}
.navegacao-site{
    position: absolute;
    display: block;
    left: 0%;
    top: 30%;
}
.logo-facebook{
    transform: scale(0.5, 0.5);
    position: absolute;
    right: 30%;
    bottom: 10%;
}
.secao-saiba-mais{
    position: absolute;
    bottom: 0%;
    right: 25%;
}
.secao-saiba-mais p{
    text-align: center;
}
.button-saiba-mais{
    color: white;
    background-color: #7C3D99;
    box-shadow: 1px 1px 2px #000;
    padding: .5em;
    position: absolute;
    right: 37%;
    bottom: 5%;

}
.rodape{
    width: 100%;
    position: absolute;
    bottom: -50%;
    display: block;
}
.secao-rodape{
    display: inline-block;
    width: 24%;
    height: 10em;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.secao-rodape a, .secao-rodape p{
    display: block;
    color: rgb(0, 0, 0);
    margin: .5em;
    text-decoration-line: none;
    text-align: center;
}
.secao-rodape h2{
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1em;
}
.secao-rodape .secao-rodape a{
    box-sizing: border-box;
    background-color: #7C3D99;
    padding: .5em;
    margin-top: 3em;
}
.secao-facebook{
    position: absolute;
    right: 0%;
}
.secao-localiacao{
    right: 50%;
}

谢谢你的进步。

Answer 1

Problem is here

<div>
    <img class="logoStudioPlatinum" src="img/logo.jpg" alt="logo do Studio Platinum
</div>

You are missing a "> at the end of alt="logo do Studio Platinum putting in these things would make it work, correct form would be:

<div>
    <img class="logoStudioPlatinum" src="img/logo.jpg" alt="logo do Studio Platinum">
</div>

我的CSS无法正常工作

1 个答案: