Как легко создать панель навигации Mashable с помощью HTML и CSS

1656677185 kak legko sozdat panel navigaczii mashable s pomoshhyu html i

от Codesmith

Когда вы посещаете wecodejs.com, вы можете подумать: «Мужская панель навигации. Какая большая красивая панель навигации. Это победа».

А потом вы переходите к своему редактору кода и, кажется, не можете получить сгусток HTML-элементов, чтобы он напоминал большую красивую панель навигации.

Вы думаете, что написание CSS – это все равно что получить корневой канал. Черт может быть магией.

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

Элемент, ты что?

Первое, что нам нужно избавиться, это мнение, что все, что делает CSS, это украшает вещи. Это неправильный путь к работе над проектом CSS, поскольку он отвлекает вас от того, для чего используется CSS. На самом базовом уровне мы используем CSS для организации элементов на веб-странице.

Что такое элемент? Вот как MDN определяет элемент HTML:

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

Мерзость. Это нам не очень поможет. Определение W3Schools более простое: «Все элементы HTML можно рассматривать как коробки».

Это удивительно! Нет, всерьез это нельзя подчеркнуть. Очень просто обойти это утверждение при изучении CSS. Если мы можем представить, что каждый элемент HTML, который мы создаем, является новым блоком, мы сможем лучше понять роль CSS в упорядочении этих блоков.

Вдруг «коробочная модель» имеет смысл. Я уверен, что вы видели это раньше.

43HeLouo7GKAT8qwQHK04-tAf25aVZZ0cpft
w3schools

Свойства padding, border и margin – все они помогают придать форму нашим коробкам. Мы используем отступ, чтобы создать визуальный образ коробки, рамку, чтобы оградить ее периметр и поля, чтобы отделить ее от других коробок.

Теперь как это касается нашей головоломки панели навигации? Давайте начнем кодировать, чтобы узнать. Мы собираемся воспроизвести навигационную панель Mashable без раскрывающегося меню и значков социальных сетей (это для другого учебника). Обязательно кодируйте, поскольку это самый лучший способ научиться.

qU4ZygWrljDt44qqdJQtCN6fxE7SoQ13kA-d
Посмотрите на все эти четырехугольники! Прокомментируйте количество ящиков на этой странице

План, план

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

HTML:

  1. Создайте элемент навигации, содержащий все элементы вкладки
  2. Создание элементов вкладки
  3. Идентификатор верхней вкладки в качестве логотипа

CSS:

  1. Установите цвет навигации на синий оттенок.
  2. Установите для поля вкладки более светлый оттенок синего
  3. Установите шрифты в полях вкладок без засечек и покрасьте их в белый цвет
  4. Установите свойства шрифта и поля логотипа.

Повесть о двух навигационных панели

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

TbdCFWwj9opFZ24sZKmL4Vv01rDO62bnSva6

выход:

WWBFowjXamo4ehCQB1AJTY61KS9mjMBPJpCD

Если вы только начинаете работать с CSS, это может выглядеть как постоянная точка. Мы даже не добавили ссылку, а это значит, что мы должны вкладывать элементы.

Вот более простой подход к созданию навигационной панели с сохранением семантики разметки:

SrrLbBisu3vB9tw-XWEyKJ7H9mfot8IdrKQJ
7y6SIBwgWUszE1MONTPH9mICAgBahIMJPeDc
У нас все хорошо устроено благодаря ведущим!

Как видите, мы взломали панель навигации только с помощью HTML. Теперь все, что нам нужно сделать, это реализовать модель коробки, чтобы разместить их. Давайте используем второй шаблон HTML для создания навигационной панели Mashable, а затем расскажем, как ее правильно стилизовать.

e8JSOBDcujnMPrbqiXGdapUCleJlHgsI3iCb
Обратите внимание, как мы используем идентификатор для различия логотипа.

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 {  }
d9WAQfv3BpbUea3QM2oHYkNU8HNs-OFl21FU

У нас есть навигационная панель! Далее начнём создавать коробки, которые можно перемещать. Мы можем сделать это, отображая элементы как блоки.

nav {  width: 100%;  background-color: #0b98de;
}  nav a {    display: block;     
 }  nav a:hover {  }  #logo {  }
cAVvhInyvKOpxuU0w91q6NQ1TW1cM2YxAwn2

Кажется, мы сломали нашу хорошую навигацию. Нам не обязательно это делать, но выравнивать наши элементы гораздо легче, когда мы можем рассматривать каждый элемент как блок. Чтобы исправить это, мы просто пишем, 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;
} 
zoH3wjdFq9lviMOyd2l1uVf1Xc1iUgTzXFSV

Ширина разная, но это соответствует случайному стилю Mashable. Вы всегда можете установить ширину, если вам нужна последовательность. Мы также скорректировали шрифт здесь для четкого вида. Вы можете получить отличные шрифты от Google. Обязательно вставьте тег ссылки, которую они предоставляют, в ваш <head> тег.

Мы удалим наш недостаток и переместим background-color имущество до nav a:hover селектор. Вы всегда можете оставить гандикап включенным, если вам нужно внести изменения.

hKBcQLcBv51lBUEO9oerqzfNu85Xorcw0o92
Это довольно хороший цвет наведения

Мы почти кончили. Поработаем над логотипом.

#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 селектор. Это маленькое свойство избавляет от многих разочарований.

Конечный продукт

dsXj8YNdod6jU8j65L57JLqaJ9XMwoyY3zAK
WVOpcy5MGUaAWivhguhcGOOJRGv4iPtW2Fxf

Заключительные слова

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

Конечно, есть уловки, которые используют мастера CSS, чтобы добавить еще немного стиля. Ниже мы приведем целый ряд ресурсов, которые мгновенно сделают вас профессионалом CSS. Если вас все еще раздражает CSS, то вам следует посмотреть на некоторые из предыдущих процессоров, разработанных для более эффективного оформления всего сайта.

Ресурсы:

Трюки CSS

Просматривая этот сайт, вы узнаете, как создать все, о чем только можете мечтать.

Thecodeplayer

Thecodeplayer предлагает живую кодировку, чтобы помочь вам понять нюансы CSS.

Калькулятор цветов

Получите точное значение цвета фона.

Не забудьте похлопать, если это руководство помогло. Поделитесь им с друзьями, возглавляющими рабочий стол, когда спорят с CSS.

Код в мире,

Раджи Айинла|интерн-автор технического контента|электронный адрес: rajiayinla858@gmail.com

VJ3NN-YikvPkHZjQrkTWTRfJO9nctolN0gT4
Иконки, разработанные Freepik от www.flaticon.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *