CSS, et suurendada oma piltide esitlust

Oma piltide esitluse tõhustamiseks saate oma CSS-sse lisada täiendava koodi. Need on paindlikud, sõltuvalt sellest, mida soovite oma saidil saavutada.

Rakendamine

Pange soovitud koodid CSS ja testige oma lehele, näiteks:

Mõned näited CSS-koodi sisestamiseks

 .photo {taustavärv: #fafbfc; piir: 1px tahke # b0b0b0; marginaal: 0 0 10px 10px; polsterdus: 5px; } .phototoright {border: 5px tahke # b0b0b0; varu: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; float: vasakule; varu: 5px 15px 6px 15 px; } 

Pildi raamimiseks vasakul asuva tekstiga

 div # photoflot p {marginaal: 0; polster: 0; text-align: õigustada; } div # photoflot img {float: vasakule; taustavärv: #fafbfc; piir: 1px tahke # b0b0b0; marginaal: 0 0 10px 10px; polsterdus: 5px; } hr {selge: vasakule; } 

Kasutage seda sellisena:

Fusce sem täris, 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 ...

Pildi raamimiseks paremal asuva tekstiga

 / * Pildi raamimiseks paremal tekstiga * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; taustavärv: # E9E9E9; polsterdus: 3px; varu: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Kasutage seda sellisena:

 Proin ac sapien et neque pellentesque mollis. Esinent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc ipsumis. Suspendisse elit. Fusce sit amet loeng. Sügav ja ebaühtlane odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ... 

Eelmine Artikkel Järgmine Artikkel

Top Näpunäited