Question

以下是我的css文件的代码。

@-webkit-keyframes change {
  83.3%,95.96% {transform:translate3d(0,-10%,0);}
}

body {
    background-color: #3A457C;
}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #fff;
  color: #444;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

h1, h2, p {
    font-family: 'Ubuntu', sans-serif;
    color: white;
}

h1 {
    font-size: 150px;
    text-align: center;
    -webkit-animation-name: change;
    animation-duration: .5s;
    line-height: 300px;
}

h2 {
    font-size: 50px;
    text-align: center;
}

p {
    margin-left: 500px;
    margin-right: 500px;
    font-size: 22px;
}

.header {
    cursor: pointer;
    background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
    background-position: center center;
    height: 325px;
    line-height:0px;
}

/*
#left {
    position: fixed;
    top: 392px;
    left: 0px;
    width: 25%;
    height: 100%;
    background-color: white;
    z-index: 1;
}

#top {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    height:8%;
    background-color: white;
}

#hardLeft {
    position: fixed;
    width: .35%;
    top:0px;
    left: 0px;
    right: 0px;
    height: 100%;
    background-color: white;
}

#hardRight {
    position: right-side;
    background-color: white;
}*/

现在下面是html文件的代码

<!DOCTYPE html>
<html>
    <div class="nav">
      <ul>
        <li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
        <li class = "about"> <a href = "J:\Website1\html\about\about.html">About</a></li>
      </ul>
    </div>

    <head>
        <title>Home - Tutor</title>
        <link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    </head>

    <body>
        <div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
            <div class = "header">
                <h1>Trouble? Tutor.</h1>
            </div>
        </div>
        <h2>About</h2>
        <p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science, 
        and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
    </body>
</html>

问题是，随着我不断增加h1字体大小，标题越来越远离页面顶部，我想将h1字体大小保持在150px，但是标题位于顶部这页纸。它看起来像this，但我希望它看起来像this，除了我希望h1（麻烦？导师。）为150px。

Answer 1

添加margin: 0;并将line-height更改为1。 margin正在创建与背景的差距，line-height正在向下移动文字。

@-webkit-keyframes change {
  83.3%,95.96% {transform:translate3d(0,-10%,0);}
}

body {
    background-color: #3A457C;
}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #fff;
  color: #444;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

h1, h2, p {
    font-family: 'Ubuntu', sans-serif;
    color: white;
}

h1 {
    font-size:150px;
    text-align: center;
    -webkit-animation-name: change;
    animation-duration: .5s;
    line-height: 1;
    margin: 0;
}

h2 {
    font-size: 50px;
    text-align: center;
}

p {
    margin-left: 500px;
    margin-right: 500px;
    font-size: 22px;
}

.header {
    cursor: pointer;
    background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
    background-position: center center;
    height: 325px;
    line-height:0px;
}

<html>
    <div class="nav">
      <ul>
        <li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
        <li class = "about"> <a href = "J:\Website1\html\about\about.html">About</a></li>
      </ul>
    </div>

    <head>
        <title>Home - Tutor</title>
        <link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    </head>

    <body>
        <div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
            <div class = "header">
                <h1>Trouble? Tutor.</h1>
            </div>
        </div>
        <h2>About</h2>
        <p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science, 
        and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
    </body>
</html>

Answer 2

这个空白区域是由H1 Tag的默认边距引起的。所以将 margin：0; 添加到H1的样式。

顺便说一下你的html代码很奇怪。

HTML Doc应该是这样的。

<html>
      <head></head> <!-- Header for html contains meta, title, link, etc.. -->
      <body></body> <!-- Actual contents which would be printed on screen -->
</html>

所以你的HTML会更好。

<!DOCTYPE html>

<head>
    <title>Home - Tutor</title>
    <link href = "test.css" type = "text/css" rel = "stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>

<body>
    <div class="nav">
    <ul>
        <li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
        <li class = "about"> <a href = "J:\Website1\html\about\about.html">About</a></li>
    </ul>
    </div>
    <div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
        <div class = "header">
            <h1>Trouble? Tutor.</h1>
        </div>
    </div>
    <h2>About</h2>
    <p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science, 
    and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>

随着字体大小的增加，标题会不断降低？

2 个答案: