Ex:Bakery4:總複習

範例結果

練習1:運用Emmet將圖片加入Html結構

      <section id="ptoduct">
        <h2><i class="fab fa-gratipay"></i>商品櫥窗</h2>
        <div class="photoAll">
          <a href="./img/photos/photo01.jpg"><div class="photoblock"><img src="./img/photos/photo01.jpg" alt=""></div></a>
          <a href="./img/photos/photo02.jpg"><div class="photoblock"><img src="./img/photos/photo02.jpg" alt=""></div></a>
          <a href="./img/photos/photo03.jpg"><div class="photoblock"><img src="./img/photos/photo03.jpg" alt=""></div></a>
          <a href="./img/photos/photo04.jpg"><div class="photoblock"><img src="./img/photos/photo04.jpg" alt=""></div></a>
          <a href="./img/photos/photo05.jpg"><div class="photoblock"><img src="./img/photos/photo05.jpg" alt=""></div></a>
          <a href="./img/photos/photo06.jpg"><div class="photoblock"><img src="./img/photos/photo06.jpg" alt=""></div></a>
          <a href="./img/photos/photo07.jpg"><div class="photoblock"><img src="./img/photos/photo07.jpg" alt=""></div></a>
          <a href="./img/photos/photo08.jpg"><div class="photoblock"><img src="./img/photos/photo08.jpg" alt=""></div></a>
          <a href="./img/photos/photo09.jpg"><div class="photoblock"><img src="./img/photos/photo09.jpg" alt=""></div></a>
          <a href="./img/photos/photo10.jpg"><div class="photoblock"><img src="./img/photos/photo10.jpg" alt=""></div></a>
          <a href="./img/photos/photo11.jpg"><div class="photoblock"><img src="./img/photos/photo11.jpg" alt=""></div></a>
          <a href="./img/photos/photo12.jpg"><div class="photoblock"><img src="./img/photos/photo12.jpg" alt=""></div></a>
        </div>
      </section>

練習2:CSS美化

/* section1 商品櫥窗 =============*/
.photoAll{
  overflow: hidden;
  width: calc(225px * 4);
  margin: 0 auto;
}
.photoblock{
  /* background: url(../img/photoBlock.svg); */
  width:190px;
  height: 200px;
  position: relative;
  padding-top: 30px;
  padding-left: 15px;
  float: left;
  margin: 20px;
  cursor: pointer;
}
.photoblock:before{
  content: "";
  width: 100%; height: 100%;
  background: url(../img/photoBlock.svg)  no-repeat ;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
.photoblock img{
  width: 170px;
  transform: rotate(5deg);
}

練習3:

Flex應用: Flex CSS tools

/* 以下註解 ===========*/
.photoAll{
  overflow: hidden;      
}
.photoblock{
  float: left;
}

/* 運用Flex排版 ===========*/
.photoAll{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}