Заглянем в структуру страницы нашего дневника. Тыкнем в
эту кнопочку
1. BODY — это вся страница. Для нее обычно задают фон.
Код таков:
Разберем по частям:
а) background: url('АДРЕС КАРТИНКИ') Здесь вам нужно только вставить ссылку на картинку, которая у вас будет на фоне. Куда вставлять? туда, где написано "адрес картинки". Как вставлять? читаем и смотрим картинку
тутб) repeat Это часть означает, будет ли повторяться ваша картинка, растягиваться на весь фон или нет.
repeat - картинка будет дублироваться и вправо и влево (по горизонтали и вертикали) на всю ширину фона
no-repeat - фоновое изображение без его повторений
repeat-x - фоновый рисунок повторяется только по горизонтали
repeat-y - фоновый рисунок повторяется только по вертикали
в) background-position: 50% 0; Это задает положение вашей картинки на странице - справа, слева, по центру и тд.
Варианты (в каждой строчке по 3 кода через знак "=", это значит, что они одинаковы, вставлять нужно любой, а не всю строчку! В скобках положение):
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)г) background-attachment:fixed; Этот код значит, что ваш фон завиксирован и двигаться не будет при прокрутке странице.
Если вы не хотите фиксированный фон - просто удалите эту часть.
д) padding:0px padding устанавливает значение полей вокруг содержимого элемента. 0 означает отсутствие отступов.
Генератов кода для фоновой картинки -
жми2. #WRAPPER - это контейнер, в котором и располагается ваш дневник со всеми частями: меню, блок записей, экстратоп, экстработтом. Именно ему задается ширина вашего будущего дневника.
Для фиксированный шинины дизайна код таков:
Разберем по частям:
а) min-width:ЧИСЛОpx !important; Устанавливает минимальную ширину элемента. Если окно браузера достигаетзаданной минимальной ширины элемента, то его ширина остается неизменнойи появляется горизонтальная полоса прокрутки.
ЧИСЛО нужно заменить на ту ширину, которую вы ставите для своего дневника. Обычно это значение и сделующее в коде равны, не стоит изобретать велосипед.
б) width:ЧИСЛОpx; Устанавливает ширину поля для вашего дневника - узкий, широкий - любой, на ваш вкус.
Только имейте в виду, что у многих разрешение экрана 1024 в ширину, поэтому советую ставить не больше 980px.
в) margin:0 auto !important; padding:0 !important; margin устанавливает величину отступа от каждого края элемента, padding устанавливает значение полей вокруг содержимого элемента. Оставляйте эту часть без измений.
3. #SIDE и
#PAGE-C#side - меню в вашем дневнике
#page-c - непосредственно та часть, на которой располагаются ваши записи.
Указывая ширину #wrapper, эти значения по ширине задаются по умолчанию. Но их можно изменить по вашему желанию.
Коды:
Вместо слово "число" вставляете нужную вам ширину. Только помните, что в сумме #page-c и #side должны быть равны ширине #wrapper (т.е если #side у вас 200px, а #page-c в ширину 600, то #wrapper должен быть равен 200+600 = 800)
Вот
здесь находится автоматический генератор ширины основных блоков.
4. #EXTRATOP Это та самая картинка вверху дненника - "шапка".
Код для нее:
По частям:
а) background: url('ССЫЛКА НА КАРТИНКУ'b) См. выше
б) no-repeat См. выше
в) width: ЧИСЛОpx; Это ширина картинки, которую вы вставляете. Это не произвольное значение, нужно писать именно то число, которое указано в свойствах картинки.
г) height: ЧИСЛОpx; Высота картинки. Аналогично ширине.
д) margin-top:0px !important; Этот код нужен, чтобы убрать расстояние между картинкой и верхом страницы. Ее можно регулировать в сторону отрицательного значения (т.е вместо 0px может быть -10px), пока отступ не уберется.
5. #EXTRABOTTOMЭто нижняя картинка, в самом низу дневника. Как extratop, только внизу
Код дня нее:
Расшифровка аналогична пункту 4.
Генератор кодов для экстраблоков -
здесь
) - с чего начать делать дизайн css.