В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки - замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).
Пример 6.2. Использование
Попытка добавить в стилях фон к тегу ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display , тогда они начнут корректно выводиться (пример 6.3).
Пример 6.3. Шапка сайта
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; }
Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в такой код.
document.createElement("header");
Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).
Пример 6.4. Скрипт для IE
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }
Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.
Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.
Пример 6.5. Скрипт для IE
Все указанные скрипты должны располагаться в коде перед CSS.
Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:
Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.
Пример 6.6. Использование тега
HTML5 IE Cr Op Sa Fx
article Следы невиданных зверей История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.
Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».
Пример 6.7. Использование
HTML5 IE Cr Op Sa Fx
aside document.createElement("aside"); document.createElement("article"); aside { background: #f0f0f0; /* Цвет фона */ padding: 10px; /* Поля */ width: 200px; /* Ширина сайдбара */ float: right; /* Обтекание слева */ } article { margin-right: 240px; /* Отступ справа */ display: block; /* Блочный элемент */ }
Экономьте электричество
Чья палка больше
История о том, как приходилось экономить электричество, какие меры для этого принимались, и куда оно на самом деле уходило.Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).
Пример 6.8. Использование
HTML5 IE Cr Op Sa Fx
figure document.createElement("figure"); document.createElement("figcaption"); figure { background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ display: block; /* Блочный элемент */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ } figcaption { color: #fff; /* Цвет текста */ }
Содержит описание для тега . Тег должен быть первым или последним элементом в группе.
Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).
Пример 6.9. Использование
HTML5 IE Cr Op Sa Fx
footer Персональный сайт Кристины Ветровой Добро пожаловать!
Рада приветствовать вас на своем сайте.
Copyright Кристина ВетроваОпределяет «шапку» сайта или раздела.
Используется для группирования заголовков веб-страницы или раздела (пример 6.10).
Пример 6.10. Использование
HTML5 IE Cr Op Sa Fx
hgroup Кристина Ветрова Персональный сайт
Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .
Пример 6.11. Использование
HTML5 IE Cr Op Sa Fx
nav Чебурашка и крокодил Гена Чебурашка | Гена | Шапокляк | Лариска Добро пожаловать!
Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег внутрь другого.
Пример 6.12. Использование
HTML5 IE Cr Op Sa Fx
section Съёмки фильма Полипропилен
История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.
Хороший языкИстория о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.
Помечает текст внутри тега как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера , либо задаваться через атрибут datetime (пример 6.13).
Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.
Для каждой единицы существует своя заданная форма и ограничения.
Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.
Пример 6.13. Использование
HTML5 IE Cr Op Sa Fx
time
1957-10-04 запущен первый искусственный спутник Земли.
1960-08-19 первый полёт собак в космос.
1961-04-12 первый полёт человека в космос.
1963-06-16 первый полёт женщины-космонавта.
1969-07-21 высадка человека на Луну.
02.12.15 44.1KЗачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1 , h2 …h6 . Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1 —h6 позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?В теги заключается название сайта, заголовки и подзаголовки текста:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги - менее значимые теги... - последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6Название текста Подзаголовок 1 ... Подзаголовок 2 Подзаголовок 3.1 ... Подзаголовок 3_2 Подзаголовок 3
Игнорируя тег h1 , веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом (заголовком страницы ). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между , в то время, когда h1 —h6 указываются в самом «теле » страницы и заключаются в теги .
На странице может присутствовать только один h1 тег. Если указать несколько заголовков с тегом h1 , поисковики могут расценить это как переспам, что в свою очередь грозит баном:
Кроме h1 для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h2 , h3 , h4 , h5 , h6 и т.д.
Тег h2Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.
Теги h3, h4Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar .
Теги h5, h6Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.
Расстановка заголовков h1 — h6 в разных версиях движков может быть реализована по-разному.
Правила расстановки h2 —h6 :
Я главный в иерархии заголовков Мои дети Мои внуки Мои внуки Мои внуки Мои дети Мои внуки Мои внуки Мои внуки Мои правнуки Мои правнуки Мои правнуки
На моих топовых информационных проектах сначала специалист в тематике составляет структуру статьи (заголовки и подзаголовки), а потом уже копирайтеры по ним пишут текст.
Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.
h1 — это главный подзаголовок в статье, который обычно размещен над текстом.
Первый заголовок должен визуально быть больше остальных заголовков на странице.
h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.
Для чего вообще нужны заголовки?Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:
И для закрепления материала чуть послабее видео:
Заголовки призваны в одной фразе или даже слове выделить основную суть, идею последующего текста. Обычно на них человек обращает свое внимание в первую очередь, решая, стоит ли читать остальной материал. Особенно важное значение заголовки имеют в рекламных текстах, письмах, и служат главным инструментом по привлечению внимания целевой аудитории.
В коде тег выглядит так: , где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.
H-теги глазами людейТекст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. Современный пользователь уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та полезная информация, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.
Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.
H-теги глазами поисковиковПоисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.
Иерархия H-теговГлавным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.
Вот так выглядит иерархия с правильной вложенностью:
Что за тег h1Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).
На каждой странице должен быть один и только один тег h1.
В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .
Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.
Почему h1 должен различаться с TitleДовольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:
Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. Последнее время поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.
Требования по длине H1H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.
Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.
Правила для грамотного написания h1Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.
Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.
Психологические приемы для составления привлекательного заголовкаЗаголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:
Вот еще пара «приемов», которые применяются при составлении заголовков.
Решение проблемыПомните, что человек всегда ищет не информацию или товары, а прежде всего – решение своих проблем, потребностей, нужд. Оперируйте именно к предполагаемой проблеме целевой аудитории
Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».
Пример неудачного заголовка: «Можно ли остановить выпадение волос?»
В первом случае мы четко обозначаем проблему и предлагаем конкретное решение. Во втором случае проблема задета косвенно и варианты ее решения размыты.
ЗаинтриговатьПример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».
Пример неудачного заголовка: «Лучший рецепт от выпадения волос».
Предложение, составленное в такой форме, бросает вызов читателю, предлагая ему проверить себя.
Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»
Пример неудачного заголовка: «Все ли вам известно о выпадении волос».
Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в поисковой выдаче. Проверить его отображение можно будет после индексации страницы.
Зачем нужны подзаголовки h2-h6Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.
Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.
h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.
h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.
h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.
Длина всех h-тегов должна быть в пределах 50 символов.
Как правильно прописывать подзаголовки h2-h6Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.
Как заполнять h-теги в WordPressh1 заполняется обычно в поле над текстом в записи:
Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему. Проделать то же самое для каждого из подзаголовков, включая их в нужный формат.
Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подписаться
Хедер сайта – это верхняя часть сайта, по-другому, шапка сайта, важная составляющая веб-ресурса, которая первой бросается в глаза.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Что такое хедер (шапка) сайта на примере нашей жизни? Например, на голове у строителя мы видим каску, а повара – белый колпак. Голову невесты украшает фата, а мусульманку покрывает хеджаб. У короля на голове мы можем увидеть корону. Говорят, что головной убор влияет на поведение, и именно по нему мы можем часто безошибочно определить, что за человек стоит перед нами.
Шапка сайта есть на каждой его странице, причем, она может быть одинаковой на каждой странице, или разной. Если вы применяете разные хедеры на страницах, то помните, что дизайн шапки на внутренней странице должен быть сокращенным вариантом шапки главной страницы. Это правило хорошего тона в дизайне сайтов.
Что следует писать в шапке сайтаКак и для посетителей, также и для поисковика ваш сайт начинается с хедера. Поэтому в шапке располагаются:
Отметим, что элементы хедера, которые обязательно должны присутствовать на каждом сайте, это название и контакты.
Не стоит забыть о презентационной роли хедера, поэтому его дизайн должен привлекать внимание, но не должен отвлекать посетителя от поиска нужной информации. Плохой хедер может оттолкнуть посетителей, и они уйдут на другой сайт, у которого контент может быть хуже вашего.
Почему важно размещать контакты в хедереПоисковая система присваивает каждому сайту определенный регион, один из которых является главным. Прежде всего, она ориентируется на контакты, указанные в шапке сайта. После этого ищет страницу “Контакты”, на которой вы сможете указать дополнительные регионы.
Шапка сайта и правила HTMLДля успешного продвижения сайта необходимо применять несколько правил при разработке хедера.
Если у вас есть готовый брендбук, то все страницы сайта, в том числе хедер, следует оформить в соответствии с ним. Важная задача веб-дизайнера – добиться единого стиля между Хедером, контентным полем и подвалом сайта.
Отдавайте предпочтение позитивным изображениям: люди с улыбками на лице, красивая девушка, природа. Для создания серьезной атмосферы используйте безликие изображения в приглушенной цветовой гамме, обязательно с логотипом.
Предположим, что нам нужен хедер для сайта прачечной. Подберите фото стиральной машинки (нужно сразу показать посетителю, на какой сайт он попал, и что ему могут здесь предложить). Как вариант, можно использовать фото привлекательной девушки, стирающей белье, а также элементы дизайна, вызывающие ощущение чистоты и свежести. Каждое фото должно быть уникальным, или хотя бы уникализированным при помощи графического редактора. Можно создать логотип, к примеру, схематичный стиральный барабан и волну внутри него. Рядом с логотипом указываем название.
Сайт встречают по его шапке, это уникальная визитная карточка. Поэтому при разработке сайта уделите хедеру максимум внимания!
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.
Шапка сайта – какой она бываетПоразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.
Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.
Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.
Как в CSS можно оформить шапку сайта?Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.
Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.
Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:
< header > < / header > |
Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.
header{ width: 100%; background: #D8E3AB; height: 70px; }
header { width : 100 % ; background : #D8E3AB; height : 70px ; |
Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.
Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.
Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.
< div id = "wrap" > < header > < / header > < / div > |
Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.
Рис. 1. Пока это только контейнер, в котором будет все содержимое.
Что обычно содержится в шапке?Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.
Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:
Для этого достаточно дописать некоторые правила к фону:
background: #D8E3AB url(logo.png) no-repeat 5% 50%;
background : #D8E3AB url(logo.png) no-repeat 5% 50%; |
То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.
Добавим в шапку какое-то содержимое. Например, заголовок и меню.
Название сайта
< div class = "title" > Названиесайта< / div > < ul class = "menu" > < li > < a href = "#" > Контакты< / a > < / li > < li > < a href = "#" > Онас< / a > < / li > < li > < a href = "#" > Услуги< / a > < / li > < / ul > |
Теперь все это оформим.
Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }
Title { font - size : 36px ; padding - top : 10px ; text - align : center ; |
