Содержание

• направления
• Ваш сайт
• баннер {}
• баннер {маржа: 0 авто;}
• banner {margin: 0 auto
• Что вам нужно

Создание баннера является ключевой частью веб-дизайна. Многие начинающие дизайнеры используют таблицы для создания баннера и макета сайта. Тем не менее, используя CSS, вы можете установить фон, цвета, размер и границы баннера. Таблицы усложняют управление дизайном с течением времени, в то время как CSS позволяет изменять элементы по мере необходимости. Вам нужны базовые знания HTML, чтобы запустить этот маленький учебник. Хотя существует много способов создания баннера с помощью CSS, в этом уроке мы создадим двухцветный, выровненный по центру баннер, выровненный по правому краю.

направления

Необходимые базовые знания HTML для этого урока (интернет-сайт FX Berlin от Fotolia.com)

1. Откройте файл HTML. После тега BODY добавьте DIV, а затем идентификатор. Назовите тег как «баннер»:

2. Введите текст баннера между тегами DIV, которые вы только что создали:

   Ваш сайт

   Закрыть с меткой H1:

   Ваш сайт

   Это приведет к тому, что ваш текст будет больше размера по умолчанию более чем на четыре пункта.

3. Откройте свой файл CSS. Настройте стиль баннера, набрав:

   баннер {}

   Тег "#banner" расскажет браузерам, ищущим стиль "id =" banner "", поэтому тег называется "banner".

4. Между {} вам нужно будет ввести стили. В CSS есть много стилей. Мы просто собираемся использовать некоторые из них. Сначала мы хотим центрировать баннер на странице:

   
   

   баннер {маржа: 0 авто;}

   Таким образом, баннер централизован на сайте, с автоматическим полем нулевой точки по отношению к верху и низу линии.

5. Добавьте другие стили:

   banner {margin: 0 auto

   Ширина: 780px Высота: 300px Граница: # ff0000 solid 10px Фон: #ffffff Цвет: # ff0000 Размер шрифта: 18px Выравнивание текста: вправо Padding-right: 10px;}

   Ширина и высота определяют размер баннера. Граница представляет собой сплошную линию в 10 пикселей вокруг коробки. Он будет красным, как определено шестнадцатеричным кодом, то есть шестью цифрами и буквами, которые следуют за символом «#». «Фон» установлен на белый цвет. Тег «Цвет» устанавливает цвет текста, который снова становится красным, в соответствии с границей. Тег "font-size" определяет размер текста. «Выравнивание текста» определяет расположение текста - в этом случае было выбрано правильное выравнивание поля. «Padding» создает пространство между содержимым, таким как текст, внутри поля и границы. «Padding-right» установлен, чтобы дать 10 пикселей пространства между текстом и правым краем.

   
   

6. Сохраните файлы.

Что вам нужно

• Текстовый редактор
• сайт
• Выбор цвета