如何阻止代码在每个页面上显示

时间:2016-05-29 16:35:09

标签: html css

嗨,我的编码经验非常少,而且我对此非常陌生,如果这是一个愚蠢的问题,那就很抱歉。我一直在搞乱它,但我无法弄清楚如何阻止这些代码显示在所有页面上:

  <!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide"
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
</head>
<body>
<div class="container" >
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
      </div>

      <div class="item">
        <img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
      </div>


    </div>
</div>

</body>
</html>
<br>
<br>

<html>
<body>

<body>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">

<h2>Shop By Category</h2>
</div> 

</body>
</html>

<br>

我只希望它显示在我的网站主页上,但它出现在每个页面上。代码在布局文件中,因为我需要它出现在页面内容和侧边栏上方。我通过storenvy编辑商店html,如果这有帮助。我可以添加到CSS或HTML的东西,将阻止它出现在主页以外的页面上。提前谢谢!

1 个答案:

答案 0 :(得分:0)

请勿使用两个<html>标记。页面以<html>开头,以</html>结尾。

如果您想要在网页上显示多个部分,请使用<div>&amp; </div>的开头和结尾div

<!DOCTYPE html>
<html lang="en">

<head>

  <body id="imageslide" <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
        width: 100%;
        margin: auto;
      }
    </style>
</head>

<body>
  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
        </div>

        <div class="item">
          <img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
        </div>


      </div>
    </div>
    <div class="imageslide">
      <div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">

        <h2>Shop By Category</h2>
      </div>
    </div>

</body>

</html>