CSS na zlepšenie prezentácie vašich obrázkov

Ak chcete zlepšiť prezentáciu svojich obrázkov, môžete do svojho CSS začleniť nejaký dodatočný kód. Sú flexibilné v závislosti od toho, čo chcete dosiahnuť na svojich stránkach.

uskutočnenie

Vložte požadované kódy CSS a vyskúšajte na stránke, ako je táto:

Niektoré príklady na umiestnenie do kódu CSS

 .photo {background-color: #fafbfc; hranica: 1px pevná # b0b0b0; rozpätie: 0 0 10px 10px; padding: 5px; } .phototoright {hranica: 5px pevná # b0b0b0; okraj: 5px 6px 15px 6px; } .phototoleft {hranica: 5px pevná # b0b0b0; plavák: vľavo; okraj: 5px 15px 6px 15 px; } 

Orámovanie obrázka textom vľavo

 div # photoflot p {margin: 0; padding: 0; text-align: ospravedlniť; } div # photoflot img {float: left; background-color: #fafbfc; hranica: 1px pevná # b0b0b0; rozpätie: 0 0 10px 10px; padding: 5px; } hr {clear: vľavo; } 

Použite ho ako taký:

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ámovanie obrázka s textom vpravo

 / * Na orámovanie obrázka s textom napravo * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; background-color: # E9E9E9; padding: 3PX; rozpätie: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Použite ho ako taký:

 Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Predchádzajúce a nasledujúce novinky: Gravita dui pellentesque tincidunt. Nunc v ipsum. Suspendovaný elit. Fusce sedieť amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Prein ac sapien et neque pellentesque mollis ...