HTML
1 <body> 2 <h2>照片墙制作</h2> 3 <div class="container"> 4 <img class="img1" src="img/img (1).jpg" height="150" width="150" alt=""> 5 <img class="img2" src="img/img (2).jpg" height="160" width="200" alt=""> 6 <img class="img3" src="img/img (3).jpg" height="170" width="200" alt=""> 7 <img class="img4" src="img/img (4).jpg" height="240" width="200" alt=""> 8 <img class="img5" src="img/img (5).jpg" height="300" width="300" alt=""> 9 </div>10 </body>
CSS (browser private property prefix omitted here!)
1 <style> 2 * {margin:0; padding:0;} 3 body { background-color: #eee; padding-top: 50px;} 4 h2 { text-align: center;} 5 .container { position: relative; width:1000px; height:700px; margin:0px auto; } 6 img { position: absolute; top:50px; left:100px; cursor: pointer; 7 padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd; 8 transition:0.5s; box-shadow: 3px 3px 3px #ccc; 9 }10 .img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}11 .img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}12 .img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}13 .img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}14 .img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}15 img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}16</style>SHOW
What is an .Xauthority file?
Solution to split word table into two pages
Excel table slash divided into two
What is an optical drive
Solutions to unknown software exception exceptions in computer applications
What platform is Fengxiangjia?
What directory search engines are there?
What software is Penguin?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
