Битрикс. Создание сайта услуг от А до Я. Часть 21. Верстка. Кнопка поиска. Проверка адаптивности

Автор Zhanna Belchenko
Битрикс. Создание сайта услуг от А до Я. Часть 21. Верстка. Кнопка поиска.  Проверка адаптивности

Всем привет мы продолжаем.

Наш курс по созданию сайта услуг — это отдаем мы продолжаем верстать наша была хорошо так продолжаем меню. У нас есть, а нам надо меня точно также сместить видеть она у нас прижаты к верхнему краю. Смотрится не совсем для этого мы как раз и сделали нашу блок меню давайте я с ним как раз его и будем редактировать так ещё мы быстренько скачаем template Style потому, что потому, что у меня, а я случайно параметр отвечающий за Logo вспомнить Morgen которую мы прописывали прописывали так здесь так тут панель меню соответствующий блок у нас с вами пропал Border и background.

Давайте ещё раз пробежка так Right Border Bottom точнее 150.

Салют цвет красный и background-color rgba. МТС Планшет рассматривали белый цвет 0.9 хорошо. Так теперь у нас идёт блок Logan мы поставим морге. Как написать 15 пикселей 015 пикселей 0 и теперь мы можем ещё прописать блок меню у него в принципе. Также можно поставить отступы. Давайте посмотрим мои загрузим целиком наш исправлено Site template явно не бойся вот у нас уже менюшка срабатывает блоки. Наши все. Остались на нужных местах. Так теперь давайте перейдем к блоку. Согласно где поиск сделаем наш кнопку поиска для этого мы сначала сюда создадим блок который так и будет называться Search поиск внутреннего мы поставим наш фондовые. Давайте отсюда скопирован самозапись. И найдём font-awesome подходящее для нас, а — это если мы проведём правильно помню. Всё пока вот он мы его скопирую наш шаблон. Вот так и. Давайте про, что мы должны подписать так и они будут на одном уровне. Поэтому если есть пришли всё, что нам нужно нам нужно сделать. Во первых неудач красным цветом поэтому я бордюр Pixel солер красный дали нам нужно будет сделать высоту и ширину чтобы мы могли правильно тоже закруглить допустим нас там по 30 пикселей пойдёт согласна с дизайном. Давайте border-radius чтобы у нас. Круг Был тоже 30 пикселей рука теперь для самого font-weight смотри мы должны указать цвет красный и. Давайте в каждом фан-сайт как у нас везде для font-awesome 18 пикселей так сохраним наш обломщик IO. Давайте посмотрим, что у нас получилось так font-awesome есть нам надо будет снова сместить на 15 вверх-вниз давайте так и пропишем катером чтобы время не трать. Давайте обновим сётокан понятно пока свернем изображение тоже мы пока свернем. Так template мы обновим и посмотрим так пациент. Теперь давайте подбирать параметры для того чтобы у нас глупо было пациент мы пропишем как. Давайте padding-left посмотрим сколько там пикселей 456 вот так тоже самое padding. Давайте топ пропишем сколько там нужно пиксели и пойдём кто так 4 пикселя давайте так пропишем вот так должно быть 406 Pixel обновляемся так так хорошо, но у нас — это должно быть кликабельная поэтому предлагаю обернуть полностью весь блок в ссылку на страницу Search поиск и соответственно надо немножко сейчас будет изменить оформление мы пропишем спасайся мы можем просто не указывать как обычно всё хавает и так далее мы можем. Вот — это всё заменить символ амперсанд чтобы не писать не давайте укажи. Пускай бордюр у меня остается таким же в один пиксель арт цвет background мы сделаем так чтобы у нас он был, а теперь непрозрачно по белому свету чтобы он у нас отменял и соответственно все остальные размеры мы можем точно также давай так и поступим просто возьмём и скопирован так и ещё раз мы меняем. Ну в принципе фондовые нам нет смысла проект. Давайте обновим и посмотрим, что у нас получилось при наведении нассано выделяется белым цветом. А теперь давайте посмотрим как будет выглядеть на разных размеров экрана пойдём. Так — это у нас размер MD нам надо всё-таки прописать отступ чтобы у нас полагать. ИП сменил друг на друга не наезжала. Так пропишем col-md-offset единица. Давайте остановимся оплот. ТВ так вот чтобы хорошо давайте меньше размер экрана. Так на меньших размерах экрана нам надо так — это вообще уехала у нас мы, тогда пропишем следующее. Пускай логотип будет по центру у меня будет под ним давайте вы так и сделаем так на. СМ будет шестёрка, но мы поставим ещё остров небольшое чтобы он тоже стал по центру остров мы сделаем в три колонки, тогда мы здесь сможем менюшку сделать на 10 она уйдёт вниз, а поиск мы добавим как будет ещё две колонки на размере см, а что уже поинтереснее. предлагаю вам нам ещё найти. Что сделать. Давайте попробуем чтобы он в зависимости от размеров тоже увеличился вы конечно растягиваться от растягивания только хуже такая если мы немножко поиграемся сделаем пускай будет 5 от 4 вот так как можно по центру похоже давайте так и поставил так вот 104 размер 5 обновим так и минимальный размер меню у нас уедет. Так и должно быть меня у нас соответствующая ATI ещё сделать поиск. Так пускай поиск, тогда будет логотип будет не 12v T10, а поиск xss поставил 2 на размер по телефону. Давайте посмотрим так режим правки мы уберем менюшку сделаем меньшего диапазона так например в 9:00 здесь будет так 4 много 1 WoT. То есть у нас будет соответственно располагаться скажем так по центру давайте так оставим 912 в 9:00 12 так и нам надо теперь убрать отступы. Как видите. Так давайте сразу пропишем у нас получается у нас. СНТ сад 164. А нам надо будет прописать col-md-offset. Давайте 0 потому, что по идее он дал убрать полностью наш отступ да так и есть единственное, что ещё. Давайте здесь на md мы прописывали попробуем увеличить м-да будет всё-таки не 2 ao3.

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

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