0
我想删除我的整个网页下方的这个小空间。以下将是我的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&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&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);
}
html {margin：0;}？你应该考虑使用某种“reset.css”文件。 –
你是在谈论脚注底部的浅蓝色空间吗？ – Ylama
'footer {height：100％;}' – Ylama