<!doctype html>
<html>
<head>
<!--Font Link-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!--CSS-->
<link href="SQIStyle.css" rel="stylesheet" type="text/css">
<title>Solarquake Studios</title>
<!--favicon-->
<link rel="icon" type="image/ico" sizes="128x128" href="Logo.ico"/>
<style>
</style>
</head>
<h1>SolarQuake Studios</h1>
<header>
<img src="Logo.ico" alt="logo" width="80" height="80">
</header>
<body>
<div class="container">
<div class="left-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Games</u></h3>
<p>Upcoming Projects</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="center-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Esports</u></h3>
<p>The Hog Pen</p>
</div>
</div>
</div>
</div>
<div class="right-col">
<div class="scroll-bg">
<div class="scroll-div">
<div class="scroll-object">
<h3><u>Assets</u></h3>
<p>Game Art & Designs</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
© All Rights Reserved.
<p class ="secondary">Follow Us!</p>
<a href="https://www.youtube.com/channel/UChQzAj3OlDO3sqZl7frbY7g"><img src="YTLogo.png"
width="70"
height="70"
alt="logo"></a>
<a href="https://twitter.com/SQdevelopers"><img src="Twitterlogo.png"
width="64"
height="64"
alt="logo"></a>
</div>
</body>
</html>
Die Seitenleiste auf der linken Seite sollte überhaupt nicht hier sein. Ich habe Container für diese Spalten und die Klassen scroll-Div, scroll-BG und scroll-object verwendet, ohne Fortschritte zu machen. Das ist bisher mein gesamter CSS-Code. Dank im Voraus.
h1 {
font-size: 40px;
line-height: 62px;
font-family: 'Press Start 2P', cursive;
text-align: center;
color: yellow;
}
h2 {
font-size: 40px;
color: white;
font-family: 'Press Start 2P', cursive;
}
h3 {
color: white;
}
header {
text-align: center;
padding-bottom: 10px;
}
.container div {
box-sizing: border-box;
min-height: 250px;
margin-left: 6.5%;
}
.left-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.right-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.center-col {
width: 25%;
float: left;
text-align: center;
color: floralwhite;
}
.footer {
clear: both;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
color: yellow;
font-size: 7px;
}
body {
font-size: 20px;
font-family: 'Press Start 2P', cursive;
background-color: white;
background-image: url("Space.png");
}
.scroll-bg {
background-color: yellow;
width: 375px;
margin: 10% auto;
text-align: center;
}
.scroll-div {
background: rgb(0, 0, 0);
height: 400px;
overflow: hidden;
overflow-y: scroll;
text-align: center;
}
.scroll-object {
color: white;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
text-align: center;
}
Ich habe versucht, die linke Seitenleiste zu entfernen, aber sie war gelb. Ich kann die Quelle im Code nicht finden. Geben Sie hier eine Bildbeschreibung ein
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
真是一团糟。
您将左侧的每个 div 的边距设置为 6.5%。 将 .container div（意味着容器内的每个 div 都会有 6.5% 的边距）更改为 .container 并删除边距。并在每个 col 类中添加左右边距。
黄色侧边栏在那里是因为你有一个带有 class="scroll-bg" 的 div 因此，从 css 中删除scroll-bg 部分，并从 html 中删除它的引用。
### Remove #### .scroll-bg { background-color: yellow; width: 375px; margin: 10% auto; text-align: center; }工作示例 - https://jsbin.com/wubuqolumo/edit?html, CSS，输出