亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

用css3實現(xiàn)的照片墻效果

Original 2019-02-11 15:21:34 277
abstract：看了老師的課程。感覺這種常用的照片墻實現(xiàn)起來非常簡單。效果非常好看。感謝老師的教學<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &

看了老師的課程。感覺這種常用的照片墻實現(xiàn)起來非常簡單。效果非常好看。感謝老師的教學


photo.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .pic{width:1030px;height:750px;margin:20px auto;background-color: #ccc}
       .pic ul{margin: 0;padding: 0;}
       .pic li{float:left;list-style:none;width:160px;text-align:center;margin: 0 5px;}
       .pic img{transition: all 1s;border:1px solid #ccc;width:150px;height:auto;margin-top: 20px;}
       .pic img:hover{transform:scale(2);border:1px solid #ccc;box-shadow:#2aabd2 5px 5px 5px 5px;}
    </style>
</head>
<body>
  <div class="pic">
     <ul>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center"src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center"src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>
         <li><img  class="text-center" src="image/dog.jpeg" alt=""></li>

     </ul>
  </div>
</body>
</html>




Correcting teacher：滅絕師太Correction time：2019-02-11 16:04:33
Teacher's summary：只是一個簡單的css3動畫效果,學到的越多,你能完成的效果就越好

Release Notes

Popular Entries