身体没有填满整个页面

时间:2017-03-30 22:22:17

标签: css document-body

我的身体无论我怎么努力都不会比我的页面上的一条小线更大,我已经尝试了所有事情,所以如果有人可以帮助我,我的css可能出现问题我&# 39;我没有看见让我知道



html {
  height: 100%;
}

#wrapper {
  height: 100%;
  position: relative;
  overflow: hidden;
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
  position: relative;
}

.rw-wrapper {
  width: 80%;
  position: fixed;
  margin: 110px auto 0 auto;
  font-family: 'Cinzel Decorative', cursive;
  padding: 30px;
  font-size: 20px;
  margin-left: 40px;
  margin-top: 138px;
}

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0, 0.8);
}

.rw-sentence span {
  color: white;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}

.rw-words {
  display: inline;
  text-indent: 10px;
}

.rw-words span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #F13D19;
}

.rw-words-1 span {
  animation: rotateWordsFirst 18s linear infinite 0s;
}

.rw-words-2 span {
  animation: rotateWordsSecond 18s linear infinite 0s;
}

.rw-words span:nth-child(2) {
  animation-delay: 3s;
  color: #11B61B;
}

.rw-words span:nth-child(3) {
  animation-delay: 6s;
  color: #2CCBC1;
}

.rw-words span:nth-child(4) {
  animation-delay: 9s;
  color: #7a6b9d;
}

.rw-words span:nth-child(5) {
  animation-delay: 12s;
  color: #E91313;
}

.rw-words span:nth-child(6) {
  animation-delay: 15s;
  color: white;
}

.rw-hero {
  font-style: bold;
  font-size: 75px;
}

@keyframes rotateWordsFirst {
  0% {
    opacity: 1;
    animation-timing-function: ease-in;
    height: 0px;
  }
  8% {
    opacity: 1;
    height: 60px;
  }
  19% {
    opacity: 1;
    height: 60px;
  }
  25% {
    opacity: 0;
    height: 60px;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWordsSecond {
  0% {
    opacity: 1;
    animation-timing-function: ease-in;
    width: 0px;
  }
  10% {
    opacity: 0.3;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 100%;
  }
  27% {
    opacity: 0;
    width: 100%;
  }
  100% {
    opacity: 0;
  }
}

img {
  position: fixed;
  top: 25px;
  left: 25px;
  min-width: 97.5%;
  margin: 0;
  padding: 0;
  z-index: -1;
}

.words {
  text-align: left;
  padding-top: 160px;
  padding-left: 0px;
}

#ap {
  position: absolute;
  width: 1860;
  height: 200px;
  z-index: 15;
  top: 81.5%;
  left: 9s.5%;
  margin: -100px 0 0 -150px;
  padding: 0;
  text-align: center;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Neverwinter Beginners Guide</title>
  <meta charset="utf-8">
  <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
  <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:700" rel="stylesheet">
  <script type="text/javascript" src="scripts/scripts.js"></script>
  <img class="img" src="images/full_drag.png">
</head>

<body id="wrapper">
  <div class="words">
    <section class="rw-wrapper">
      <h2 class="rw-sentence">
        <span>Are you a</span>
        <div class="rw-words rw-words-1">
          <span>Fighter?</span>
          <span>Hunter?</span>
          <span>Paladin?</span>
          <span>Wizard?</span>
          <span>Rogue?</span>
          <span class="rw-hero">Hero?</span>
        </div>
      </h2>
    </section>
  </div>
  gnkrsjl;l
</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案