День второй: стиль и фон
Дата: 28.05.2011 г.
Сегодня мы сделаем два простых действия: выберем стиль и установим фон.
В ином случае страница предложит вам сменить систему стилей, тогда перейдите на S2.
Теперь можете погружаться в пучину экспериментов : )
Если вы давно мечтали разобраться в каталоге стилей, сейчас самый подходящий момент.
Жирным шрифтом - индивидуальное название дизайна.
Если на странице каталога ввести его в поле поиска, вы попадёте прямо на нужный дизайн.
Запомните что вы установили и перейдём ко второй части урока: вставляем фоновую картинку.
Это одно из самых простых действий в настройке дизайна.
Во-первых, во многих стилях фон можно задать в настройках:
- 3 Column
- A Novel Conundrum
- Classic
- Clean and Simple
- Component
- Digital Multiplex (OSWD)
- Disjointed
- Flexible Squares
- Generator
- Gradient Strip
- Haven
- Magazine
- Nebula
- Notepad
- Quite Lickable
- Punquin Elegant
- Refried Paper
- Smooth Sailing
- Tabular Indent
- The Boxer
- Unearthed
- Variable Flow
Если ваш стиль есть в списке, поищите в настройках вкладку Images.
Если нет, фон можно вставить с помощью кода:
body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}
Важно!Картинка должна находится в интернете, а не у вас на компе.
Теперь рассмотрим параметры управления фоном:
background-color: #fff; - задаёт цвет фона, в данном случае - белый.
background-position: top; - расположение фона
background-attachment: scroll; - прокрутка фона.
scroll - фон ездит вместе со страницей.
fixed - стоит на месте.
Код рассмотрен под микроскопом, можно начинать экспериментировать. Скопируйте код
body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}
вставьте его во
В ином случае страница предложит вам сменить систему стилей, тогда перейдите на S2.
Внимание:если вам нравится стиль, который у вас сейчас, перед началом экспериментов запишите что у вас сейчас установлено. Это указано в верхнем правом углу страницы настроек:
Можете сделать скриншот или записать где-нибудь название стиля, чтобы потом иметь возможность к нему вернуться.
Если используете какие-то коды во вкладке Css - сохраните их в файл
Можете сделать скриншот или записать где-нибудь название стиля, чтобы потом иметь возможность к нему вернуться.
Если используете какие-то коды во вкладке Css - сохраните их в файл
Теперь можете погружаться в пучину экспериментов : )
Если вы давно мечтали разобраться в каталоге стилей, сейчас самый подходящий момент.
Жирным шрифтом - индивидуальное название дизайна.
Если на странице каталога ввести его в поле поиска, вы попадёте прямо на нужный дизайн.
Запомните что вы установили и перейдём ко второй части урока: вставляем фоновую картинку.
Это одно из самых простых действий в настройке дизайна.
Во-первых, во многих стилях фон можно задать в настройках:
- 3 Column
- A Novel Conundrum
- Classic
- Clean and Simple
- Component
- Digital Multiplex (OSWD)
- Disjointed
- Flexible Squares
- Generator
- Gradient Strip
- Haven
- Magazine
- Nebula
- Notepad
- Quite Lickable
- Punquin Elegant
- Refried Paper
- Smooth Sailing
- Tabular Indent
- The Boxer
- Unearthed
- Variable Flow
Если ваш стиль есть в списке, поищите в настройках вкладку Images.
Если нет, фон можно вставить с помощью кода:
body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}
Важно!Картинка должна находится в интернете, а не у вас на компе.
Теперь рассмотрим параметры управления фоном:
background-color: #fff; - задаёт цвет фона, в данном случае - белый.
Цвет можно записать по-разному:
- по названию: white, red, green, yellow
- полным кодом: #FFFFFF, #FF9900, #000000, #FF0000, #98F563
- коротким кодом, если все 6 букв название одинаковые: #FFF, #000, #999, #222, #DDD
Перед названием цвета (white, red) решётка не ставится
Код можно писать прописными и строчными: #FFFFFF = #ffffff
- по названию: white, red, green, yellow
- полным кодом: #FFFFFF, #FF9900, #000000, #FF0000, #98F563
- коротким кодом, если все 6 букв название одинаковые: #FFF, #000, #999, #222, #DDD
Перед названием цвета (white, red) решётка не ставится
Код можно писать прописными и строчными: #FFFFFF = #ffffff
background-position: top; - расположение фона
background-attachment: scroll; - прокрутка фона.
scroll - фон ездит вместе со страницей.
fixed - стоит на месте.
Код рассмотрен под микроскопом, можно начинать экспериментировать. Скопируйте код
body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: center top;
background-attachment: scroll;
}
вставьте его во
Просмотров 103
Добавить в закладки:
| « День десятый: хозяйке на заметку | evilnol6 @ 2011-04-05T21:07:00 » |
|---|
