HTML
1 <body> 2 <h2>照片墙制作</h2> 3 <div class="container"> 4 <img class="img1" src="img/img (1).jpg" style="max-width:90%" style="max-width:90%" alt=""> 5 <img class="img2" src="img/img (2).jpg" style="max-width:90%" style="max-width:90%" alt=""> 6 <img class="img3" src="img/img (3).jpg" style="max-width:90%" style="max-width:90%" alt=""> 7 <img class="img4" src="img/img (4).jpg" style="max-width:90%" style="max-width:90%" alt=""> 8 <img class="img5" src="img/img (5).jpg" style="max-width:90%" style="max-width:90%" alt=""> 9 </div>10 </body>
CSS(此处省略了浏览器私有属性前缀!)
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
Perbezaan antara nota kaki dan nota hujung
Perbezaan antara gelung while dan gelung do while
Apakah yang perlu saya lakukan jika imej CAD tidak boleh dialihkan?
Apakah perbezaan antara protokol TCP dan protokol UDP?
Sepuluh pertukaran mata wang digital teratas
Mana yang lebih berbaloi untuk dipelajari, bahasa c atau python?
Perisian mesin maya
Apakah prinsip dan mekanisme dubbo
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
