CSS for at forbedre præsentationen af dine billeder
For at forbedre præsentationen af dine billeder kan du inkorporere yderligere kode i dit CSS. De er fleksible afhængigt af, hvad du vil opnå på dit websted.
Implementering
Sæt de ønskede koder CSS og test på din side, som denne:
Nogle eksempler at placere i CSS-koden
.foto {baggrundsfarve: #fafbfc; grænse: 1px fast # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } .fotobild {grænse: 5px fast # b0b0b0; margin: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; flyde: venstre; margin: 5px 15px 6px 15 px; } At ramme et billede med tekst til venstre
div # photoflot p {margin: 0; padding: 0; text-align: retfærdiggøre; } div # photoflot img {float: left; background-color: #fafbfc; grænse: 1px fast # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } hr {clear: left; } Brug det som sådan:
Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ud nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...
At ramme et billede med teksten til højre
/ * For at ramme et billede med teksten til højre * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; background-color: # E9E9E9; padding: 3px; margin: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } Brug det som sådan:
Proin ac sapien og neque pellentesque mollis. Præsentere ud magna sed tortor luctus pretium. Proin a est gravida pentaesque 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 ...