CSS类应用于整个页面而不是特定的div

debugcn 发表于 Dev

温柔的约瑟夫

我有以下HTML：

<!DOCTYPE html>
<head>
  <title></title>
  {% load staticfiles %}
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/drilldown.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
  <div class="col-md-12" align="center" style="height:100%">
    <a href="{% url 'home' %}">
      <img style="margin-top: 20px;" 
           class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}" 
           width="180" height="180" alt="">
    </a>
    <br>
    <section id="hi">
      <div class="container animated fadeInUp" align="center">
        <h2 style="color:#45b29a;" align="center">Hi.</h2>
        <p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
      </div>
    </section>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <button class="btn btn-xs"></button>
    <br><br><br><br><br><br><br><br>
    <section>
      <div>
        <h1 style="color:#45b29a;" align="center">What I can do.</h1>
        <br><br>
        <table>
          <tr>
            <td align="right" width="50%">
              <img
                   class="h-logo animated fadeIn" 
                   src="{% static 'portfolio/img/design.gif' %}" 
                   width="200" height="200" alt=""></a>
          </td>
        <td align="center" width="50%"><h3>Design what you want.</h3><br>
          <p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
        </td>
        </tr>
      <tr>
        <td align="center" width="50%"><h3>Develop what you need.</h3><br>
          <p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
        </td>
        <td align="left" width="50%">
          <img
               class="h-logo animated fadeIn" 
               src="{% static 'portfolio/img/develop.gif' %}" 
               width="100" height="100" alt=""></a>
      </td>
    </tr>
  </table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
  <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <div class="col-md-12" align="right" style="margin-top: 6px;">
    <ul class="social-network social-circle">
      <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
    </ul>
  </div>
</footer>
</html>

而我的CSS：

.more_about {
    background-color: red;

}

请忽略我在HTML中提到的所有类，因为我的CSS没有这些类。但是我不知道为什么当我加载页面而不是div我提到班级的地方时，整个页面的背景变成红色。知道为什么吗？提前致谢。

拉胡尔·阿罗拉（Rahul Arora）

请更正代码中的以下错误，它将解决此问题

1）在具有more_about类的div之前，您已经关闭了body标记，应该始终在页脚下方结束该标记。

2）您需要在类.more_about的div之前添加具有clearfix类的div，如下所示，以清除应用于上级div的所有浮点数。

<div class="clearfix"></div> <!-- this will clear all the  floats -->
<div align="center" class="more_about">
    <a href="{% url 'academics' %}">&nbsp;&nbsp;Read more about gentle
    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。