Resimlerinizin sunumunu geliştirmek için CSS

Resimlerinizin sunumunu geliştirmek için, CSS’nize bazı ek kodlar ekleyebilirsiniz. Sitenizde ne elde etmek istediğinize bağlı olarak esnektirler.

uygulama

İstediğiniz kodları CSS koyun ve sayfanıza şöyle test edin:

CSS koduna yerleştirmek için bazı örnekler

 .photo {background-color: #fafbfc; sınır: 1px katı # b0b0b0; marj: 0 0 10 piksel 10 piksel; dolgu: 5px; } .phototoright {border: 5px katı # b0b0b0; marj: 5 piksel 6 piksel 15 piksel 6 piksel; } .toptop: {border: 5px katı # b0b0b0; şamandıra: sol; marj: 5 piksel 15 piksel 6 piksel 15 piksel; } 

Soldaki metni içeren bir resmi çerçevelemek için

 div # photoflot p {kenar boşluğu: 0; dolgu: 0; text-align: justify; } div # photoflot img {float: sol; Arka plan renkli: #fafbfc; sınır: 1px katı # b0b0b0; marj: 0 0 10 piksel 10 piksel; dolgu: 5px; } hr {clear: left; } 

Gibi kullanın:

Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Utmy olmayan libero vitae neque. Quisque lacus. Nullam lobortis. Cras Quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...

Bir resmi sağdaki metinle çerçevelemek için

 / * Bir resmi sağdaki metinle çerçevelemek için * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; background-color: # E9E9E9; dolgu: 3 piksellik; marjı: 6 piksel; } .rightimg {float: sağ;} .leftimg {float: left;} div.centreimg {text-align: center; } 

Gibi kullanın:

 Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Gravida dui pellentesque tincidunt'ı destekle. Ipsum'da Nunc. Suspendisse seçkin. Fusce lectus amet otur. Quisque ve neque vitae odio sagittis tincidunt.Lorem ipsum dolor amet oturmak, Consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ...