网站周围的黑色空间
网站周围的黑色空间
提问于 2016-12-06 10:20:43
我正在做一个文件夹，我一直在修补主页上的CSS。我已经清理了我的CSS，但不知何故，我有一个巨大的差距，底部和顶部的一个小差距(黑色空间)，.i认为这可能与背景大小设置为包含。但我不想改变它，因为图像伸展太多了(我喜欢它现在的位置)。
下面是我的代码：
@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>
回答 3
Stack Overflow用户
发布于 2016-12-06 10:31:48
我看不到背景，所以不确定，但我认为问题在于边际
- 将
nav
的margin-bottom属性添加到header
- Remove上的
h1(或更改值
Stack Overflow用户
发布于 2016-12-06 10:32:56
你的问题是你的nav和你的p上的页边距，只需删除它们并将float添加到这两个项目中。
p{
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
/* position:absolute; You don't need this */
/* margin-left: 50%; REMOVE THIS */
font-family: 'Fira Sans', sans-serif;
font-style: normal;
margin-top: 15%;
float: left; /* Float for positioning */
}
nav {
float: right; /* Float for positioning */
/* REMOVE MARGIN
margin-left: 80%;
margin-bottom: 40%; */
}这是一个live example
但是你的网站有更多的内容。考虑使用诸如Bootstrap之类的网格系统来创建布局。
Stack Overflow用户
发布于 2016-12-06 10:48:38
将以下代码添加到CSS中，以删除导航栏上方的边距差距
.stretch:first-child {
margin: 0px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40986760
复制相关文章
相似问题
腾讯云开发者
