我页面的整个部分都无法正常工作

时间：2018-02-07 01:41:39

标签： html5 sections

为什么#testimonial / #protimonial-placeholder部分没有出现？我觉得我已经尝试了一切。我有一个应该显示的背景图像，无论我怎么做都不会。导航链接甚至不会去。无论采用何种配置，它都不会存在。我想知道页面中其他地方是否存在影响它的问题，但也无法解决这个问题。 

    @import url('https://fonts.googleapis.com/css?family=Anton|Droid+Sans|Raleway|Ubuntu|Cairo|Julius+Sans+One|Poiret+One');

body {
  color: #fff;
  font-size: 16px;
}

a:link, a:visited {
  color: #ba9077;
  text-decoration: none;
  font-family: Ubuntu;
}

a:hover, a:active {
  text-decoration: none;
}


blockquote {
  color: #000;
  padding: 0;
  border: none;
  font-style: italic;
  text-align: left;
}

blockquote cite {
  display: block;
  color: #777;
  margin: 15px 0 0 0;
}

blockquote:before {
  display: none;
}


/* LISTS */

ul {
    list-style-type: none;
}

 nav li {
  border: 1px solid #bcd5d1;
  padding: 5px;
  margin: 5px;
  text-align: center;
  font-size: 1.5em;
}

header a:link {
  color: #ba9077;
}

header a:visited {
  color: #ba9077;
}

header a:hover, a:active {
  color: #da5d61;
}

/* FLEXBOX */

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.box {
  padding: 5px;
}

/* Table and Cell for Vertical Alignment */

.table {
  display: table;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}


/* SHOWCASE  */

#showcase {
  background-color: #1d2120;
  height: 100vh;
  width: 100%;
  display: table;
}

#showcase h1 {
  padding-top: 0px;
  font-family: Ubuntu;
  font-size: 4em;
  color: #da5d61;
}

#showcase h2 {
  color: #bcd5d1;
  font-family: Cairo;
  font-size: 2em;
  margin: 0 0 20px;
  }

#showcase h3 {
  color: #ba9077;
  font-family: Cairo;
  font-size: 1em;
}

#inline {
  font-size: 3em;
}

#inline li{
  font-size: 1.5em;
  padding: 0 10px 0 10px;
}

/* SERVICES */

#services {
  width: 100%;
  padding: 8vh 0 8vh;
  background: #5a5c51;
  background: -webkit-gradient(linear, left top, right bottom, from(#5a5c51), to(#9c9d96));
  background: linear-gradient(to bottom right, #5a5c51, #9c9d96);
}

#services i {
  color: #ba9077;
  font-size: 5em;
  text-align: center;
  margin: 0 0 20px;
}

#services h2 {
  color: #bcd5d1;
  font-size: 1.75em;
  text-align: center;
  margin: 0 0 20px;
}

#services p {
  font-size: 1em;
  padding-top: 2em;
  color: #1d2120;
  font-family: Raleway;
  font-weight: bold;
}


/* TESTINONIALS */

#testimonials {
  background-color: #fff;
  padding: 3% 0;
  color: #000;
  font-family: Raleway;
  text-align: center;
}

.testimonial {
  margin-bottom: 30px;
}

.testimonial img {
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#testimonials h2 {
  margin: 0 0 30px;
}


#testimonials-placeholder {
    height: 500px;
    background: url("img/pen.jpg") top center no-repeat;
      background-position: cover;
      background-size: 100%;
}


/* CONTACT */

#contact {
  background: #bcd5d1;
  padding: 1em;
  align: center;
  color: #000;
  font-size: 1em;
  font-weight: bold;
}

#contact h2 {
  margin: 20px;
}

#contact .container {
  width: 40%;
}

#contact button {
  margin: 20px;
}

/* FOOTER */

#footer {
  background-color: #1d2120;
  padding: 5% 0 5%;

}

#footer a:link, a:visited {
  color: #da5d61;
  text-decoration: none;
  font-size: 1.5em;
}

#footer-icons {
  font-size: .75em;
  margin: 30px 0;

}

/* MEDIA QUERIES */

@media screen and (max-width: 600px){
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  #inline {
  padding-top: 0px;
  }
  #contact .container {
    width: 60%;
  }
}

@media screen and (max-width: 400px){
  #services h1 {
    font-size: 2em;
  }
  #contact .container {
    width: 80%;
  }
}

<body>

<!-- SHOWCASE -->

    <header id="showcase">
    <div class="cell">
      <div class="flexbox">

        <div class="box text-center">
          <h1 class="text animated pulse">Ellis Smith</h1>
          <h2>Copywriter <i class="fa fa-pencil" aria-hidden="true"></i></h2>
          <h3>Quality copy, never copied.</h3>

        </div><!-- /box -->

        <nav class="box">
          <ul>
            <li>
              <a href="#services">Services</a></li>
            <li>
              <a href="#testimonials-placeholder">Testimonials</a>
            <li>
              <a href="#contact">Contact</a></li>
          </ul>
        </nav><!-- /box -->
      </div><!-- /flexbox -->
    </div><!-- /cell -->
  </header><!-- /showcase -->

<!--/END SHOWCASE -->

<!--SERVICES -->
<section id="services">
  <div class="container">
      <div class="row text-center">

        <div class="col-sm-3">
          <i class="fa fa-search" aria-hidden="true"></i>
          <h2>SEO Copywriting</h2>
          <p>Get more eyes on your work.</p>
        </div><!-- /col -->

        <div class="col-sm-3">
          <i class="fa fa-video-camera" aria-hidden="true"></i>
          <h2>Video Scripts</h2>
          <p>When words aren’t enough.</p>
        </div><!-- /col -->

        <div class="col-sm-3">
          <i class="fa fa-rss" aria-hidden="true"></i>
          <h2>Blog Entries</h2>
          <p>Pick a subject, any subject.</p>
        </div><!-- /col -->

        <div class="col-sm-3">
          <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
          <h2>Copy Editing & Proofreading</h2>
          <p>Take your work that extra mile.</p>
        </div><!-- /col -->

    </div><!-- /row -->
  </div><!-- /container -->
</section><!-- /services -->

<!--/END SERVICES -->


<!-- TESTIMONIALS -->
<section id="#testimonials-placeholder">
      <h1>Leave a comment below.</h1>
</section>
<!--/END TESTIMONIALS -->


<!-- CONTACT -->

<section id="contact">
  <div class="container">
    <h2 class="text-center">Contact Ellis Smith</h2>
    <form action="php/contact.php" method="post">
      <div class="form-group">
        <input placeholder="Name" name="yourname" type="text" class="form-control" id="name">
      </div>
      <div class="form-group">
        <input placeholder="Email address" name="email" type="text" class="form-control" id="email">
      </div>
      <div class="form-group">
        <input placeholder="Subject" name="subject" type="text" class="form-control" id="email">
      </div>
      <div class="form-group">
        <textarea placeholder="Comment" class="form-control" rows="5" id="message" name="comments"></textarea>
      </div>

      <div class="text-center">
        <button type="submit" value="Send" class="btn btn-dark">Submit</button>
      </div>
    </form>

  </div><!-- /container -->
</section><!-- /contact -->

<!--/END CONTACT -->

<!--/FOOTER -->

<section id="footer">
    <ul class="list-inline text-center">
      <li class="list-inline-item">
        <a href="#" target="_blank">
          <i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
      </li>
      <li class="list-inline-item">
        <a href="#">
          <i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
      </li>
      <li class="list-inline-item">
        <a href="#">
          <i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a>
      </li>
    </ul>
  <div id="footer-icons" class="text-center">
    <i class="fa fa-copyright" aria-hidden="true"></i> , January 2018
  </div>
</section><!-- /footer -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<!--/END FOOTER -->

</body>

1 个答案:

答案 0 :(得分：1)

<section id="testimonials-placeholder">
  <h1>Leave a comment below.</h1>
</section>

删除id =＆＃34; testimonial-placeholder＆＃34;

中的＃tag
相关问题
最新问题