Nav未显示

问题描述 投票:0回答:1

我是html和CSS的新手,我想从发现的简单网络布局开始。网络布局以徽标开头,该徽标显示在浏览器中,但我创建的导航则不显示。为什么?我使用%作为尺寸与这个事实有关吗?

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;
}

html css
1个回答
0
投票

如果您不向导航栏添加任何内容,您会期望什么?

非常简单的例子:

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>

如果您想了解我建议使用引导程序的任何技巧,那么您可以了解其工作原理。

© www.soinside.com 2019 - 2024. All rights reserved.