Heim >Web-Frontend >HTML-Tutorial >CSS3 照片墙_html/css_WEB-ITnose
CSS3 照片墙_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:281271Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：样式问题_html/css_WEB-ITnoseNächster Artikel：Height 100%的问题_html/css_WEB-ITnose