问题描述
[！[
const navBtn = document.querySelector(".nav-toggle");
const showLinks = document.querySelector(".show-links");
const links = document.querySelector(".links");
navBtn.addEventListener("click",() => {
links.classList.toggle("show-links");
})* {
box-sizing: border-box;
margin: 0;
padding:0;
}
body {
font-family: 'Lemonada',cursive,sans-serif;
}
header {
background:black;
width:100%;
z-index: 999;
}
img {
border-radius: 100%;
height: 70px;
}
.center {
display:flex;
justify-content: space-between;
align-items: center;
padding:.87rem;
}
.nav-toggle{
border-color: transparent;
font-size:1.5rem;
background:rgb(238,242,15);
cursor: pointer;
color:black;
transition:all 300ms ease-in;
}
.nav-toggle:hover{
transform:rotate(90deg);
color:rgb(153,156,5);
}
.links{
list-style-type: none;
}
.links a {
display: block;
text-decoration: none;
text-transform: capitalize;
color:floralwhite;
letter-spacing:0.25rem;
padding: 0.5rem 1rem;
transition:all 300ms ease-in;
}
.links a:hover {
background:rgb(28,28,12);
color:#49a6e9;
padding-left:1.5rem;
}
.links {
height:0;
overflow:hidden;
transition:all 500ms ease-in-out;
}
.show-links {
height: 9rem;
}
#home {
border: 8px ridge green;
max-width:100%;
margin:1rem;
padding:1rem;
overflow-wrap: break-word;
}
#about > iframe{
width:95%;
margin:.87rem;
}
#contact{
margin:0 auto;
margin-top:1rem;
}
#submit{
border-color: transparent;
font-family:sans-serif;
font-weight: bold;
padding:0.6rem;
background:rgb(168,168,45);
color:black;
font-size:1.4rem;
border-radius: 20%;
cursor:pointer;
box-shadow:2px 2px rgb(135,135,38);
position: relative;
margin:1rem;
display: block;
margin:0 auto;
margin-top:1rem;
margin-bottom:0.75rem;
}
#submit:active{
box-shadow: 0 0 0 rgb(168,45);
transform:translate(2px,2px);
}
#email{
display: block;
width:94%;
margin:0 auto;
padding:1rem;
}
.footer{
background: black;
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.links-footer{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.links-footer a{
color:floralwhite;
text-decoration:none;
text-transform: capitalize;
letter-spacing:0.25rem;
padding: 0.5rem 1rem;
line-height: 5;
align-items:flex-end;
}
.address{
color:floralwhite;
line-height: 3 ;
font-size:0.85rem;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
@media screen and (min-width:768px){
.nav-toggle{
display:none;
}
#nav-bar{
display:flex;
justify-content: space-between;
}
.links{
display: flex;
font-size:1.4rem;
align-items: center;
height: auto;
}
.links a:hover{
padding: 0.5rem 1rem;
color:rgb(165,213,248);
background: black;
}
#home{
max-width:50%;
margin:0 auto;
margin-top:1rem;
}
#about > iframe{
max-width:50%;
display: flex;
justify-content: center;
margin:0 auto;
margin-top:1rem;
}
#email{
display: block;
width:50%;
margin:0 auto;
padding:1rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lemonada&display=swap" rel="stylesheet">
<link rel="stylesheet" href="product.css">
<title>Product Land Page</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="center">
<img src="data:image/png;base64,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" alt="" id="header-img">
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="links ">
<li><a class="nav-link" href="#home">home</a></li>
<li><a class="nav-link" href="#about">about us</a></li>
<li><a class="nav-link" href="#contact">contact</a></li>
</ul>
</nav>
</header>
<div id="home">
<p>
A beehive is an enclosed,man-made structure in which some honey bee species of the subgenus Apis live and raise their young.
Though the word beehive is commonly used to describe the nest of any bee colony,scientific and professional literature distinguishes nest from hive.
Nest is used to discuss colonies which house themselves in natural or artificial cavities or are hanging and exposed.
Hive is used to describe an artificial,man-made structure to house a honey bee nest.
</p>
</div>
<div id="about">
<iframe id="video" height="365" src="https://www.youtube.com/embed/RewbGiiBFd4" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="contact">
<form action=" https://www.freecodecamp.com/email-submit" id="form">
<input type="email" id="email" required placeholder="Enter your e-mail address">
<input type="submit" id="submit">
</form>
</div>
<footer class="footer">
<div class="links-footer">
<ul class=" ">
<li><a class="" href="#home">home</a></li>
<li><a class="" href="#about">about us</a></li>
<li><a class="" href="#contact">contact</a></li>
</ul>
</div>
<div class="address">
<h4>Our Address</h4>
<address>
121,Clear Water Bay Road<br>
Clear Water Bay,Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
</address>
</div>
</footer>
<script src="product.js"></script>
</body>
</html>这个问题我不知道该怎么解释，但是当我使用chrome开发工具缩小页面尺寸时，请检查响应式设计。如果您在450像素以下更改视图大小，则在页脚和具有黑色的页眉旁边还会显示白色。有人知道为什么会发生这种情况吗？
解决方法
好的，所以我认为您应该给主体一个明确的宽度。 我知道您给页眉和页脚设置了100％的宽度，但是100％的宽度是使元素的内容区域完全等于其父级的显式宽度— 但仅在其父级具有显式宽度时” >。
,像这样替换CSS
#about > iframe {
width: calc(100% - 1.74rem);
margin:.87rem;
}
const navBtn = document.querySelector(".nav-toggle");
const showLinks = document.querySelector(".show-links");
const links = document.querySelector(".links");
navBtn.addEventListener("click",() => {
links.classList.toggle("show-links");
})* {
box-sizing: border-box;
margin: 0;
padding:0;
}
body {
font-family: 'Lemonada',cursive,sans-serif;
}
header {
background:black;
width:100%;
z-index: 999;
}
img {
border-radius: 100%;
height: 70px;
}
.center {
display:flex;
justify-content: space-between;
align-items: center;
padding:.87rem;
}
.nav-toggle{
border-color: transparent;
font-size:1.5rem;
background:rgb(238,242,15);
cursor: pointer;
color:black;
transition:all 300ms ease-in;
}
.nav-toggle:hover{
transform:rotate(90deg);
color:rgb(153,156,5);
}
.links{
list-style-type: none;
}
.links a {
display: block;
text-decoration: none;
text-transform: capitalize;
color:floralwhite;
letter-spacing:0.25rem;
padding: 0.5rem 1rem;
transition:all 300ms ease-in;
}
.links a:hover {
background:rgb(28,28,12);
color:#49a6e9;
padding-left:1.5rem;
}
.links {
height:0;
overflow:hidden;
transition:all 500ms ease-in-out;
}
.show-links {
height: 9rem;
}
#home {
border: 8px ridge green;
max-width:100%;
margin:1rem;
padding:1rem;
overflow-wrap: break-word;
}
#about > iframe {
width: calc(100% - 1.74rem);
margin:.87rem;
}
#contact{
margin:0 auto;
margin-top:1rem;
}
#submit{
border-color: transparent;
font-family:sans-serif;
font-weight: bold;
padding:0.6rem;
background:rgb(168,168,45);
color:black;
font-size:1.4rem;
border-radius: 20%;
cursor:pointer;
box-shadow:2px 2px rgb(135,135,38);
position: relative;
margin:1rem;
display: block;
margin:0 auto;
margin-top:1rem;
margin-bottom:0.75rem;
}
#submit:active{
box-shadow: 0 0 0 rgb(168,45);
transform:translate(2px,2px);
}
#email{
display: block;
width:94%;
margin:0 auto;
padding:1rem;
}
.footer{
background: black;
width:100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.links-footer{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.links-footer a{
color:floralwhite;
text-decoration:none;
text-transform: capitalize;
letter-spacing:0.25rem;
padding: 0.5rem 1rem;
line-height: 5;
align-items:flex-end;
}
.address{
color:floralwhite;
line-height: 3 ;
font-size:0.85rem;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
@media screen and (min-width:768px){
.nav-toggle{
display:none;
}
#nav-bar{
display:flex;
justify-content: space-between;
}
.links{
display: flex;
font-size:1.4rem;
align-items: center;
height: auto;
}
.links a:hover{
padding: 0.5rem 1rem;
color:rgb(165,213,248);
background: black;
}
#home{
max-width:50%;
margin:0 auto;
margin-top:1rem;
}
#about > iframe{
max-width:50%;
display: flex;
justify-content: center;
margin:0 auto;
margin-top:1rem;
}
#email{
display: block;
width:50%;
margin:0 auto;
padding:1rem;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lemonada&display=swap" rel="stylesheet">
<link rel="stylesheet" href="product.css">
<title>Product Land Page</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="center">
<img src="data:image/png;base64,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" alt="" id="header-img">
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="links ">
<li><a class="nav-link" href="#home">home</a></li>
<li><a class="nav-link" href="#about">about us</a></li>
<li><a class="nav-link" href="#contact">contact</a></li>
</ul>
</nav>
</header>
<div id="home">
<p>
A beehive is an enclosed,man-made structure in which some honey bee species of the subgenus Apis live and raise their young.
Though the word beehive is commonly used to describe the nest of any bee colony,scientific and professional literature distinguishes nest from hive.
Nest is used to discuss colonies which house themselves in natural or artificial cavities or are hanging and exposed.
Hive is used to describe an artificial,man-made structure to house a honey bee nest.
</p>
</div>
<div id="about">
<iframe id="video" height="365" src="https://www.youtube.com/embed/RewbGiiBFd4" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="contact">
<form action=" https://www.freecodecamp.com/email-submit" id="form">
<input type="email" id="email" required placeholder="Enter your e-mail address">
<input type="submit" id="submit">
</form>
</div>
<footer class="footer">
<div class="links-footer">
<ul class=" ">
<li><a class="" href="#home">home</a></li>
<li><a class="" href="#about">about us</a></li>
<li><a class="" href="#contact">contact</a></li>
</ul>
</div>
<div class="address">
<h4>Our Address</h4>
<address>
121,Clear Water Bay Road<br>
Clear Water Bay,Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
</address>
</div>
</footer>
<script src="product.js"></script>
</body>
</html>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...