CSS parantaa kuvien esitystapaa
Voit parantaa kuvien esitystapaa lisäämällä CSS: ään lisäkoodin. Ne ovat joustavia sen mukaan, mitä haluat saavuttaa sivustossasi.
täytäntöönpano
Aseta haluamasi koodit CSS ja testaa sivullesi, kuten tämä:
Esimerkkejä CSS-koodiin
.photo {taustaväri: #fafbfc; raja: 1px kiinteä # b0b0b0; marginaali: 0 0 10px 10px; padding: 5px; } .phototoright {border: 5px solid # b0b0b0; marginaali: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; float: vasen; marginaali: 5px 15px 6px 15 px; } Voit rajata kuvan vasemmalla olevalla tekstillä
div # photoflot p {marginaali: 0; padding: 0; text-align: perustella; } div # photoflot img {float: vasen; background-color: #fafbfc; raja: 1px kiinteä # b0b0b0; marginaali: 0 0 10px 10px; padding: 5px; } hr {clear: left; } Käytä sitä sellaisena:
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 ...
Voit rajata kuvan oikealla olevalla tekstillä
/ * Jos haluat kuvata kuvan oikealla olevalla tekstillä * / .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; } Käytä sitä sellaisena:
Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc on ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac -ilmaisin. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ...