Question

我正在开发一个投资组合，而且我在主页上一直在修补CSS。我已经清理了我的CSS，但不知何故，我的主页（黑色空间）顶部有一个巨大的间隙和一个小间隙。我认为它可能与背景大小有关设置为包含。但是我不想改变它，因为图像延伸得太多了（我喜欢它现在的位置）。

这是我的代码：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

将@Test public void testNewCheckout() throws Exception { driver.get(baseUrl + "/index.php?route=common/home"); driver.findElement(By.linkText("Home")).click(); driver.findElement(By.linkText("Login")).click(); driver.findElement(By.id("input-email")).clear(); driver.findElement(By.id("input-email")).sendKeys("leo@abc.com"); driver.findElement(By.id("input-password")).clear(); driver.findElement(By.id("input-password")).sendKeys("asdfgh"); //driver.findElement(By.cssSelector("input.btn.btn-primary")).click(); driver.findElement(By.xpath("//input[@value='Login']")).click();; driver.findElement(By.linkText("Store")).click(); driver.findElement(By.xpath("//h4/a[text()='Blue Tshirt']/following::span[text()='Add to Cart'][1]")).click(); //driver.findElement(By.cssSelector("#cart > button.dropdown-toggle")).click(); driver.findElement(By.xpath("//div[@id='cart']/button[1]")).click(); driver.findElement(By.id("button-payment-address")).click(); driver.findElement(By.id("button-shipping-address")).click(); driver.findElement(By.id("button-shipping-method")).click(); driver.findElement(By.name("agree")).click(); driver.findElement(By.id("button-payment-method")).click(); driver.findElement(By.id("button-confirm")).click(); driver.findElement(By.linkText("Continue")).click(); driver.findElement(By.linkText("Logout")).click(); }添加到margin-top:0

h1

删除（或更改值）header

margin-bottom

Answer 2

您的问题是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等网格系统来创建布局。

Answer 3

将以下代码添加到CSS中以移除导航栏上方的边距差距

.stretch:first-child {
    margin: 0px;
}

黑色空间全方位网站

3 个答案: