【发布时间】：2021-02-12 03:23:37
【问题描述】：
欢迎。我有一个基于 div 的导航栏问题。在我的情况下，导航栏被其他 div 内容溢出。 我现在不知道如何为此页面添加正确的导航栏，因为整个页面都充满了相同的 div 框，我需要所有这些框都可以“灵活”，因为我也想在手机上使用。这将是我朋友的家庭自动化服务器网页。 我希望有人能提供帮助。
body {
background-color: #111;
}
h2 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
position: absolute;
}
.page {
margin-top: 40px;
margin-bottom: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 95%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(400px, 1fr));
grid-gap: 20px;
}
.box {
color: white;
border: 2px solid #696969;
position: relative;
background-color: #333333;
background: -moz-linear-gradient(top, #737373 0%, #333333 100%);
background: -webkit-linear-gradient(top, #737373 0%, #333333 100%);
background: linear-gradient(top, #737373 0%, #333333 100%);
border-radius: 8px;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
.headertop {
height: 40px;
color: white;
border-bottom: 2px solid #696969;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
position: relative;
background-color: #333333;
background: -moz-linear-gradient(top, #008000 0%, #00FF00 100%);
background: -webkit-linear-gradient(top, #008000 0%, #00FF00 100%);
background: linear-gradient(top, #008000 0%, #00FF00 100%);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
.header {
height: 40px;
color: white;
border-bottom: 2px solid #696969;
position: relative;
background-color: #333333;
background: -moz-linear-gradient(top, #008000 0%, #00FF00 100%);
background: -webkit-linear-gradient(top, #008000 0%, #00FF00 100%);
background: linear-gradient(top, #008000 0%, #00FF00 100%);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5);
}
.content {
border: 0px solid #696969;
color: white;
position: relative;
background-color: #333333;
display: grid;
grid-template-columns: 1fr 1fr;
}
.largetext {
text-align: center;
text-decoration: none;
font-size: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.boxtext {
position: relative;
background-color: #333333;
margin-top: 25px;
margin-bottom: 25px;
margin-right: 5px;
margin-left: 5px;
text-align: center;
text-decoration: none;
font-size: 35px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.boximage {
position: relative;
background-color: #333333;
}
.boxbutton {
position: relative;
background-color: #333333;
}
.headertext {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 8px;
margin-left: 6px;
}
.flex-parent {
display: flex;
}
.jc-center {
justify-content: center;
}
.icon {
position: center;
margin: 20px;
cursor: pointer;
width: 85%;
height: 120px;
}
.border {
border: 2px solid #001a34;
border-radius: 12px;
}
.button {
margin: 20px;
background-color: #FF0000;
border: none;
color: #ffffff;
padding: 1em 1em;
text-align: center;
text-decoration: none;
font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: inline-block;
outline: none;
cursor: pointer;
border-radius: 12px;
width: 90%;
height: 90px;
border: 2px solid #800000;
}
.button:hover {
background-color: #8B0000;
color: #ffffff;
}
.button:active {
background-color: #8B0000;
box-shadow: 0 6px#800000;
transform: translateY(4px);
color: #ffffff;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="page">
<div class="container">
<div class="box">
<div class="headertop"><h2 class="headertext">Hálószoba</h2></div>
<div class="content">
<div class="boximage flex-parent jc-center">
<img src="C:\Users\patak\Desktop\Aktuális\Arduino_web_server_atmega2560\Visual studio web pages\centigrade.png" class="icon">
</div>
<div class="boxtext">
<a class="boxtext">Hömérséklet:</a>
<a class="largetext">30°C</a>
</div>
</div>
<div class="header"><h2 class="headertext">Világítás</h2></div>
<div class="content">
<div class="boxbutton flex-parent jc-center">
<button class="button" type="button">OFF</button>
</div>
<div class="boxbutton flex-parent jc-center">
<button class="button" type="button">OFF</button>
</div>
<div class="boximage flex-parent jc-center">
<img src="https://i1.wp.com/fremontgurdwara.org/wp-content/uploads/2020/06/no-image-icon-2.png" class="icon border">
</div>
<div class="boximage flex-parent jc-center">
<img src="https://i1.wp.com/fremontgurdwara.org/wp-content/uploads/2020/06/no-image-icon-2.png" class="icon border">
</div>
</div>
<div class="header"><h2 class="headertext">Foglalatok</h2></div>
<div class="content">
<div class="boxbutton flex-parent jc-center">
<button class="button" type="button">OFF</button>
</div>
<div class="boxbutton flex-parent jc-center">
<button class="button" type="button">OFF</button>
</div>
<div class="boximage flex-parent jc-center">
<img src="https://i1.wp.com/fremontgurdwara.org/wp-content/uploads/2020/06/no-image-icon-2.png" class="icon border">
</div>
<div class="boximage flex-parent jc-center">
<img src="https://i1.wp.com/fremontgurdwara.org/wp-content/uploads/2020/06/no-image-icon-2.png" class="icon border">
</div>
</div>
</div>
</body>【问题讨论】：