CSS pro zlepšení prezentace vašich obrázků

Chcete-li zlepšit prezentaci svých obrázků, můžete do CSS začlenit další kód. Jsou flexibilní v závislosti na tom, co chcete na svých stránkách dosáhnout.

Implementace

Vložte požadované kódy CSS a otestujte na stránce, jako je tato:

Některé příklady umístit do kódu CSS

 .photo {background-color: #fafbfc; ohraničení: 1px pevné # b0b0b0; okraj: 0 0 10px 10px; polstrování: 5px; } .phototoright {hranice: 5px pevné # b0b0b0; okraj: 5px 6px 15px 6px; } .phototoleft {hranice: 5px pevné # b0b0b0; plavat vlevo; okraj: 5px 15px 6px 15 px; } 

Orámování obrázku s textem vlevo

 div # photoflot p {margin: 0; výplň: 0; text-align: justify; } div # photoflot img {float: left; barva pozadí: #fafbfc; ohraničení: 1px pevné # b0b0b0; okraj: 0 0 10px 10px; polstrování: 5px; } hr {clear: vlevo; } 

Použít jako takový:

Fusce sem turpis, mollis ut, komodo 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 ...

Orámování obrázku s textem vpravo

 / * Chcete-li orámovat obraz s textem napravo * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; barva pozadí: # E9E9E9; polstrování: 3px; marže: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Použít jako takový:

 Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc v ipsum. Suspendní elit. Fusce sedět amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ...