gpt4 book ai didi

html - 网站四周都是黑色空间

转载 作者:行者123 更新时间:2023-11-28 04:45:31 26 4
gpt4 key购买 nike

我正在制作作品集,并且一直在修改主页上的 CSS。我已经清理了我的 CSS,但不知何故我的主页(黑色空间)有一个巨大的间隙和底部和顶部的小间隙。我认为这可能与设置为背景大小有关包含。但我不想更改它,因为图像拉伸(stretch)太多(我喜欢它现在的位置)。

这是我的代码:

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

*{
margin: 0;
padding: 0;

}
#wrapper {
margin: 0 auto;
padding: 0;
}

#background {
background-image:url("images/Untitled-1.jpg");
background-repeat:no-repeat;
background-size:contain;
}

header{
background: rgb(115, 78, 116);
}

p{
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
position:absolute;
margin-left: 50%;
font-family: 'Fira Sans', sans-serif;
font-style: normal;
margin-top: 15%;

}

body {
background-color: black;
margin: 0;
padding: 0;
}

footer{
color: antiquewhite;
margin: 0;
padding: 0;
}


h1{font-family:'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;

}

nav {
margin-left: 80%;
margin-bottom: 40%;

}
.stretch{
padding: 20px;
margin: 20px 0px;
border-radius: 50px 0px 0px 50px;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: relative;
-webkit-transition-duration: 0.5s;
/* standard syntax*/
transition-duration: 0.5s;
-webkit-transition-property: transform;
/* standard syntax*/
transition-property: transform;
}
/* tabs will extend to left slightly*/
.stretch:hover { -webkit-transform: translateX(-20px);
/* standard syntax*/
transform: translateX(-20px);
}

a:link {
text-decoration: none;
color: antiquewhite;
}

a:visited {
text-decoration: none;
color: antiquewhite;
}

a:hover {
text-decoration: none;
color: antiquewhite;
}

a:active {
text-decoration: none;
color: antiquewhite;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="wrapper">
<header>
<h1>Tavyon Richardson</h1>
<ul class="icon">
<li><span class="list">TavyonRichardson@yahoo.com</span><i class="material-icons">mail_outline</i></li>
<li><span class="list">989-285-5133</span><i class="material-icons">call</i></li>
<li><span class="list">Alma, Michigan</span><i class="material-icons">location_on</i></li>
</ul>
</header>
<div id="background">
<p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
<nav id="navbar">
<ul class="nav">
<li class="stretch"><a href="">About me</a></li>
<li class="stretch"><a href="">Courses</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
<li class="stretch"><a href="">Resume</a></li>
</ul>
</nav>
</div>
</div>

最佳答案

没有看到背景所以不确定,但我认为问题是边缘

  • margin-top:0 添加到 header 上的 h1
  • 删除(或更改值)navmargin-bottom 属性

关于html - 网站四周都是黑色空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40986760/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com