CSS za izboljšanje predstavitve slik

Če želite izboljšati predstavitev svojih slik, lahko v svoj CSS vključite nekaj dodatne kode. So prilagodljivi glede na to, kaj želite doseči na vašem spletnem mestu.

Izvajanje

Postavite želene kode CSS in preizkusite na svoji strani, kot je ta:

Nekaj ​​primerov za uvrstitev v kodo CSS

 .photo {background-color: #fafbfc; obroba: 1px solid # b0b0b0; marža: 0 0 10px 10px; oblazinjenje: 5px; } .phototoright {border: 5px solid # b0b0b0; rob: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; plovec: levo; rob: 5px 15px 6px 15 px; } 

Če želite sliko uokviriti z besedilom na levi strani

 div # photoflot p {margin: 0; oblazinjenje: 0; text-align: justify; } div # photoflot img {float: levo; barva ozadja: #fafbfc; obroba: 1px solid # b0b0b0; marža: 0 0 10px 10px; oblazinjenje: 5px; } hr {jasno: levo; } 

Uporabite ga kot takega:

Fusce sem turpis, mollis ut, commodo quis, naramnica 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 ...

Če želite sliko uokviriti z besedilom na desni

 / * Za uokvirjanje slike z besedilom na desni * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; barva ozadja: # E9E9E9; oblazinjenje: 3px; margin: 6px; } .rightimg {float: desno;} .leftimg {float: levo;} div.centreimg {text-align: center; } 

Uporabite ga kot takega:

 Proin ac sapien et neque pellentesque mollis. Preisent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendiranje elita. Fusce sit amet lectus. Quisque in 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 ... 

Prejšnji Članek Naslednji Članek

Top Nasveti