我知道这段代码真的杂乱无章，但这是我的第一个项目，我仍在学习如何正确对齐代码。在CSS之前，我已经尝试过使用h2 ::: margin，这有点奏效，但随之而来的是关于文本格式的其他问题。我已经看到可以借助JavaScript来达到预期的结果，但是我对此完全不满意。 希望在座的各位能帮助我解决这个问题。
function openNav() {
document.getElementById("mySidenav").style.width = "260px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}body {
background-image: url('https://i.imgur.com/oGNxInf.jpg');
background-size: cover;
margin-top: ;
}
h1 {
position: relative;
text-align: center;
color: orange;
padding: 30px 50px;
margin-left: 0px;
bottom: 15px;
}
figure {
text-align: center;
}
/*nav{
background-color: white;
background-size: ;
/*overflow: hidden; hat verhindert, dass Fenster aufpoppen
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
margin: 20px 20px;
padding:20px 20px;
} */
/*.topbar a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background-color: gray;
}*/
.input {
float: left;
text-align: ;
padding: 5px 0px;
margin: 10px 0px 10px 800px;
}
button {
float: left;
text-align: center;
padding: 3px 3px;
margin: 10px 0px 10px 0px;
}
.acc {
float: left;
margin: 10px 0px 10px 60px;
}
ul ul {
float: left;
display: none;
background: black;
top: 100%;
padding: 0px 0px;
width: 100%;
}
ul li:hover>ul {
display: block;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
font-size: 6;
padding: 0px 0px;
text-align: center;
}
#topbar {
background: black;
background-size: ;
position: fixed;
top: 0;
left: 0;
padding: 0 0px;
margin: 0;
border-radius: 0;
display: inline-table;
width: 100%;
z-index: 2;
}
ul:after {
content: "";
clear: both;
display: block;
padding: 0px 0px;
}
ul li:hover {
background: gray;
padding: 0px 0px;
}
ul li:hover a {
color: white;
}
ul li a {
display: block;
padding: 15px 40px;
color: orange;
text-decoration: none;
font-size: 100%;
}
ul li ul {
display: none;
position: absolute;
padding: 0px 0px;
}
ul li ul li {
width: 100%;
padding: 0px 0px;
margin: 0px 0px;
text-align: center;
}
.li {
width: 150px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: black;
overflow-x: hidden;
padding-top: 30px;
transition: 0.5s;
padding-left: 5px;
}
.sidenav a {
padding: 8px 8px 30px 10px;
font-size: 20px;
color: orange;
display: block;
transition: 0.5s;
text-decoration: none;
}
.sidenav a:hover {
color: white;
}
.sidenav .close {
position: absolute;
top: 0;
right: 0px;
font-size: 30px;
padding-top: 0px;
}
.konto {
color: orange;
padding-left: 10px;
padding-bottom: 20px;
text-decoration: underline orange;
}
.Header {
position: relative;
width: 1050px;
height: 100px;
background-color: brown;
padding: 0;
margin-top: 160px;
left: 300px;
z-index: 1;
}
.Header a {
position: relative;
padding: 0px 50px;
text-decoration: none;
color: orange;
bottom: 50px;
left: 140px;
}
.Header a:hover {
color: white;
}
.textblock {
position: relative;
border: solid 3px;
width: 1045px;
height: 3500px;
margin-top: ;
left: 299px;
background: rgba(100, 100, 100, 0.5)
}
.text {
width: 800px;
padding-left: 20px;
}
h2 {
border-bottom: solid 1px black;
padding-top: 0px;
cursor: pointer;
padding-left: 20px;
margin: 0;
position: ;
top: -20px;
}
ol li {
padding: 10px;
margin-top: px;
}
.anchor {
position: relative;
top: ;
}
details>summary h2 {
color: black;
padding-top: ;
cursor: pointer;
}
details summary {
list-style: none;
}
summary:before {
content: "֍";
color: red;
cursor: pointer;
position: relative;
top: px;
}
details[open] summary:before {
content: "֎";
position: relative;
top: px;
cursor: pointer;
}
summary {
height: 100;
margin: 0;
padding: 0;
}
h2::before {
display: block;
content: "";
margin-top: ;
padding-top: ;
pointer-events: none;
}
p {
position: relative;
top: -20px;
}<!doctype html>
<html>
<head>
<title>Aldia, seeker of truth</title>
</head>
<body>
<ul id="topbar">
<li class="li"><a href="index.html">Home</a></li>
<li class="li"><a href="#">Characters</a>
<ul>
<li><a href="#">Bosses</a></li>
<li><a href="#">NPC's</a></li>
<li><a href="#">Merchants</a></li>
</ul>
</li>
<li class="li"><a href="#">World</a>
<ul>
<li><a href="#">Areas</a></li>
<li><a href="#">Shortcuts</a></li>
<li><a href="#">Bonfires</a></li>
</ul>
</li>
<li class="li"><a href="#">Weapons</a>
<ul>
<li><a href="#">One-Handed</a></li>
<li><a href="#">Two-Handed</a></li>
<li><a href="#">Ranged Weapons</a></li>
</ul>
</li>
<input class="input" type="text" placeholder="Search">
<button type="submit"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/OOjs_UI_icon_search-ltr.svg/2000px-OOjs_UI_icon_search-ltr.svg.png" height="10px" width="10px"></button>
<a onclick="openNav()" class="acc" href="#create"><img src="http://getdrawings.com/free-icon/google-account-icon-65.png" height="25px" width="25px"></a>
</ul>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="close" onclick="closeNav()">×</a>
<h2 class="konto">Account-Options</h2>
<a href="#">Log In</a>
<a href="#">Register</a>
<a href="#">Delete</a>
<a href="#">Manage</a>
</div>
<div class="Header">
<h1>Aldia, scholar of the first sin</h1>
<a href="#Description">Description</a>
<a href="#Lore">Lore</a>
<a href="#Dialogue">Dialogue</a>
<a href="#Items">Items</a>
<a href="#Gallery">Gallery</a>
</div>
<div class="textblock">
<figure>
<img src="https://i.imgur.com/VqTZcGU.png" height="640" width="588" />
<div>
<figcaption>Aldia has become one with the flame after his last experiment turned him into a charred, immortal being.</figcaption>
</div>
</figure>
<div class="text">
<details open>
<summary>
<h2 id="Description" class="anchor">Description</h2>
</summary>
<!--<button type="button" data-toggle="collapse" data-target: "#Des" height="3px" width="3px"></button>-->
<p id="Des" class="collapse">All we see of Aldia are his head and shoulders, his skin color turned gray like ash, maybe caused by the flames that surround his presence. It is speculated that the parts the player sees of Aldia are only part of a giant body that he inherited
after conducting his last experiment. The roots on his head resemble hair and a read eye orb is in one of his sockets. <br>His voice is a mixture of many different voices at one point the Emerald Herald Shanalotte can be heard talking out of
Aldia.</p>
</details>
<details open>
<summary>
<h2 id="Lore" class="anchor">Lore</h2>
</summary>
<p>Aldia is one of the most interesting characters in the dark souls universe. He's tried to uncover the secrets of life by conducting several experiments on others and on himself. He always thought he would find the answer to all his questions in
the curse of the undead, hence why he researched it's origins to a great extend.<br> Discovering the falsehood of Gwyns linking of the first flame, Aldia quickly proclaimed it as "the first sin". As a consequence of the first linking of the
fire, men assumed a fleeting form for every time the fire would fade. They would return to their natural state of being hollow, loosing a piece of themselves for every death they experience. The dark that churns within men marks them as human,
the dark sign limits the boundaries of their humanity, making them less of a human with every loss of life. Aldia sought to find a path that exists outside of the cycle of light and dark, shattering the yoke that binds all humans.<br> The ancient
dragon that is found at the top of dragon shrine is only an illusion created by Vendricks older brother with a giants soul and dragon bones. He probably was inspired by the immortal dragons of the age of ancients, as they exist outside of the
cycle Aldia seeks to break out of. In the age of ancients there was no fire, no dark nor life or death, just a never changing landscape shrouded by fog, consisting of only archtrees and everlasting dragons.<br>In an attempt to create a being
with these properties the Emerald Herald was fabricated but she did not come out as intended. Later on she may has served as means for Aldia to obtain a great amount of souls to become a true monarch, in the end he failed his goal even secluding
his soul from his body, which would explain why we don't get a soul after fighting him at the throne of want. He even narrates the ending indicating that he keeps on living even after his defeat against the bearer of the curse.</p>
</details>
<details open>
<summary>
<h2 id="Dialogue" class="anchor">Dialogue</h2>
</summary>
<p><strong>1st encounter</strong>
<br> "No one has come this far not for a very long while, Young hollow do you wish to shed this curse? Then accept the fate of your ilk and face the trials that await you Unless, you have joined the crestfallen *laughs*"</p>
<p><strong>2nd encounter</strong>
<br> "Young hollow, there are but two paths. Inherit the order of this world, or destroy it. But only a true monarch can make such a choice. Very few indeed have come even this far. And yet your journey is far from over. Half-grown hollow, have
you what it takes, truly?"</p>
<p><strong>3rd encounter</strong>
<br> "Young hollow, seek after Vendrick. He who almost became a true monarch. Vendrick is certain to guide your way Fledgling Hollow, may we meet again."</p>
<p><strong>Undead Crypt</strong>
<br> "Heheh, I believe we’ve been acquainted Young Hollow, conqueror of fear What drives you so to overcome this supposed curse?"
<br> "Life is brilliant. Beautiful. It enchants us, to the point of obsession. Some are true to their purpose though they are but shells, flesh and blood. One man lost his own body, but lingered on as a head. Others chase the charms of love,
however elusive. What is it that drives you?"
<br> "Once, the Lord of Light banished Dark, and all that stemmed from humanity And men assumed a fleeting form. These are the roots of our world Men are props on the stage of life, and no matter how tender, how exquisite A lie will remain a
lie. Young Hollow, knowing this, do you still desire peace?" Choice – No (asks for a yes or no) "Vendrick, the near true monarch, is here and not far off. But what is a king? You, neither born with greatness nor granted it by the fates, what
is it that you seek? You cannot even say yourself. We shall meet again, young Hollow."
</p>
<p><strong>Dragon Shrine</strong>
<br> "Young Hollow. How you grapple, without falter, with this dreadfully twisted world."
<br> "Peace grants men the illusion of life Shackled by falsehoods, they yearn for love, unaware of its grand illusion. Until, the Curse touches their flesh. We are bound by this yoke. As true as the Dark that churns within men."
<br> "All men trust fully the illusion of life. But is this so wrong? A construction, a façade and yet. A world full of warmth and resplendence. Young hollow are you intent on shattering the yoke spoiling this wonderful falsehood?
<p>Yes or no choice</p>
I am Aldia. I sought to shed the yoke of fate, but failed. Now, I only await an answer. Seek the throne. Seek light, Dark, and what lies beyond…"
</p>
<p><em>With peace Aldia probably means the linking of the flame. When the fire is linked the curse temporarily disappears, granting men the illusion called life.</em></p>
<p><strong>Throne of Want</strong>
<br> When entering the first time (speaks with many voices – a woman included): "Many monarchs have come and gone One drowned in poison, another succumbed to flame, Still another slumbers in a realm of ice. Not one of them stood here, as you
do now. You, conqueror of adversities. Give us your answer"
<br> Has no dialogue when re-entering</p>
<p><em>The voice of a woman is the voice of Shanalotte, a being created by Aldia, a part of him.</em></p>
<p><strong>After defeating Aldia:</strong>
<br> "I lost everything but remained here patiently The throne will certainly receive you But the question remains… What do you want, truly? Light? Dark? Or something else entirely…"</p>
<p><strong>When choosing to leave the throne room:</strong>
<br> "There is no path. Beyond the scope of light, Beyond the reach of dark… …what could possibly await us? And yet, we seek it, insatiably Such is our fate…"</p>
</details>
<details open>
<summary>
<h2 id="Items" class="anchor">Items</h2>
</summary>
<ol type="I">
<li><a href="#">Aldia Hammer</a></li>
<li><a href="#">Malformed Shell</a></li>
<li><a href="#">Spitfire Spear</a></li>
<li><a href="#">Aldia Key</a></li>
<li><a href="#">Southern Ritual Band</a></li>
<li><a href="#">Northern ritual Band</a></li>
<li><a href="#">Sunset Staff</a></li>
<li><a href="#">Soul Geyser</a></li>
<li><a href="#">Unleash Magic</a></li>
<li><a href="#">Forbidden Sun</a></li>
</ol>
</details>
<details open>
<summary>
<h2 id="Gallery" class="anchor">Gallery</h2>
</summary>
<p>Hello world I'm cool</p>
</details>
</div>
</div>
</html>
答案 0 :(得分：0)
您可以尝试使用：target伪类并将其添加为.anchor:target{padding-top:100px}
仅在使用锚标记时才添加填充。