Содержание статьи
от Codesmith
Когда вы посещаете wecodejs.com, вы можете подумать: «Мужская панель навигации. Какая большая красивая панель навигации. Это победа».
А потом вы переходите к своему редактору кода и, кажется, не можете получить сгусток HTML-элементов, чтобы он напоминал большую красивую панель навигации.
Вы думаете, что написание CSS – это все равно что получить корневой канал. Черт может быть магией.
Ну это не магия. Вы можете легко стилизовать панель навигации или любой другой веб-компонент. Все, что вам нужно сделать, это изменить способ просмотра CSS.
Элемент, ты что?
Первое, что нам нужно избавиться, это мнение, что все, что делает CSS, это украшает вещи. Это неправильный путь к работе над проектом CSS, поскольку он отвлекает вас от того, для чего используется CSS. На самом базовом уровне мы используем CSS для организации элементов на веб-странице.
Что такое элемент? Вот как MDN определяет элемент HTML:
Ан элемент является частью веб-страницы. В XML и HTML элемент может содержать элемент данных, фрагмент текста или изображения или, возможно, ничего. Типичный элемент включает в себя открывающий тег с некоторыми атрибутами, вложенное текстовое содержимое и закрывающий тег.
Мерзость. Это нам не очень поможет. Определение W3Schools более простое: «Все элементы HTML можно рассматривать как коробки».
Это удивительно! Нет, всерьез это нельзя подчеркнуть. Очень просто обойти это утверждение при изучении CSS. Если мы можем представить, что каждый элемент HTML, который мы создаем, является новым блоком, мы сможем лучше понять роль CSS в упорядочении этих блоков.
Вдруг «коробочная модель» имеет смысл. Я уверен, что вы видели это раньше.
Свойства padding, border и margin – все они помогают придать форму нашим коробкам. Мы используем отступ, чтобы создать визуальный образ коробки, рамку, чтобы оградить ее периметр и поля, чтобы отделить ее от других коробок.
Теперь как это касается нашей головоломки панели навигации? Давайте начнем кодировать, чтобы узнать. Мы собираемся воспроизвести навигационную панель Mashable без раскрывающегося меню и значков социальных сетей (это для другого учебника). Обязательно кодируйте, поскольку это самый лучший способ научиться.
План, план
Начало проекта по контрольному списку помогает нам писать организованный код. Обычно мы устанавливаем каркас, но у нас есть модель для работы.
HTML:
- Создайте элемент навигации, содержащий все элементы вкладки
- Создание элементов вкладки
- Идентификатор верхней вкладки в качестве логотипа
CSS:
- Установите цвет навигации на синий оттенок.
- Установите для поля вкладки более светлый оттенок синего
- Установите шрифты в полях вкладок без засечек и покрасьте их в белый цвет
- Установите свойства шрифта и поля логотипа.
Повесть о двух навигационных панели
Кажется, мы готовы к кодированию, но подождите! Помните, когда мы раньше упоминали блок HTML? Что ж, вы хотите подумать об элементах, которые хотите использовать для создания панели навигации. Один из способов записи в HTML – создать неупорядоченный список:
выход:
Если вы только начинаете работать с CSS, это может выглядеть как постоянная точка. Мы даже не добавили ссылку, а это значит, что мы должны вкладывать элементы.
Вот более простой подход к созданию навигационной панели с сохранением семантики разметки:
Как видите, мы взломали панель навигации только с помощью HTML. Теперь все, что нам нужно сделать, это реализовать модель коробки, чтобы разместить их. Давайте используем второй шаблон HTML для создания навигационной панели Mashable, а затем расскажем, как ее правильно стилизовать.
CSS в помощь
Теперь давайте организуем эти коробки с помощью CSS. Мы перечислим все селекторы, которые нам понадобятся для этой задачи.
/* we'll target the entire nav */nav {}/*we'll target a specific tab*/ nav a { }/*we're going to use a css pseudo-class to change the background color when we hover over a tab */ nav a:hover { }/*we're going to target the logo for some specific styles 'cause the logo is super special*/ #logo { }Первое, с чего мы должны начать, это установить ширину и высоту нашей навигации и добавить немного цвета. Великолепный ресурс для цветного круга находится прямо здесь.
nav { width: 100%; //width should be a percentage for responsiveness height: 38px; //height should be px. Adjust to your liking background-color: #0b98de;//hex color code should be used} nav a { } nav a:hover { } #logo { }
У нас есть навигационная панель! Далее начнём создавать коробки, которые можно перемещать. Мы можем сделать это, отображая элементы как блоки.
nav { width: 100%; background-color: #0b98de;} nav a { display: block; } nav a:hover { } #logo { }
Кажется, мы сломали нашу хорошую навигацию. Нам не обязательно это делать, но выравнивать наши элементы гораздо легче, когда мы можем рассматривать каждый элемент как блок. Чтобы исправить это, мы просто пишем, float: left;. Это вернет нас на круги своя.
Примечание: этот шаг можно пропустить, но Если вы используете неупорядоченный список, его нужно реализовать.
Теперь давайте создадим коробки. Если вы взглянете на модель коробки, вы заметите, что заполнение создает эти коробки. Если вы хотите увидеть, как это работает, и проверить размер своих ящиков, установите a background-color и border: в пределах nav a селектор.
nav a { display: block; float: left;/*We're just setting up fonts settings here*/ font-family: sans-serif; font-size: 9px; color: white;/*Box Method Test AKA handicap*/ background-color: #17b0cf; border: 1px solid #000; /*Padding Our Box*/ padding-top: 20px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;/Let's remove the dumb link decoration*/ text-decoration: none;} 
Ширина разная, но это соответствует случайному стилю Mashable. Вы всегда можете установить ширину, если вам нужна последовательность. Мы также скорректировали шрифт здесь для четкого вида. Вы можете получить отличные шрифты от Google. Обязательно вставьте тег ссылки, которую они предоставляют, в ваш <head> тег.
Мы удалим наш недостаток и переместим background-color имущество до nav a:hover селектор. Вы всегда можете оставить гандикап включенным, если вам нужно внести изменения.
Мы почти кончили. Поработаем над логотипом.
#logo { /*font*/ font-family: 'Hind', sans-serif; font-size: 30px; letter-spacing: -2px; text-shadow: 1px 1px 2px #c4c4c4;/*box*/ padding-left: 20px; padding-right: 40px; margin-right: 10px; margin-top: -20px; }Возможно, вы уже заметили, что ваши мягкие коробки выходят за пределы навигации. Все, что вам нужно сделать, это скрыть перелив, добавив overflow: hidden; твоему nav селектор. Это маленькое свойство избавляет от многих разочарований.
Конечный продукт
Заключительные слова
CSS может показаться языком, полным магии, особенно если вы привыкли к логике языков программирования. Но все, что вам нужно сделать, это помнить о коробочном методе при создании макета сайта.
Конечно, есть уловки, которые используют мастера CSS, чтобы добавить еще немного стиля. Ниже мы приведем целый ряд ресурсов, которые мгновенно сделают вас профессионалом CSS. Если вас все еще раздражает CSS, то вам следует посмотреть на некоторые из предыдущих процессоров, разработанных для более эффективного оформления всего сайта.
Ресурсы:
Трюки CSS
Просматривая этот сайт, вы узнаете, как создать все, о чем только можете мечтать.
Thecodeplayer
Thecodeplayer предлагает живую кодировку, чтобы помочь вам понять нюансы CSS.
Калькулятор цветов
Получите точное значение цвета фона.
Не забудьте похлопать, если это руководство помогло. Поделитесь им с друзьями, возглавляющими рабочий стол, когда спорят с CSS.
Код в мире,
Раджи Айинла|интерн-автор технического контента|электронный адрес: rajiayinla858@gmail.com
