CSS a képek bemutatásának javítása érdekében

A képek bemutatásának javítása érdekében további kódot is beilleszthet a CSS-be. Ezek rugalmasak attól függően, hogy mit szeretne elérni a webhelyén.

Végrehajtás

Tegye a kívánt kódokat CSS és tesztelje az oldalára, így:

Néhány példa a CSS kódba

 .photo {háttérszín: #fafbfc; határ: 1px szilárd # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } .phototoright {border: 5px szilárd # b0b0b0; margin: 5px 6px 15px 6px; } .phototoleft {border: 5px szilárd # b0b0b0; balra lebeg; margin: 5px 15px 6px 15 px; } 

A kép keretezése balra lévő szöveggel

 div # photoflot p {margin: 0; padding: 0; text-align: indokolják; } div # photoflot img {float: balra; background-color: #fafbfc; határ: 1px szilárd # b0b0b0; margin: 0 0 10px 10px; padding: 5px; } hr {clear: balra; } 

Használja ezt:

Fusce sem terpis, 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 ...

A kép jobb oldali szövegével való keretezéséhez

 / * Kép jobbra mozgatásához * / .rightimg, .leftimg, .centreimg img {border: 1px szilárd #AAAAAA; background-color: # E9E9E9; padding: 3px; margin: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Használja ezt:

 Proin ac sapien et neque pellentesque mollis. A luctus pretium prestent ut magna sed tortor. Proin a est gravida dui pellentesque tincidunt. Nunc ipsumban. Suspendisse elit. Fusce sit amet előadás. 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 ...