Здравствуйте уважаемые читатели, заходя на любой сайт всегда в шапке сайта находится меню или в боковой колонке список с продукцией или услугами.
Выделенные элементы по структуре гипертекстовой разметки можно сказать два одинаковых блока, разница только в названии селекторов и применений стилей. Как правило такие блоки на языке html пишутся списком <ul><li>пункт меню</li></ul>
Это и есть гипертекстовая разметка нашего верхнего меню. Теперь нам надо его преобразовать. Если вы без стилей написали такую разметку то браузер вам просто выведет маркированый список построеным столбиком.
Первым делом пишем стили селектору .up-menu, на скрине видно что верхнее меню (её темно синий фон) идет на всю ширину экрана и наш селектор является родителем блоков которые находятся внутри него. Значит нам надо только покрасить фон свойством background:#333367 ;, в принципе от этого блока нам уже ничего не надо.
Следующий наш селектор .up-option в нем уже находится сам список (будущее меню), тут нам надо определить ширину блока и сделать так чтобы он находился по центру всего контента. Самые простые свойства для этого width: 960px; margin: auto;. Теперь самое интерестное, надо бы призадуматься над тем что наш список выстроить все пункты горизонтально друг за другом и выбрать какими свойствами это сделать. Есть несколько способов; это display:inline-block; / display:grid; / display:flex; и т.д. По мне само удобно при написании статики и адаптации пользаваться flex-box, опять таки прошу обратить внимание что у каждого метода есть свои как и недостатки так и преимущества. Подробно можете вычитать в открытых источниках интернета. Ну не будем отходить от оновной темы, и так у нас остался сам список (<ul><li>пункт меню</li></ul>). Как правило не забываем прописывать правильно адрес нужного нам селектора, будет это выглядеть так .up-option ul и теперь в фигурных скобках пишем свойство и значение. Тег <ul> всегда оставляет внутрение и наружные отступы, поэтому их надо обнулить написав margin: 0; padding: 0; и надо убрать маркер (точка перед каждым пунктом) list-style-type: none; ну и чтобы пункты выстроились друг за другом пишем display:flex;. Тег <li> его можно оставить и без стилей, последнее что осталось отстилизовать тег <a>. Тут тоже надо не ошибиться с написанием адреса селекора, пишем .up-option ul li a и открываем скобки. Убираем у ссылки нижнее подчеркивание text-decoration: none; , красим пункты background: #6666ff; , добавляем внурение отступы padding: 12px 18px 12px 18px; , закругляем углы border-radius: 6px; , делаем шрифт белым цветом color:#ffffff; в завершении добавляем наружний отступ margin: 7px 3px 7px 0px; . Вот в принципе и верхнее меню готово, в списке продукции тоже самое тольклько применена другая цветовая схема, добавлен дополнительный блок с заголовком
И в .up-option ul где мы прописывали свойство display:flex; надо ещё добавить строчку flex-direction:column; , это свойство выстроит пункты колонкой