CSS kann verwendet werden zum erstellen einer Bilder-Galerie.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div.gallery { |
| margin: 5px; |
| border: 1px solid orange; |
| float: left; |
| width: 150px; |
| } |
| div.gallery:hover { |
| border: 1px solid black ; |
| } |
| div.gallery img { |
| width: 70%;
|
| margin: 3% 15%; |
| } |
| div.desc { |
| padding: 15px; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery2.png"> |
| <img src="Bilder/CSS-imageGallery2.png" alt="Bild HTML" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery1.png"> |
| <img src="Bilder/CSS-imageGallery1.png" alt="Bild CSS" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery3.png"> |
| <img src="Bilder/CSS-imageGallery3.png" alt="Bild Javascript" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery4.png"> |
| <img src="Bilder/CSS-imageGallery4.png" alt="Bild PHP" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| </body> |
| </html> |
Responsive Bilder-Galerien
Verwende CSS media queries zum erstellen von responsive Bilder-Galerien die auf Desktop-PC`s , Tablets und Smartphone gut aussehen.
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div.gallery { |
| border: 1px solid orange; |
| } |
| div.gallery:hover { |
| border: 1px solid black; |
| } |
| div.gallery img { |
| width: 100%; |
| height: auto; |
| } |
| div.desc { |
| padding: 15px; |
| text-align: center; |
| } |
| * { |
| box-sizing: border-box; |
| } |
| .responsive { |
| padding: 0 6px; |
| float: left; |
| width: 24.99999%; |
| } |
| @media only screen and (max-width: 700px) { |
| .responsive { |
| width: 49.99999%; |
| margin: 6px 0; |
| } |
| } |
| @media only screen and (max-width: 500px) { |
| .responsive { |
| width: 100%; |
| } |
| } |
| .clearfix::after { |
| content: ""; |
| display: table; |
| clear: both; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Responsive Bilder-Galerie</h2> |
| <h4>Verändere die Grösse des Bildeschirm um den Effekt zu sehen.</h4> |
| <div class="responsive"> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery2.png"> |
| <img src="Bilder/CSS-imageGallery2.png" alt="Bild HTML" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| </div> |
| <div class="responsive"> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery1.png"> |
| <img src="Bilder/CSS-imageGallery1.png" alt="Bild CSS" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| </div> |
| <div class="responsive"> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery3.png"> |
| <img src="Bilder/CSS-imageGallery3.png" alt="Bild Javascript" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| </div> |
| <div class="responsive"> |
| <div class="gallery"> |
| <a target="_blank" href="Bilder/CSS-imageGallery4.png"> |
| <img src="Bilder/CSS-imageGallery4.png" alt="Bild PHP" width="600" height="400"> |
| </a> |
| <div class="desc">Die Beschreibung zum Bild</div> |
| </div> |
| </div> |
| <div class="clearfix"></div> |
| <div style="padding:6px;"> |
| <p>Dieses Beispiel verwendet Media-Queries um die Bild-Galerie auf den verschieden Screens unterschiedlich darzustellen:<br> |
| Für Screens grösser als 700px Breite, es zeigt die Bilder nebeneinander. <br> |
| Für Screens schmaler als 700px Breite, es zeigt 2 Bilder nebeneinander.<br> |
| Für Screens kleiner als 500px Breite, die Bilder werden sich stapeln vertikal (100%).</p> |
| </div> |
| </body> |
| </html> |
