不多说直接先上实例。

所有实例在后续成品将会用到。

如果有需要讲添加具体文字说明。

**************************** 

1、图片列表

效果

html5+css3+js开发APP实例教程2 -- 图片/图标列表



    

  1. <div class="tempbox"> 
    2. 

  2.   <ul id="p_w_picpathlist"> 
    3. 

  3.       <li><img src="p_w_picpaths/01.jpg" width="96px" /></li> 
    4. 

  4.       <li><img src="p_w_picpaths/02.jpg" width="96px" /></li> 
    5. 

  5.       <li><img src="p_w_picpaths/03.jpg" width="96px" /></li> 
    6. 

  6.       <li><img src="p_w_picpaths/04.jpg" width="96px" /></li> 
    7. 

  7.       <li></li> 
    8. 

  8.  
    9. 

  9.       <li><img src="p_w_picpaths/06.jpg" width="96px" /></li> 
    10. 

  10.       <li><img src="p_w_picpaths/07.jpg" width="96px" /></li> 
    11. 

  11.       <li><img src="p_w_picpaths/08.jpg" width="96px" /></li> 
    12. 

  12.       <li><img src="p_w_picpaths/09.jpg" width="96px" /></li> 
    13. 

  13.       <li><img src="p_w_picpaths/010.jpg" width="96px" /></li> 
    14. 

  14.  
    15. 

  15.       <li><img src="p_w_picpaths/02.jpg" width="96px" /></li> 
    16. 

  16.       <li></li> 
    17. 

  17.       <li><img src="p_w_picpaths/03.jpg" width="96px" /></li> 
    18. 

  18.       <li><img src="p_w_picpaths/04.jpg" width="96px" /></li> 
    19. 

  19.       <li><img src="p_w_picpaths/05.jpg" width="96px" /></li> 
    20. 

  20.   </ul> 
    21. 

  21. </div> 
    22. 



 




    

  1. #p_w_picpathlist li{ 
    2. 

  2.   width: 96px; 
    3. 

  3.   height: 96px;  
    4. 

  4.   overflow: hidden; 
    5. 

  5.   margin-left: 8px;  
    6. 

  6.   margin-top: 8px; 
    7. 

  7.   float: left; 
    8. 

  8.   border-bottom: 1px solid #eee; 
    9. 

  9.   background: #f2f3f5 url(img.png) no-repeat center center;  
    10. 

  10.   box-shadow:3px 3px 3px rgba(0,0,0,.2); 
    11. 

  11. } 
    12. 

  12. #p_w_picpathlist li img{ 
    13. 

  13.   width: 96px; 
    14. 

  14. } 
    15. 



 


2、瀑布流


效果


html5+css3+js开发APP实例教程2 -- 图片/图标列表




    

  1. <div class="tempbox"> 
    2. 

  2.   <div id="p_w_picpathlistpbl"> 
    3. 

  3.     <p><img src="p_w_picpaths/01.jpg" width="96px" /></p> 
    4. 

  4.     <p><img src="p_w_picpaths/02.jpg" width="96px" /></p> 
    5. 

  5.     <p><img src="p_w_picpaths/03.jpg" width="96px" /></p> 
    6. 

  6.     <p><img src="p_w_picpaths/04.jpg" width="96px" /></p> 
    7. 

  7.     <p><img src="p_w_picpaths/05.jpg" width="96px" /></p> 
    8. 

  8.     <p><img src="p_w_picpaths/06.jpg" width="96px" /></p> 
    9. 

  9.     <p><img src="p_w_picpaths/07.jpg" width="96px" /></p> 
    10. 

  10.     <p><img src="p_w_picpaths/08.jpg" width="96px" /></p> 
    11. 

  11.     <p><img src="p_w_picpaths/09.jpg" width="96px" /></p> 
    12. 

  12.     <p><img src="p_w_picpaths/010.jpg" width="96px" /></p> 
    13. 

  13.     <p><img src="p_w_picpaths/01.jpg" width="96px" /></p> 
    14. 

  14.     <p><img src="p_w_picpaths/02.jpg" width="96px" /></p> 
    15. 

  15.     <p><img src="p_w_picpaths/03.jpg" width="96px" /></p> 
    16. 

  16.     <p><img src="p_w_picpaths/04.jpg" width="96px" /></p> 
    17. 

  17.     <p><img src="p_w_picpaths/05.jpg" width="96px" /></p> 
    18. 

  18.     <p><img src="p_w_picpaths/06.jpg" width="96px" /></p> 
    19. 

  19.     <p><img src="p_w_picpaths/07.jpg" width="96px" /></p> 
    20. 

  20.     <p><img src="p_w_picpaths/08.jpg" width="96px" /></p> 
    21. 

  21.     <p><img src="p_w_picpaths/09.jpg" width="96px" /></p> 
    22. 

  22.     <p><img src="p_w_picpaths/010.jpg" width="96px" /></p> 
    23. 

  23. </div> 
    24. 

  24. </div> 
    25. 



 




    

  1. #p_w_picpathlistpbl { 
    2. 

  2.     width:304px; 
    3. 

  3.     margin-top: 8px; 
    4. 

  4.     margin-left: 8px; 
    5. 

  5.     -webkit-column-count:3; 
    6. 

  6.      -moz-column-count:3; 
    7. 

  7.          column-count:3; 
    8. 

  8.     } 
    9. 

  9. #p_w_picpathlistpbl p{background: #f2f3f5; margin-bottom: 8px;} 
    10. 

  10. #p_w_picpathlistpbl p img{width: 96px;} 
    11. 



 


3、图标列表


html5+css3+js开发APP实例教程2 -- 图片/图标列表




    

  1. <div class="tempbox"> 
    2. 

  2.   <div id="icoimglist"> 
    3. 

  3.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    4. 

  4.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    5. 

  5.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    6. 

  6.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    7. 

  7.  
    8. 

  8.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    9. 

  9.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    10. 

  10.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    11. 

  11.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    12. 

  12.  
    13. 

  13.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    14. 

  14.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    15. 

  15.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    16. 

  16.     <li><p><img src="p_w_picpaths/ico01.png" /></p><span>栏目一</span></li> 
    17. 

  17.   </div/> 
    18. 

  18. </div> 
    19. 



 




    

  1. #icoimglist li{ 
    2. 

  2.  width: 80px; height: 80px; 
    3. 

  3.  float: left; 
    4. 

  4.  text-align: center; 
    5. 

  5.   margin-top: 10px; 
    6. 

  6. } 
    7. 

  7. #icoimglist li p{ 
    8. 

  8.   width: 56px;height: 56px; 
    9. 

  9.   border: 1px solid #ccc; 
    10. 

  10.   border-radius: 5px; 
    11. 

  11.   margin: 0 auto; 
    12. 

  12.   overflow: hidden; 
    13. 

  13.   box-shadow:3px 3px 3px rgba(0,0,0,.3); 
    14. 

  14. } 
    15. 

  15. #icoimglist li span{ 
    16. 

  16.   font-size: 12px; 
    17. 

  17.  color: #b1b1b1; 
    18. 

  18.   display: block; 
    19. 

  19.   height: 24px; 
    20. 

  20.   line-height: 24px; 
    21. 

  21. } 
    22. 



*************************************


DEMO


×××


*************************************