# 3 Проектирование с помощью CSS

Укладка элементов

Выберите элемент и добавить класс в правильном стиле панели (Brush значок). В этой панели вы можете добавить текст и графические стили, такие как цвет шрифта, высоту строки, градиентов, границ, теней и многое другое. Визуальный дизайн веб намного больше удовольствия, чем кодирование не так ли?

Кнопка пример дизайн

Добавить в корзину ➜

Стиль его самостоятельно

Кнопка Текст ➜

СОВЕТ:  Эта кнопка уже есть класс "Button" с некоторых основных стилей. Выберите кнопку и попробуйте добавить градиент, границы, закругленные углы, внутренние / внешние тени, наведите государственные стили, а также переход в стилях наведении - все с помощью панели в стиле.

То, что вы создали

Кнопка Текст ➜

применить класс «кнопка»

Кнопка Text

СОВЕТ:  В веб-дизайне можно применить класс многих элементов, чтобы они выглядели одинаково. Применить класс "Button", что вы оформлением ссылке выше, нажав на [+] в верхней стиля панели и введите "Кнопка", чтобы найти этот класс. 

Пример формы для дизайна

Имя:Адрес Электронной Почты:

Спасибо!

Ваше рок мои носки!

Ой! Что-то пошло не так при отправке формы :(

Стиль его самостоятельно

Имя:Адрес Электронной Почты:

Спасибо! Ваше представление было получено!

Ой! Что-то пошло не так при отправке формы :(

СОВЕТ:  Сначала создайте классы для текстовых полей и кнопки (применить тот же класс обоих полях). Затем измените стили границ, цвет фона, а также добавить стили для висения и прессованных государств. Не забудьте для элемента формы, найденный в панели настроек (Gear Icon в верхнем правом углу) стиль состояние "успех". 

Пример Типография

Lakewood Stout

Темное пиво Лейквуда, Колорадо

Легендарный толстый родилась из красивой брака горного человека и его самых любимых вещи, города Лейквуд в штате Колорадо. Горный человек любил свой топор и его однократного Ремингтона, но не так сильно, как любил свой город. Он мечтал о ее лёгкой струящейся реки и величественные горы. Так он назвал свою самую большую толстый после нее. Таким образом, славный толстый был рожден из сердца горы человека.

"Я вписываться этот славный пиво, чтобы выразить мою бессмертную любовь моей прекрасном городе."

- Горный Человек

Стиль его самостоятельно

Lakewood Stout

Темное пиво Лейквуда, Колорадо

Легендарный толстый родилась из красивой брака горного человека и его самых любимых вещи, города Лейквуд в штате Колорадо. Горный человек любил свой топор и его однократного Ремингтона, но не так сильно, как любил свой город. Он мечтал о ее лёгкой струящейся реки и величественные горы. Так он назвал свою самую большую толстый после нее. Таким образом, славный толстый был рожден из сердца горы человека.

"Я вписываться этот славный пиво, чтобы выразить мою бессмертную любовь моей прекрасном городе."

- Горный Человек

СОВЕТ:  Идите вперед и добавлять пользовательские типографики и стили, чтобы на заднем плане. Прохладный совет: Если вы добавляете стили типографии к родительскому блоку, то все его дети текстовых элементов будет наследовать эти стили текста. В CSS это поведение называется "каскадные". 

# 4 Схема с CSS

Создание веб-макеты с помощью CSS

Как добавлять стиль к элементу, чтобы изменить положение элемента сначала добавить класс, а затем отредактировать свойства позиции. Вы узнаете о отрывом, обивка, дисплей, Float, переполнение, а также позиции. 

Маржа и Обивка пример

Главные новости

Федеральные агенты Raid Gunshop, найти оружие

Владелец магазина Стив Witmere ранее арестован за blackmarket базуки торговли. Признался, к участию в русской мафии.

Среди многочисленных базуки, найденных в gunshop были десятки тысяч незаконно полученных картин на сумму не менее $ 10000. То высокую цену, чтобы заплатить за эти немые картины.

Описание:  Маржа и обивка может быть найден в положении палитры стилей панели. Добавление маржа будет добавить пространства за пределами блока, и добавление Заполнение будет добавить пространства внутри блока.

Добавить интервал себя

Главные новости

Федеральные агенты Raid Gunshop, найти оружие

Владелец магазина Стив Witmere ранее арестован за blackmarket базуки торговли. Признался, к участию в русской мафии.

Среди многочисленных базуки, найденных в gunshop были десятки тысяч незаконно полученных картин на сумму не менее $ 10000. То высокую цену, чтобы заплатить за эти немые картины.

СОВЕТ:  Начните с добавления обивка на всех сторонах основного серого блока (родительский элемент). Затем добавить нижнее поле, чтобы добавить интервал между отдельными текстовых элементов (дочерних элементов). Подсказка: Удерживайте SHIFT при использовании контроля маржа / дополнения применяются ко всем сторонам и ALT также применяются к противоположной стороне.

"Показать: Блок" примеры

В данную товарную позицию настроен на отображение: блок

Этот пункт установлен на Дисплей: Блок. Так он заполняет ширину родительского окна и стеки поверх других блоков. 

Кнопка с дисплеем: Блок кнопок с дисплеем: Блок Эта ссылка настроен на отображение: Блок Эта ссылка устанавливается на дисплей: блок

Описание:  Установка Настройки дисплея элементы "в блоке сделает их укладывают друг на друга и заполнить 100% ширины родительского блока. Большинство элементов на самом деле есть этот параметр по умолчанию. 

Сделать их "Дисплей: Блок" сами

Это кнопка Эта кнопка с ссылки являются Дисплей: Встроенный по умолчанию ссылки Дисплей: Встроенный по умолчанию

СОВЕТ:  Выберите эти элементы (некоторые Inline Block и некоторые из них в строке) и сделать их Дисплей: блок так, чтобы они складывают друг на друга. 

"Дисплей: встроенный блок" пример

Скачать Редактировать Удалить

Описание:  Установка Настройки дисплея элементы ", чтобы встроенный блок сделает ширина блока соответствует ширине содержимого внутри него. Это означает, что, если их содержание является достаточно небольшим, они могут укладывают рядом друг с другом. Вы можете копировать вставить кнопки выше и редактировать текст внутрь, чтобы увидеть, как это работает.

сделать их встроенный блок самостоятельно

Скачать

СОВЕТ:  Выберите вышеуказанные элементы и сделать их Дисплей: встроенный блок так они складывают рядом друг с другом. Вы увидите, что изображения стек рядом с кнопками. Совет: Удаление кнопки и изображения на отдельные Div блоков сделает их укладывают друг на друга (потому что Div Блоки Дисплей: Блок по умолчанию).

Поплавок пример

Новостная рассылка

Спасибо! Ваше представление было получено!

Ой! Что-то пошло не так при отправке формы :(

Описание:  Установка Дисплей: встроенный блок или плавающей (это пример) являются наиболее распространенными способами стек боковых элементов друг с другом. В этом примере я покажу вам, как плавать-то. 

Float сами

Новостная рассылка

Спасибо! Ваше представление было получено!

Ой! Что-то пошло не так при отправке формы :(

СОВЕТ:  Сначала выберите текстовое поле, сделать его Float: слева и дать ему ширину в процентах (например: 60%). Затем установите кнопку Float: слева, а также и установить другой процентное значение ширины (например: 40%), так они оба добавить до 100%. Это ручной способ, чтобы заставить любой элемент укладывать бок о бок. 

Абсолютное положение Пример

Моя Кубок Джо

Это текст подпись к фотографии.

Рекомендуемые

Описание:  Если вы установите положение к абсолютному на элементе, вы сможете расположить его в любом месте внутри его родительского блока. Чтобы выбрать, какой родитель в положение внутри, установленным положением родительский элемент для относительной. Примечание: Если элементы являются абсолютными расположены они плавают выше других элементов.

Стиль It Yourself

Моя Кубок Джо

Это фото Подпись к моей любимой чашки Джо.

СОВЕТ:  Сначала выберите изображения Wrapper элемент и установить свою позицию Относительное. Затем выберите заголовок, перетащите его в набор изображений, это положение к абсолютному и выберите 7-й предустановки. Чтобы разместить Рекомендуемые значок в нужное место выбрать 2-й предустановки и вручную позиционировать его.

Рекомендуемые