![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Три плавающих столбца в CSS.( продолжение)Вот таблица стилей, формирующая указанную раскладку на страницах сайта. Комментарии разъясняют функции основных стилевых правил; элемент div «container» при определении его как блока, содержащего все остальные элементы страниц сайта, был позиционирован относительно (но не перемещен). Есть ссылки в Rambler, Google, Mail, Yandex, Facebook, Twitter, ВК. Хочу несколько моделей картин закинуть в Pinterest на данную тему. Те, которые заходят Rambler, Google, Mail, Yandex, Facebook, Twitter, ВК обязательно оставьте комментарий о прочитанном.Пример с позиционированием только боковых столбцов: body { margin:10рх; padding: 10рх; } #container { position: absolute; /* создание содержащего все элементы блока */ width: 700рх; border: solid lpx; } /* рамка, обозначающая границы контейнера*/ #masthead { height: 70рх; background: #ССС; } #main { margin: 0 160px; } /* пространство слева и справа от боковых столбцов*/ #links { position: absolute; top: 7 Opx; left: Opx; /* позиционирование к левому краю контейнера */ width: 15Opx; background: #EEE; } fnews { position: absolute; top: 7 Opx; right: Opx; /* позиционирование к правому краю контейнера */ width: 15Opx; background: #EEE; } ♦footer { margin:0 160px; /*как у содержания,чтобы оставить место справа и слева*/ padding: 15рх; background: #666; } Позиционирование трех столбцов. В примере абсолютное позиционирование применяется ко всем трем столбцам. Для боковых столбцов включены фоновые цвета, чтобы обозначить их размер и положение. Получающаяся раскладка страниц сайта несколько отличается от предыдущего примера. Раскладка в три столбца. Элемент footer и рамка вокруг страницы сайта опущены. Это объясняется тем, что все три элемента между шапкой и низом страницы сайта позиционируются абсолютно и удаляются из потока документа. При этом элемент footer должен подняться на верх страницы сайта и встать сразу под шапкой. Точно так же рамка вокруг элемента-контейнера включала бы только шапку и элемент footer, находящийся вверху страницы сайта, а это не совсем то, что нам нужно. Чтобы избежать использования JavaScript и других сложных обходных маневров, мы удалили из примера элемент footer и рамку. Вот таблица стилей, используемая для создания этой элементарной раскладки в три столбца страниц сайта. Комментарии обозначают основные стилевые правила и их функции: body: { margin: 0; padding: 0; } #container { position: relative; /* создание блока, содержащего все элементы */ width: 700рх; } #masthead { height: 70рх ; background: #ССС ; } #main { position: absolute; top: 7 Opx; left: 150px; /* фиксированный дизайн - значения в пикселах */ width: 40Opx ; } #links { position: absolute; top: 7Opx; left: Opx; /* позиционирование к левому краю контейнера */ width: 15Opx; background: #ЕЕЕ ; } #news { position: absolute; top: 7Opx ; left: 550px; /* третий столбец начинается через 550 пиксе лов слева */ width: 15Opx; background: #ЕЕЕ; }
обратно назад дальше продолжение темы ПОНРАВИЛОСЬ?
|
добрый день!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 17-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |