Question

所以我正在尝试将样式应用到我的网页中的某个部分，但它似乎不起作用。如果我将样式添加到head部分它将起作用，所以我认为我没有正确引用它或者我没有正确地分割页面。以下是我的代码：

    <!--gallery-->
<div id="gall">
<div class="container">

    <section>
    <div id="gallery">
    <br>
    <div class="page-header">
    <br>
    <h2> Gallery <small>Conservation Joinery's gallery</small><h2>
    </div>



    <ul class="row page2" id="page2">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="IMG1.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="IMG2.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
        </li>
      </ul> 


 </div> <!--gallery-->   




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




    </section>

</div><!--end of container -->
</div>

这是我的样式表。

.gall{
      ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }

  }

Answer 1

我注意到的第一个问题：

<div id="gall">应为<div class="gall">，因为您在CSS中将其定义为.gall而不是#gall。

同样，如果您在引导程序后的头部加载此样式表，它将覆盖相同名称的元素，而不是引导程序库中的元素。

Answer 2

我可以看到，对于你拥有的第一个div，你给它 id =胆但你在样式表中用句点（类选择器）选择它你应该在样式表中使用 #gall 而不是 .gall

Answer 3

看起来你正在尝试使用sass / scss作为css而不是css

你的CSS应该是这样的。

#gall ul {         
      padding:0 0 0 0;
      margin:0 0 0 0;
  }
#gall ul li {     
      list-style:none;
      margin-bottom:25px;           
 }
 #gall ul li img {
      cursor: pointer;
  }
  #gall .modal-body {
      padding:5px !important;
  }
  #gall .modal-content {
      border-radius:0;
  }
  #gall .modal-dialog img {
      text-align:center;
      margin:0 auto;
  }
#gall .controls{          
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;          
}
#gall .next {
    float:right;
    text-align:right;
}
  /*override modal for demo only*/
  #gall .modal-dialog {
      max-width:500px;
      padding-top: 90px;
  }
  @media screen and (min-width: 768px){
      #gall .modal-dialog {
          width:500px;
          padding-top: 90px;
      }          
  }
  @media screen and (max-width:1500px){
      #ads {
          display:none;
      }
  }

这是有效的css，你放置的上面的样式表看起来像scss / less，需要编译成css。

Answer 4

您的样式表使用嵌套。你有＆＃34; ul＆＃34;，＆＃34; ul li＆＃34;，＆＃34; ul li img＆＃34; ＃34; .gall＆＃34;中的定义（应该是＆＃34; #gile＆＃34;作为id引用，正如其他人所指出的那样）。

只能使用Sass之类的预处理器来实现CSS中的嵌套。也许，你可能已经在使用预处理器了，因为即使将选择器分离为标准CSS，我也无法使你的样式工作。但是，如果您不使用预处理器，则应使用more complicated selectors来表示父子关系，而不是嵌套。

Answer 5

你有.gall {}中包含的所有CSS规则，这基本上使它们无效。请参阅以下示例中的调整后规则。

＆＃13;

#gall ul {

  padding: 0 0 0 0;

  margin: 0 0 0 0;

}

#gall ul li {

  list-style: none;

  margin-bottom: 25px;

}

#gall ul li img {

  cursor: pointer;

}

.modal-body {

  padding: 5px !important;

}

.modal-content {

  border-radius: 0;

}

.modal-dialog img {

  text-align: center;

  margin: 0 auto;

}

.controls {

  width: 50px;

  display: block;

  font-size: 11px;

  padding-top: 8px;

  font-weight: bold;

}

.next {

  float: right;

  text-align: right;

}

/*override modal for demo only*/

.modal-dialog {

  max-width: 500px;

  padding-top: 90px;

}

@media screen and (min-width: 768px) {

  .modal-dialog {

    width: 500px;

    padding-top: 90px;

  }

}

@media screen and (max-width: 1500px) {

  #ads {

    display: none;

  }

}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--gallery-->
<div id="gall">
  <div class="container">
    <section>
      <div id="gallery">
        <br>
        <div class="page-header">
          <br>
          <h2> Gallery <small>Conservation Joinery's gallery</small><h2>
    </div>



    <ul class="row page2" id="page2">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
      </ul> 


 </div> <!--gallery-->   




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




    </section>

</div><!--end of container -->
</div>

＆＃13;

试图为网站创建一个CSS样式（Bootstrap）

5 个答案: