我仍然是 HTML 和 CSS 的初學者，但我決定嘗試為我朋友的 Discord 服務器撰寫一個資訊表，該表將在第一頁列出員工名單，在第二頁列出規則和資訊頁。
在頂部，我有兩個按鈕。當頁面加載時一切正常，甚至在我切換到第二頁時繼續作業。當我嘗試回傳員工頁面時出現問題。現在，我不確定問題是什么，但有人告訴我，當<div>缺少標簽時，部分通常會混亂。我已經看過了，但我不確定我哪里出了問題。
https://codepen.io/111dev111/full/LYjqYQR
這是我所指的代碼專案。任何幫助，將不勝感激！
@import url(@import url('https://fonts.googleapis.com/css2?family=Petemoss&family=Shadows Into Light&family=Titillium Web:wght@600&display=swap');
body {
background-image: url("https://i.pinimg.com/originals/e5/9a/ff/e59afffab97c822d319f0a92a4b1b2f1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container{
display:flex;
flex-wrap:wrap;
text-align: center;
justify-content: center;
width: 100%;
align-items: center;
/*border-size: 10px;
border-style: solid;
border-color: red;*/
}
.box{
width:100%;
max-width:40%;
margin-top:20px;
margin-bottom:30px;
margin-left:10px;
margin-right:10px;
filter: drop-shadow(8px 8px 10px #211933);
padding:15px;
}
.info {
width:100%;
height:100px;
max-width:40%;
background-color:#ffffff;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
filter: drop-shadow(8px 8px 10px #211933);
padding:15px;
}
.staff {
width:20%;
max-width:40%;
box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
-webkit-box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
-moz-box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
background:#ffffff;
height: 100%;
padding:10px;
padding-top:30px;
padding-bottom:30px;
margin-left:10px;
margin-right:10px;
}
.staff img {border-radius: 50%;}
#Photo {
border: 2px solid red;
}
h1{ color:#211933;
font-family: 'Petemoss', cursive;
font-size:50px;}
p {color: #3f3359;
font-size: 13px;
font-family: 'Titillium Web', sans-serif;}
.buttonmenu {display: inline-block;
width: 20px;
height: 20px;
margin: 0 3px;
border-radius: 50%;
font-size: 1px;
transition: 0.3s;}
.buttonmenu:hover {border-radius: 25%; box-shadow: 0 0 10px #fff, 0 0 10px #fff, 1px 0 10px #fff, 1px 0 10px #fff, -1px 0 10px #fff, -1px 0 10px #fff;}
.credit {
color: #FCFFFE;
font-family: 'Shadows Into Light', cursive;
margin:15px;
}
/*PLEASE DO NOT REMOVE THE CREDIT, I'VE WORKED HARD ON THIS AND WOULD APPRECIATE IT IF MY NAME REMAINS AT THE END AS A LITTLE SIGNATURE.*/
/*IF YOU HAVE ANY QUESTIONS ABOUT THE CODE, FEEL FREE TO CONTACT ME AT FLINTSTONE#4422*/<body>
<center>
<div class="container">
<div class="box">
<div id="title">
<img src="https://see.fontimg.com/api/renderfont4/mLoV2/eyJyIjoiZnMiLCJoIjo2NSwidyI6MTAwMCwiZnMiOjY1LCJmZ2MiOiIjRkZGRkZGIiwiYmdjIjoiIzM1M0Q0QiIsInQiOjF9/TWVldCBUaGUgU3RhZmY/remover.png">
</div>
<div style="height: 30px;">
<a href="#frontpage" class="buttonmenu" style="background: #2b223f;"> .</a>
<a href="#about" class="buttonmenu" style="background: #352a4c;"> .</a>
</div>
</div>
</div>
<div style="height: 550px; margin-top: 10px; overflow: hidden; ">
<a name="home"></a>
<div class="frontpage" style="overflow-y: auto; overflow-x: hidden;">
<div class="container">
<a name="frontpage"></a>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
</div>
<div style="padding: 20px; height: 510px; overflow-y: auto; overflow-x: hidden; display: flex; align-items: center; justify-content: center;">
<a name="about"></a>
</div>
</div>
<!--Content for page 2 goes here-->
<div class="container">
<div class="info">
</div>
<div class="info">
</div>
<div class="info">
</div>
<div class="info">
</div>
</div>
<div class="credit">
Coded by Flintstone#4422
</div>
</div>
</center>
</body>uj5u.com熱心網友回復：
使用id而不是class在您的<div >
uj5u.com熱心網友回復：
您的問題是 <a href="#frontpage" style="background: #2b223f;"> .</a>正在尋找“ID”首頁，但您的首頁 div 是一個類
<div class="frontpage" style="overflow-y: auto; overflow-x: hidden;">
將其更改為
<div id="frontpage" style="overflow-y: auto; overflow-x: hidden;">
你應該很好，
ps id 必須是唯一的，并且您有許多共享的 id ......
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361703.html
上一篇：此版本的CLI僅與Angular版本^13.0.0兼容，但找到了Angular版本12.2.13
下一篇：通過覆寫div元素查看文本