• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

删除网页下面的空间

html 来源:Caleb Smith 4次浏览

我想删除我的整个网页下方的这个小空间。以下将是我的CSS页面和我的HTML页面。它显示了我的CSS从本地到样式表之间的一段时间。不知道它可能是什么。任何想法将不胜感激!谢谢!删除网页下面的空间

HTML:

<html 
    <head> 
     <link rel="icon" href="Pictures/BluBeatsLogo2.png"> <!-- Icon in browser tab --> 
     <link rel="stylesheet" type="text/css" href="styling.css"><!-- Stylesheet Import --> 

     <style>    
      .music{ 
       padding-top:130px; 
       text-align: center; 
      } 

      .music h1{ 
      font-size:64px; 
      color:rgba(75,75); 
      text-shadow: -3px 3px rgb(255,255,255); 
      text-align: center; 
      } 
     </style> 
    </head> 

    <body> 
     <div class=header> 
     <a href ="index.html"> 
<img src = "Pictures/BluBeatsLogo2.png" alt="Logo.png" style="height:150px; width:150px; grid-column:1/2; grid-row:1/1;margin-bottom:0px; vertical-align: bottom;"> 
     </a> 
    <ul class="nav"> 
     <li><a href="index.html" style="color:white;">Home</a></li> 
     <li><a href="music.html" style="color:white;">Music</a></li> 
     <li><a href="beats.html" style="color:white;">Beats</a></li> 
     </ul> 
    </div> 
    <!-- End of Header --> 

    <div class=main> 
     <div class=music> 

      <h1>Latest Tracks</h1> 

<iframe width="75%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/223570682&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe> 
     </div><!-- End of Music --> 
    <div class=connect> 
     <h1>Connect</h1> 
     <div class=connectList> 
      <ul> 
       <a href="https://www.instagram.com/blubeats/" target="_blank"> 
       <li><img src = "Pictures/InstagramLogo.png" alt=IGLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Instagram</li> 
       </a> 

       <a href="https://soundcloud.com/blubeatsmusic/" target="_blank"> 
       <li><img src = "Pictures/SoundCloudLogo.png" alt=SoundCloudLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> SoundCloud</li> 
       </a> 

       <a href="https://open.spotify.com/artist/4RGM8nv60UrFGArNSyCZdY" target="_blank"> 
       <li><img src = "Pictures/SpotifyLogo.png" alt=SpotifyLogo.png style="height:64px; width:64px; margin-right:0px; vertical-align:middle; padding-right:15px;"> Spotify</li> 
       </a> 

      </ul> 
     </div><!-- End of connectList --> 
    </div><!--End of connect --> 
    <footer> 
    <h1>Contact</h1> 
     <ul> 
      <li>Email: [email protected] </li> 
     </ul> 
    </footer><!-- End of Footer --> 
    </div><!-- End of Main --> 
    </body>`enter code here` 
</html> 

CSS:

/字体导入/ @import URL( ‘https://fonts.googleapis.com/css?family=Oleo+Script’);

body{ 
    background-color: rgba(63, 133, 244,.75); 
    font-family: 'Oleo Script'; 
    margin:0px; 
    padding:0px; 
} 

ul{ 
    list-style:none; 
} 

.nav{ 
    list-style: none; 
    margin:0; 
    float:right; 
    padding-top:62px; 
    display:grid; 
    grid-template-columns: repeat(3,1fr); 
    grid-gap:10px; 
    grid-auto-rows: repeat(1,1fr); 
    grid-row:1/1; 
    grid-column: 2/2; 
} 

.nav li{ 
    font-size: 64px; 
    display:inline; 
    color:white; 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:0px; 
} 

.nav li:hover{ 
    color:#1995d3; 
    cursor: pointer; 
    text-shadow: 0 0 15px #1995d3; 
    } 

.header{ 
    background-color:rgba(30,30,30,.7); 
    position: fixed; 
    top: 0; 
    padding-bottom:0; 
    margin:0; 
    width:100%; 
} 

.header a{ 
    height: 150px; 
    width: 150px; 
} 

.header img{ 
    height: auto; 
    width:auto; 
    max-height: 100%; 
    max-width: 100%; 
} 

.connect{ 
    width: 100%; 
    max-width:100%; 
} 

.connectList { 

    width: 100%; 
    max-width:100%; 

} 

.connect h1{ 
    color:rgba(0,0,0,1); 
    font-size: 64px; 
    text-shadow: -3px 3px rgb(255,255,255); 
    text-align:center; 
} 

.connectList ul{ 
    list-style: none; 
    display:grid; 
    grid-template-columns: repeat(3,1fr); 
    grid-gap:200px; 
    grid-auto-rows: repeat(1,1fr); 
    font-size:40px; 
    color:rgba(75,75); 
    text-shadow: -3px 3px rgb(255,255,255); 
    text-align: center; 
} 

a{ 
    text-decoration: none; 
} 

a:visited{ 
    color:rgba(0,0,0,1); 
} 

connect a:hover{ 
    cursor:pointer; 
} 

footer h1{ 
    color:rgba(0,0,0,1); 
    font-size: 36px; 
    text-shadow: -3px 3px rgb(255,255,255); 
    text-align:center; 
} 

footer ul{ 
    text-align:center; 
    font-size: 24px; 
} 

.about{ 
    text-align:center; 
    padding-top:0px; 
    margin-top:0px; 
} 

.about h1{ 
    color:rgba(0,0,0,1); 
    font-size: 64px; 
    text-shadow: -3px 3px rgb(255,255,255); 
    text-align:center; 
    margin-top:0px; 
    padding-top:0px; 
} 

.about p{ 
    color:rgba(0,0,0,1); 
    font-size:24px; 
    text-align:center; 
} 

.main{ 
    background-color:rgba(0,0,0,.5); 
} 


===========解决方案如下:

您有collapsing margins。为了解决这个问题,添加overflow: auto;footer


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)