communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > CSS3 照片墙_html/css_WEB-ITnose

CSS3 照片墙_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:52:28
original
1282 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

SHOW

Étiquettes associées：
CSS3 照片墙
source：php.cn
Article précédent：样式问题_html/css_WEB-ITnose Article suivant：Height 100%的问题_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Comment utiliser correctement @can dans le modèle de lame en utilisant la stratégie Je ne parviens pas à créer @can() dans le modèle de lame car la documentation suggère que ...
Depuis 2024-04-04 13:51:55
0
1
344
Créer un pull API pour Vue.js Je ne sais pas ce qui ne va pas chez moi ni pourquoi cela ne fonctionne pas, je veux juste...
Depuis 2024-04-03 16:12:29
0
1
363
Récupérer la valeur de WordPress Photo à placer dans une page php personnalisée J'ai besoin de créer un site Web WordPress à partir de HTML existant (plus précisément à p...
Depuis 2024-04-02 19:13:12
0
1
296
Les icônes Reactjs SVG sont de tailles différentes malgré le même CSS C'est la première fois que je crée un site Web avec Reactjs. J'utilise les icônes ReactJS ...
Depuis 2024-04-01 13:18:38
0
1
355
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal