CSS để tăng cường trình bày hình ảnh của bạn

Để tăng cường trình bày hình ảnh của bạn, bạn có thể kết hợp một số mã bổ sung trong CSS của mình. Chúng linh hoạt tùy thuộc vào những gì bạn muốn đạt được trên trang web của bạn.

Thực hiện

Đặt mã CSS mong muốn và kiểm tra trong trang của bạn, như thế này:

Một số ví dụ để đặt trong mã CSS

 .photo {màu nền: #fafbfc; viền: 1px solid # b0b0b0; lề: 0 0 10px 10px; phần đệm: 5px; } .phototoright {Border: 5px solid # b0b0b0; lề: 5px 6px 15px 6px; } .phototoleft {viền: 5px solid # b0b0b0; phao: trái; lề: 5px 15px 6px 15 px; } 

Để đóng khung một hình ảnh với văn bản ở bên trái

 div # photoflot p {lề: 0; đệm: 0; text-align: justify; } div # photoflot img {float: left; màu nền: #fafbfc; viền: 1px solid # b0b0b0; lề: 0 0 10px 10px; phần đệm: 5px; } hr {rõ ràng: trái; } 

Sử dụng nó như vậy:

Fusce sem turpis, mollis ut, Vendo quis, aliquet eget, ipsum. Ut nonummy Libero vitae neque. Quisque lacus. Thùy Nullam. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...

Để đóng khung một hình ảnh với văn bản bên phải

 / * Để đóng khung hình ảnh với văn bản bên phải * / .rightimg, .leftimg, .centreimg img {Border: 1px solid #AAAAAA; màu nền: # E9E9E9; phần đệm: 3px; lề: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: centre; } 

Sử dụng nó như vậy:

 Proin ac sapien et neque viên nhuyễn thể. Praesent ut magna sed tortor luctus Pretium. Proin a est gravida dui pellentesque tincidunt. Nunc tại ipsum. Đình chỉ ưu tú. Fusce ngồi amet giảng. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor ngồi amet, consectetuer adipiscing elit. Sed ac Tellus. Nulla vel arcu. Proin ac sapien et neque nhuyễn thể ...