CSS для покращення презентації зображень
Щоб покращити презентацію зображень, можна включити додатковий код у свій CSS. Вони гнучкі залежно від того, що ви хочете досягти на вашому сайті.
Реалізація
Вставте потрібні коди CSS і перевірте на своїй сторінці, наприклад:
Деякі приклади розміщуються в коді CSS
.photo {background-color: #fafbfc; кордон: 1px твердий # b0b0b0; маржа: 0 0 10px 10px; заповнення: 5px; } .phototoright {border: 5px solid # b0b0b0; запас: 5px 6px 15px 6px; } .phototoleft {border: 5px solid # b0b0b0; поплавок: лівий; запас: 5px 15px 6px 15 px; } Кадрувати зображення з текстом ліворуч
div # photoflot p {margin: 0; заповнення: 0; text-align: justify; } div # photoflot img {float: left; колір фону: #fafbfc; кордон: 1px твердий # b0b0b0; маржа: 0 0 10px 10px; заповнення: 5px; } hr {clear: left; } Використовуйте його як таке:
Fusce sem turpis, mollis ut, commodo quis, аликет егет, 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 ...
Створити кадр із текстом праворуч
/ * Для кадрування зображення з текстом праворуч * / .rightimg, .leftimg, .centreimg img {border: 1px solid #AAAAAA; фоновий колір: # E9E9E9; заповнення: 3px; запас: 6px; } .rightimg {float: right;} .leftimg {float: left;} div.centreimg {text-align: center; } Використовуйте його як таке:
Proin ac sapien et neque pellentesque mollis. Виконайте перевагу перед вами. Припускають, що він має важливе значення. Nunc at ipsum. Суспендують еліт. Fusce sit amet lectus. Quisque і neque vitae odio sagittis tincidunt.Lorem ipsum dolor сидіти amet, consectetuer adipiscing еліт. Сед тел. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis ...