简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ich entwerfe meine Webseite und frage mich, ob mir jemand sagen kann, wie die linke Seitenleiste hierher gelangt ist und wie ich sie in CSS entfernen kann
P粉741223880
P粉741223880 2024-02-03 23:55:27
0
2
313

<!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">
        &copy; 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

P粉741223880
P粉741223880

Antworte allen(2)
P粉449281068
P粉4492810682024-02-04 20:13:02 2 Etage

真是一团糟。

您将左侧的每个 div 的边距设置为 6.5%。 将 .container div（意味着容器内的每个 div 都会有 6.5% 的边距）更改为 .container 并删除边距。并在每个 col 类中添加左右边距。

Wie +0
Antwort hinzufügen
P粉347804896
P粉3478048962024-02-04 19:59:42 1 Etage

黄色侧边栏在那里是因为你有一个带有 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，输出

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！