Question

我正在尝试创建自己的网站，直到我尝试使其响应（使用@media）它才会很好。现在，我的.top类不适用于我的div（具体来看<div class="top"><h1>Awesurio Home Page</h1></div>）。我提供了适用于实际网页的完整HTML和CSS。导航CSS之前正在工作，所以我没有发布它。如果你想要，我可以。

＆＃13;

  h1 {
  color: white;
  text-align: center;
  font-size: 40pt;
  font-family: Arial;
  font-weight: bold;
}

p {
  color: #222222;
  font-family: Arial;
  font-size: 16pt;
  img {
    width: 100%;
    height: auto;
  }
  .row:after {
    content: "";
    clear: both;
    display: table;
  }
  [class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
  }
  @media only screen and (min-width: 600px) {
    .col-s-1 {
      width: 8.33%;
    }
    .col-s-2 {
      width: 16.66%;
    }
    .col-s-3 {
      width: 25%;
    }
    .col-s-4 {
      width: 33.33%;
    }
    .col-s-5 {
      width: 41.66%;
    }
    .col-s-6 {
      width: 50%;
    }
    .col-s-7 {
      width: 58.33%;
    }
    .col-s-8 {
      width: 66.66%;
    }
    .col-s-9 {
      width: 75%;
    }
    .col-s-10 {
      width: 83.33%;
    }
    .col-s-11 {
      width: 91.66%;
    }
    .col-s-12 {
      width: 100%;
    }
  }
  @media only screen and (min-width: 768px) {
    .col-1 {
      width: 8.33%;
    }
    .col-2 {
      width: 16.66%;
    }
    .col-3 {
      width: 25%;
    }
    .col-4 {
      width: 33.33%;
    }
    .col-5 {
      width: 41.66%;
    }
    .col-6 {
      width: 50%;
    }
    .col-7 {
      width: 58.33%;
    }
    .col-8 {
      width: 66.66%;
    }
    .col-9 {
      width: 75%;
    }
    .col-10 {
      width: 83.33%;
    }
    .col-11 {
      width: 91.66%;
    }
    .col-12 {
      width: 100%;
    }
  }
  .top {
    background-color: #222222;
    color: #222;
    padding: 10px;
  }
  .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .menu li:hover {
    background-color: #0099cc;
  }
  .aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .footer {
    background-color: #222;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
  }

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" , initial-scale="1.0">
  <meta charset="UTF-8">
  <title>Awesurio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/bodystyle.css">
</head>

<body>
  <div class="header">
    <div id="container">
      <div id="burger">
        <div class="bun top"></div>
        <div class="filling"></div>
        <div class="bun bottom"></div>
      </div>
    </div>
  </div>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li class="green">
        <a href="projects.html">Projects</a>
      </li>
      <li class="red">
        <a href="test1.html">test</a>
      </li>
      <li class="yellow">
        <a href="test2.html">test</a>
      </li>
      <li class="purple">
        <a href="test3.html">test</a>
      </li>
    </ul>
  </nav>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/index.js"></script>
  <div class="top">
    <h1>Awesurio Home Page</h1>
  </div>
  <div class="clearfix">
    <div class="col-s-12">
      <p>Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff .Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.Stuff.S tuff.Stuff.Stuff.Stuff.Stuff.Stuff.</p>
    </div>
  </div>
</body>

</html>

＆＃13;

在添加@media之前，这两个都有效，所以也许这就是罪魁祸首？我真的刚开始使用HTML，所以我很容易犯错误。

Answer 1

您的CSS中有拼写错误，请为您的p声明添加缺少的结束括号：

p {
    color: #222222;
    font-family: Arial;
    font-size: 16pt;
 } // <- This was missing

<强>小提琴：

https://jsfiddle.net/cs2hvmnz/1/

基本CSS未应用于div

1 个答案: