Nav не отображается - PullRequest
Новая
       0

Nav не отображается

0 голосов
/ 05 мая 2020

Я новичок в HTML и CSS, и я хотел начать с простого веб-макета, который я нашел. Веб-макет начинается с lo go, который отображается в браузере, а созданный мной nav - нет. Зачем?

Это связано с тем, что я использовал% для размера?

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Weblayout on IJ</title>

</head>


<body>

<header class="title">

    <h1>
        Logo
    </h1>

</header>

<nav class="menu">
</nav>

</body>


</html>

CSS

body{
    background-color: #ada6a0;
}

.title{
    color: #f3f2f2;

    display: flex;
    justify-content: center;
}

.menu{
    display: flex;
    justify-content: center;
    width: 80%;
    height: 7%;
    background-color: #ffffff;
}

Ответы [ 2 ]

2 голосов
/ 05 мая 2020

Вам нужно добавить несколько ссылок или кнопок на панель навигации, чтобы она отображалась. Примерно так. 

body{
    background-color: #ada6a0;
}

.title{
    color: #f3f2f2;

    display: flex;
    justify-content: center;
}

.menu{
    display: flex;
    justify-content: center;
    width: 80%;
    height: 7%;
    background-color: #ffffff;
}
<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Weblayout on IJ</title>


</head>


<body>

<header class="title">

    <h1>
        Logo
    </h1>

</header>

<nav class="menu">

<a href="www.google.com">Google</a> |
<a href="www.youtube.com">Youtube</a> |

</nav>

</body>


</html>

Для получения дополнительной информации я использовал этот сайт, чтобы помочь мне в большинстве HTML связанных вещей: https://www.w3schools.com/tags/tag_nav.asp

2 голосов
/ 05 мая 2020

Если вы ничего не добавляете на панель навигации, чего вы ожидаете?

Чрезвычайно простой пример: 

body{
    background-color: #ada6a0;
}

.title{
    color: #f3f2f2;

    display: flex;
    justify-content: center;
}

.menu{
    display: flex;
    justify-content: center;
    width: 80%;
    height: 7%;
    background-color: #ffffff;
}
<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Weblayout on IJ</title>


</head>


<body>

<header class="title">

    <h1>
        Logo
    </h1>

</header>

<nav class="menu">
<button>
Button 1
</button>
<button>
Button 2
</button>
<button>
Button 3
</button>
</nav>

</body>


</html>

Если вы хотите увидеть какие-либо советы, я предлагаю использовать bootstrap, чтобы вы могли увидеть, как это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...