• Авторизация


Какого размера должен быть фон для сайта? 10-09-2014 15:04 к комментариям - к полной версии - понравилось!


Вопрос можно ещё поставить так: какой оптимальный размер изображения для фона сайта или подстройка размера картинки под разрешение экрана.

☑Задача установить фон сайта в виде одной фотографии , т.е. без повторений.

Приблизительно так:

body{
background-image: url (ссылка на изображение);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0%
}

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.

Можно взять максимальный размер фото 1920x1200 этого достаточно для большинства мониторов.

Всё большую популярность стали приобретать "резиновые" сайты, которые создаются путём использования

- @Media,
- относительных величин.
Благодаря им теперь не нужно искать оптимальную ширину сайта. Из всего многообразия types и Queries, как правило, внедряют print и width.


☑Макет резинового сайта

<style>
main { /* основное содержимое */
position: relative; /* боковая колонка перемещается в рамках основного содержания */
margin: 0 auto; /* сайт располагается по центру экрана */
max-width: 1200px; /* резиновая, растягивается до значения в 1200px */
padding-right: 310px; /* = боковая колонка + отступ в 10px */
}
aside { /* боковая колонка */
width: 300px; /* фиксированная, не меняется с изменением размера окна браузера */
position: absolute; top: 0; right: 0; /* прижата к верхнему правому углу */
}
</style>

<main>
<aside>боковая панель</aside>
</main>





Резиновая верстка сайта с плавающей боковой колонкой

<style>
main {
margin: 0px auto;
max-width: 1200px;
padding-right: 310px;
}
.pravo { /* боковая колонка прижата к правому углу */
float: right;
margin-right: -10px;
}
aside {
width: 300px;
position: fixed; /* перемещается вместе с прокруткой страницы */
top: 9em; /* = шапке сайта */
z-index: 101;
}
</style>

<main>
<div class="pravo"><aside>боковая панель</aside></div>
</main>

Подробнее с примерами смотрим здесь - http://shpargalkablog.ru/2012/09/rezinovyi-sajt.html#maket
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Какого размера должен быть фон для сайта? | Свати - Мир, как зеркало, является лишь отражением нас самих и наших мыслей | Лента друзей Свати / Полная версия Добавить в друзья Страницы: раньше»