第四區段#sec4 的 HTML 設計

  <section id="sec4">

    <ul>
      <!-- <li><h2>flower1</h2><a href="images/flower_b/flower1.jpg"><img src="images/flower_s/flower1.jpg" alt=""></a></li> -->
    </ul>    

  </section>    
        

第四區段#sec4 的 CSS 樣式設計

/* #sec4  ===================================================================== */
#sec4 ul li { float: left; width: 14.66%; margin: 1%; padding: 20px; text-align: center;
  background-color: #d7f4cd; border-radius: 15px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }
#sec4 ul li h2 { margin-bottom: 10px; }
#sec4 ul li img { width: 100%; height: auto; 
  border-radius: 10px; box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.8); }

@media(max-width:1300px){ #sec4 ul li { width:18%; } }
@media(max-width:1000px){ #sec4 ul li { width:23%; } }
@media(max-width: 700px){ #sec4 ul li { width:31.33%; } }
@media(max-width: 500px){ #sec4 ul li { width:48%; } }
@media(max-width: 400px){ #sec4 ul li { width:98%; } }
        

加上程式設計載入外部檔案的資料

  //載入外部的XML資料檔=>拆解資料記錄在變數上=>組合變數呈現到畫面上
  $.ajax({
    url:'TSFlowers.xml'
    ,datatype:'xml'
    ,success:function(TSxmlData){

      var delayTime=0.3;
      //拆筆記錄拆解資料記錄在變數上
      $(TSxmlData).find('flower').each(function(i,obj){
        var vtitle = $(obj).find('title').text();
        var vimage = $(obj).find('image').text();
        var vdesc  = $(obj).find('desc').text();
        delayTime+=0.06;

        //重新組合HTML語法, 新增到要顯示的位置上 .........................................
        $('#sec4 ul').append(
          '<li class="wow bounceIn animated" data-wow-delay="'+delayTime+'s"><h2>'+vtitle+'</h2>'
          +'<a href="'+vimage+'" data-title="'+vtitle+'" data-desc="'+vdesc+'">'
          +'<img src="images/flower_s/'+vimage+'.jpg" alt=""></a></li>'
        );

      });  //each end

    }  //success end
  });  //ajax end