小贝子编程

尝试创建一个网站的css样式(Bootstrap)



所以我试图得到一个样式应用到我的网页的一部分，但它似乎不工作。如果我将样式添加到头部部分，它将工作，所以我认为我没有正确引用它，或者我没有正确划分页面。下面是我的代码:

    <!--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;
          }
      }
  }

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

#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;
  }
}
<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>

我注意到的第一个问题:

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

同样，如果你在head AFTER bootstrap中加载这个样式表，它将覆盖同名的元素，而不是那些在bootstrap库中的元素。

我可以看到，对于第一个div，您给了它id=gall，但是您在样式表中使用句号(类选择器)选择它你应该使用这个#gall而不是。

看起来您试图使用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。

您的样式表使用嵌套。你有"ul"， "ul li"， "ul li"的定义。(应该是"# Gall"作为id引用，正如其他人注意到的那样)。

CSS中的嵌套只能通过像Sass这样的预处理器来实现。当然，也许您已经使用了预处理器，因为即使在将选择器分离为标准CSS之后，我也无法使您的样式工作。但是如果不使用预处理器，则应该使用更复杂的选择器来指示父子关系，而不是嵌套。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium