CSS, um die Präsentation Ihrer Bilder zu verbessern

Um die Darstellung Ihrer Bilder zu verbessern, können Sie zusätzlichen Code in Ihr CSS integrieren. Sie sind flexibel, je nachdem, was Sie auf Ihrer Website erreichen möchten.

Implementierung

Gib die gewünschten CSS-Codes ein und teste sie auf deiner Seite, so:

Einige Beispiele für den CSS-Code

 .photo {Hintergrundfarbe: #fafbfc; Rand: 1px durchgehend # b0b0b0; Rand: 0 0 10px 10px; Polsterung: 5px; } .phototoright {border: 5px solid # b0b0b0; Rand: 5 x 6 x 15 x 6 x; } .phototoleft {border: 5px solid # b0b0b0; Schwimmer: links; Rand: 5 x 15 x 6 x 15 Pixel; } 

Um ein Bild mit Text nach links zu rahmen

 div # photoflot p {margin: 0; Polsterung: 0; Text ausrichten: rechtfertigen; } div # photoflot img {float: left; Hintergrundfarbe: #fafbfc; Rand: 1px durchgehend # b0b0b0; Rand: 0 0 10px 10px; Polsterung: 5px; } hr {clear: left; } 

Verwenden Sie es als solches:

Fusce Sem Turpis, Mollis Ut, Commodo Quis, Aliquet Eget, Ipsum. Ut nonummy libero vitae neque. Quisque Lacus. Nullam Lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...

Um ein Bild mit dem Text auf der rechten Seite einzurahmen

 / * So rahmen Sie ein Bild mit dem Text rechts ein * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; Hintergrundfarbe: # E9E9E9; Polsterung: 3px; Rand: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Verwenden Sie es als solches:

 Proin ac sapien und neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc bei Ipsum. Suspendisse elit. Fusce sitzt am Vortrag. Quisque und neque vitae odio sagittis tincidunt.Lorem ipsum dolor sitzen amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ... 

Vorherige Artikel Nächster Artikel

Top-Tipps