CSS類應用到整個頁面，而不是特定的div

我有以下HTML：CSS類應用到整個頁面，而不是特定的div

<!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在哪裏我提到我的課，整個頁面變得背景紅色。任何想法爲什麼傢伙？提前致謝。

來源

2016-07-02 Gentle Joseph

我剛剛保存了整個代碼，並將css作爲樣式規則添加到頭部 - 它僅使「.more-about」div具有紅色背景。看起來不錯 - 我會建議不要將該div和footer放在身體外 - 但它不會將整個頁面着色爲紅色。該問題可能出現在您的CSS中（我只是按照您提供的方式添加了單個類樣式規則） – gavgrif

請更正以下代碼錯誤，它會解決這個問題

1）您已經關閉了body在該div之前的標籤more_about 正文標籤應始終在頁腳底部關閉。

2）你需要添加div類clearfix如下圖所示，就在你的div類之前.more_about清除所有應用於上面的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>

來源

2016-07-02 06:19:30

我想這一點，你所期待的，只是你需要添加浮動：左

.more_about{ 
    background-color: red; 
    float:left; 
}

來源

2016-07-02 06:09:20 vignesh

CSS類應用到整個頁面，而不是特定的div

回答

相關問題