Önyükleme sırasında arka plan renginde sorun var

Question

Ön uçum için önyükleme kullanarak basit bir sayfa hazırlıyorum. İşte benim FIDDLE. Arka plan rengini özelleştirmeyle ilgili bazı sorunlar yaşıyorum.

Aşağıdaki sayfa benimki gibi görünüyor. Görebildiğiniz gibi bir başlık, gövde ve altbilgidir. Ben başarmak istiyorum ne

bu

gibi bir şey Temelde vücutta iki farklı renk istediğim. Vücudun sık kullanılanların üzerinde farklı renk olmasını istiyorum. Alt bileşenlerim veya üstbilgi kodumda herhangi bir değişiklik yapmak istemiyorum çünkü bunlar farklı bileşenler olarak ele alınacak. Öyleyse düşündüğüm yaklaşım, favori divanın üzerindeki tüm divları ayrı bir div'a koyabiliyorum ve bunu başarabiliyorum ama sorunlarım var. Bu girişime bir göz atın. FIDDLE Renk, sık kullanılan alanın ötesine geçiyor.

Her türlü öneri için minnettarım. Takip

benim bağlantı jsfiddle açmak için yavaş olduğunu, benim HTML kodunu

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid" style="border-bottom: 2px solid #CDCCC9; background-color: blue"> 
    <div class="row"> 
     <div class="col-sm-2"></div> 

     <div class="col-sm-2"> 
      &emsp; 
      <!-- navbar header --> 
      <div class="navbar-header">     
       <!-- brand --> 
       <img src="assets/images/fe-logo.png" alt="." style="padding-top:10px;padding-left:30px;padding-bottom:30px;"/> 
       <!--/brand --> 
      </div> 
      <!--/navbar header --> 
     </div> 
     <div class="col-sm-8"> 
      <!-- navbar right --> 
      <!-- ToDo - note that there is a hard-coded name in navbar for now - will need to be dynamically set --> 
      <ul class="nav navbar-nav navbar-right">  
       <li class="navbar-brand"> 

       </li> 
      </ul> 
      <!--/navbar right --> 
     </div> 
    </div> 
    </div> 
</nav> 

<!-- HEADER ENDS HERE --> 



<div id="main" class="container-fluid searchPage-wrapper"> 
    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-small-title">NBA</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-title">Player Portal</div> 
     </div>  
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="searchPage-box text-left">   
       <form role="form" class="form-inline" ng-submit="submit()">    
        <div class="form-group">    
        <div class="row"> 
         <div class="col-lg-11"> 
          <input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" 
           typeahead="sponsor as label(sponsor) for sponsor in sponsorList 
           | filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" 
           required="" name="sponsorName"> 
         </div>   
         <div class="col-md-1">  
         <!-- using Bootstrap default for button --> 


         </div>     
        </div> 
       </div> 
       </form> 
      </div>  
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4"> 
     </div> 
     <div class="col-lg-8"> 
      <div id="searchPage-favorites-title" class="row">FAVORITES</div> 
     </div> 
    </div> 


    <div class="row"> 
     <div class="col-sm-4"> 
     </div> 

     <!-- this favorites are hard-coded for now for purposes of demo --> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Lebron 
     </div> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Curry 
     </div> 
     <div class="col-sm-2 searchPage-favorites-item" > 
      <i class="fa fa-star"></i> 
      Jordan 
     </div> 

    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
     </div>  
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div>  
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
      &nbsp; 
     </div>  
    </div> 
<div class="main-footer wrapper b-t"> 
    <div class="row"> 
     <div class="col-sm-2"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
     &nbsp; 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>  
     <div class="col-sm-9 subtext">  
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH&#174;BLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>   
     <div class="col-sm-9 subtext">  
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>   
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div>  
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>    
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     </div>    
     <div class="col-sm-9 subtext"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     BLAH BLAH BLAH BLAH BLAH 
     </div> 
    </div>  

</div> 

Answer 1

Üzgünüz, ama fikrim var. Temel olarak, yalnızca div'u ayırmanız ve sonra ilgili divana uygun rengi vermeniz gerekir.

//navbar 
<div class="container-fluid"> 
    <div class="row bg-success">//bg-success is green color 
     //player portal 
     //search form 
    </div> 

    <div class="row"> 
     //favorites 
    </div> 
</div> 
//footer 

Ve ne yapmak deneyin hem bölüm aynı arka plan rengini var bu yüzden, bölüm hem renk vermektir. İşte örnek

GÜNCELLEME : Here

Answer 2

o arka plan eklemek istediğiniz alanı için tek konteyner değil, sadece birkaç kaplarda yoluyla ele alınabilir. Yani ilk istenen geçmişe sahip bir sınıf için bir CSS kuralını oluşturmak:

.x1 { background: #fa0; } 

Sonra HTML etkilenen gereken tüm konteynerlerin için o sınıfı ekleyin.

https://jsfiddle.net/02j94gmo/1/

Answer 3

bu basit bir deneyin ve size yardımcı olabilecek umut: Sadece bunu eklenen bu keman bakışı var.

HTML Sana benim FIDDLE bakmak eğer ben takdir ediyorum bunu yaparken çalıştı

body {background-color: blue;} 
#player { 
    background-color: white; 
    padding: 25px; 
} 
#favorites { 
    background-color: #00897b; 
    padding: 25px; 
} 
#footer { 
    background-color: #a5a5a5; 
    padding: 25px; 
}