Question

我正在进行页面布局，由于某些原因我不能仅仅将样式应用于页脚，我已经查看了代码并且发现了任何错误（但我确定bc它不起作用-_-我试过重写代码但仍然没有工作。

//*GENERAL*//

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  border: 1px solid black;
}


.logo img {
	width: 100px;
  margin: 50px auto 10px;
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: black;
}



//*NAVIGATION*//


nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  padding: 10px;
  text-align: center;
  margin: 5px;
}

nav ul li a {
  color: black;
}



//*HERO*//

.wrap {
  height: 400px;
  padding: 1px
}

.head-content {
  height: 505px;
  background: url(../img/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 40% 50%;
  padding: 10px;
  text-align: center;
}

.head-content h1, a {
  color: white;
}

.head-content h1 {
  margin-top: 130px;
  font-size: 3em;
}

.head-content .btn {
  padding: 15px 20px;
  margin: 10px auto;
  background: #FF0080;
  border-radius: 3px;
  display: inline-block;
  border-radius: 5px;
}

.btn:hover {
  color: #FF0080;
  background: white;
  font-weight: bold;
  transition: .25s;
}



//*LEARN MORE*//

.wrap-services {
  height: 1400px;
  padding: 1px;
  margin: 1px;
}

.headline {
  color: rgba(0,0,0, .8);
  text-align: center;
  padding: 10px;
  height: 100px;
  margin: 70px 0 0 0;
}

.headline h2 {
  font-size: 1.5em;
  padding: 0;
  margin: 0;
}

.headline h3 {
  color: rgba(0,0,0, .4);
  font-weight: lighter;
  font-size: 1em;
}

.ser-1,
.ser-2,
.ser-3 {
  height: 400px;
  padding: 10px;
  margin: 0 2.5%;
  text-align: center;
  /*border: 1px solid black;*/
}

.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
  border-bottom: 2px solid #FF0080;
  padding: 10px;
  margin: 5px 5px 30px;
  font-size: 1em;
} 

.ser-1 p,
.ser-2 p,
.ser-3 p {
  color: rgba(0,0,0, .5);
  font-size: .9em;
  line-height: 2em;
}



//*REVIEWS*//

.wrap-review {
  height: 770px;
}

.content-review {
  text-align: center;
  height: 770px;
  background: #FF0080;
  color: white;
  padding: 1px;
}

.content-review h3 {
  margin-top: 80px;
  font-size: 1.7em;
}

.review {
  background: white;
  color: #FF0080;
  margin: 20px 2.5%;
  border-radius: 2px;
 height: 200px;
 display: block;
}

.review-content {
  text-align: center;
  padding: 40px 20px 20px;
}

.review-name {
  font-style: italic;
  font-weight: bold;
}

.review-name-img {
  display: none;
}



//*FORM*//

.wrap-form {
  height: 770px;
  padding: 1px;
}

.wrap-form-contect {
  text-align: center;
  height: 770px;
  padding: 1px;
  margin: 70px 10px 10px;
  border: 5px solid black;
}

.wrap-form-contect p {
  text-transform: capitalize;
  line-height: 1.5em;
  font-size: .95em;
}

input,
textarea {
  border: none;
  background: #eee;
  margin: 10px;
  padding: 20px;
}

textarea {
  padding: 30px;
}

button {
  display: block;
  margin: 10px auto;
  background: #FF0080;
  color: white;
  border: none;
  padding: 20px;
  width: 75%;
  font: bold 1.4em/1 sans-serif;
}

button:hover {
  cursor: pointer;
  background: yellow;
  color: black;
  transition: .5s;
}



//*FOOTER*//

footer {
  background: black;
  height: 500px;
  margin: 500px;
  padding: 500px;
  width: 90%;
}

<!DOCTYPE html>
<html>
<head>
  <title>FSA Doc.</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style/nor.css">
  <link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
  <header>
    <div class="logo">
      <a href="index2.html"><img src="img/black.png" alt="FSA Doc."></a>
    </div>
    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">REVIEWS</a></li>
        <li><a href="#">CONTACT US</a></li>
      </ul>
    </nav>
  </header>
    <div class="head-content">
      <h1>FSA Doc.</h1>
      <a class="bth" href="#">CALL (866) 210-1337</a>
      <a class="bth" href="#">LEARN MORE</a>
    </div>
    <div class="headline">
      <h2>LEARN MORE</h2>
      <h3>about how we help</h3>
    </div>
    <div class="ser-1">
      <h3>SATISFACTION GUARANTEED</h3>
      <p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
    </div>
    <div class="ser-2">
      <h3>NO UPFRONT FEES</h3>
      <p>Period.</p>
    </div>
    <div class="ser-3">
      <h3>WE’RE HERE TO HELP</h3>
      <p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
    </div>
    <div class="review">
      <h3 class="head-review">what people say</h3>
      <div class="review-contienr">
        <p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
        <h3 class="reivew-name">Lindsay Anderson</h3>
      </div>
      <div class="review-contienr">
        <p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
        <h3 class="reivew-name">Ashley Guthrie</h3>
      </div>
    </div>
    <div class="wrap-form">
      <h3>get started</h3>
      <p>let us know what can we do for you</p>
      <form>
        <input value="Your Name" type="text">
        <input value="Email" type="text">
        <textarea>Your Message</textarea>
        <button type="submit">Send</button>
      </form>
    </div>
    <footer>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </footer>
</body>
</html>

Answer 1

从css注释中删除双反斜杠。正确的css注释语法如下所示：

/* comment */

页脚在CSS中没有样式

1 个答案: