Уроки HTML/CSS. Создание меню для web страницы

Автор Artur Merichev
Уроки HTML/CSS. Создание меню для web страницы

Теперь мы с вами остановились настоящем моменте.

У нас есть наша тетрадь страница у нас есть шапка и у нас есть ты не содержимое наши выпускники то есть яблоко с фотографиями и кнопочки подробнее которые позволяют более подробно почитать про наши вот эти всякие товары теперь нас ещё практической работы вам необходимо будет сделать меню для сайта сделать так чтобы у нас эти кнопки переводили на новой странички в которых будет более подробно рассказано о какой товар вы продаете там цены и так далее и сделать небольшой слайдер после этого нам необходимо оформить мне фото наших в аптечке начнём с вами сменил для этого заходим нас проект открываем файл. Яндекс Вот и здесь находим тот блок где мы оставляли насадку вот называется. Нас Бог с классом backhanded и здесь у нас есть наша название правильно мы не будем оставлять под этим блоком то здесь.

Значит потом начинает формировать наше меню меню принято называть то есть навигация нажимаем табуляцию и будем.

Как раздавать наше меню давайте сделаем его тоже в контейнере. контейнер. Так у нас быстро подключён. То есть у нас она будет. Отмените в одной ячейке после находится контейнер потом s13.ru табуляция и создаю с вами сама колонку. col-md 41212 просто всего 12 колонок у нас будет одна ячейка начиная с колодками табуляцию сделать то, что нам необходимо было сделать. Просто после нашего от этого блока бахер то создать тег навигации и отделом обычно структуру контейнер строка и колонка. Одна здесь мы будем как раздавать наше меню меню у нас будет состоять из двух тел — это ты — это сама в наше меню сам наш список. Вот — это или — это пункта нашего списка для того чтобы воспользуемся сокращениями bootstrap сокращениями эммета пишем понял то есть меню в этом меню у нас будет списке то есть ли в этих списках. Давай, тогда сразу сделаем 5 списков то есть умножить на 55 пункта списка вот здесь у нас будет внутри каждого списка находиться ссылка это, а параметры параметры указываются. Куда ты в скобочках хлев — это путь по которому будет приходить наша ссылка поставь сейчас решетку чтобы ссылка работа, но никогда не было пофигу раскопках записывается текст который будет являться у нас ссылкой на странице. Напиши просто меню сейчас пойду поставлю знак доллара знак доллара мне просто сделать нумерацию 1234 всё. После этого я нажимаю табуляцию и у меня создаётся на моём меню с ссылками сохраняю файл Index HTML заказы на мою страничку обновляю и вот у меня там не получилось теперь меня понимаешь его как-то стилизовать изобретение для того чтобы она была у нас во-первых горизонтальной и добавить фон там расстояние между нашим общим добавить себя различные стили для этого у нас есть файл который называется main.css папе. СМС на 6 ли мы уже здесь стерилизовали на шапку название сайта и ниже будем как раз делать добавки для нашего меню у нас меню эстергом Will или правильно. Значит нам сначала необходимо для тегов ли сделать добавить параметр обтекания для того чтобы у нас было горизонтальное пишем ли есть для всех ты у нас документе stallions скобки и пишу стиле обтекание — это свойство называется флот флот и выбираем. По какому краю лифт то есть теперь у нас будет обтекание по левому краю сохраняем обновляем нашу страничку и у. Насти меня такой друг друга по левому краю теперь нам необходимо настроить на меню. Давайте добавим для него фон и сделаем его высоту до этого самому — это правильно носить ауыл для этого мы сначала например фон добавим background-color нажимаю табуляцию и поставлю в чёрный 3 0 или B 60 можно поставить за решеткой и-30а обновляем мою страничку и ничего не происходит потому, что мы не указали размер tu ES foutu добавлено как принципе высоты у нас нет. Потом он просто как бы полоска вверху которую мы не видим для того чтобы увидеть вот этот фон мы должны задать параметры высоты his например там 50 пикселей создали сохранили обновлён на стрижку вот у нас появилась в наше меню. Тайфун теперь и как принципе можно сделать так чтобы у нас она была как на всю ширину наша вот этого браузера. Мы видим что. Настя меню входит внутрь тега Nav правильно. Вот — это да — это у нас внешний так вот значит, что мы можем мы можем DTV канал прописать тоже свойства и чёрный цвет сохраняю то есть. Так у нас контейнер находится меню вот она как раз за красилась правильно то, что выходит за контейнер. То есть у нас в. Великой А сейчас взяли весит. Так нам просто он выше нашего контейнера. Вот я тоже чёрный цвет теперь сделали. Всё нас работает единственное, что у нас получился какой-то отступ ненужный. То есть она стала пошире до этого, что мы делаем мы для тега понял то есть для нашего меню уберём отступы внешний отступ margin стальной пикселей сохраняем обновляем то есть убрали во столько и всё. И теперь насоса на 50 пикселей. Теперь смотрите мы с вами настроили нашего как применять теперь нам необходимо стерилизовать сами ссылки на меня понимал увеличить расстояние убрать вот эти маркеры сделать чтобы они у нас были по центру правильно расценки — это какой-то, а дочка., а мы пишем свойства. Вот только давайте смотрите у нас в принципе есть ссылки у нас на страничке правильно чтобы на них не влиять мы напишем. А который находится внутри блока на правильно пишем на, а в нём будет находиться у нас тихо то есть для всех такого который находится у нас внутри навигация. Вот и при. Какие свойства пишем. Давайте сразу проверим, что он работает. Давайте Колор. Колор и поставим белый цвет решётка ыффы сохраняем обновляем проверяем цвет поменялся всё. Значит мы неправильно указали вот эту последовательность значит всё будет работать теперь давайте уберём маркеры. Это команда lst list-style-type нажимаем табуляцию и.

0 комментариев
0

Читайте также