CSS for å forbedre presentasjonen av bildene dine

For å forbedre presentasjonen av bildene dine, kan du inkludere noen tilleggskode i CSS. De er fleksible, avhengig av hva du vil oppnå på nettstedet ditt.

Gjennomføring

Sett de ønskede kodene CSS og test på siden din, slik:

Noen eksempler å plassere i CSS-koden

 .fotografi {bakgrunnsfarge: #fafbfc; grense: 1px solid # b0b0b0; margin: 0 0 10px 10px; padding: 5 px; } .phototoright {border: 5px solid # b0b0b0; margin: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; flyte: venstre; margin: 5px 15px 6px 15 px; } 

For å ramme et bilde med tekst til venstre

 div # photoflot p {margin: 0; padding: 0; text-align: rettferdiggjøre; } div # photoflot img {float: left; background-color: #fafbfc; grense: 1px solid # b0b0b0; margin: 0 0 10px 10px; padding: 5 px; } hr {klar: venstre; } 

Bruk det som sådan:

Fusse som 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 ...

For å ramme et bilde med teksten til høyre

 / * For å ramme et bilde med teksten til høyre * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; background-color: # E9E9E9; padding: 3px; margin: 6 piksler; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Bruk det som sådan:

 Proin ac sapien og neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin er est gravid dui pellentesque tincidunt. Nunc på ipsum. Suspendisse elit. Fusce sit 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 ...