我是html和CSS的新手,我想从发现的简单网络布局开始。网络布局以徽标开头,该徽标显示在浏览器中,但我创建的导航则不显示。为什么?我使用%作为尺寸与这个事实有关吗?
<!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>
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;
}
如果您不向导航栏添加任何内容,您会期望什么?
非常简单的例子:
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>
如果您想了解我建议使用引导程序的任何技巧,那么您可以了解其工作原理。