Мобильная версияЯ пробовал множество решений, но безрезультатно.
В основном у меня проблемы:
[*]почему происходит прокрутка (как по горизонтали, так и по вертикали). он должен просто соответствовать размеру окна просмотра. я использую height:100vh. я тоже использовал тег meta. [*]почему background-size:cover не работает, а также обеспечивает прокрутку в вертикальном представлении рабочего стола. [*]по крайней мере, текст вообще не надо было обрезать. почему так? [*]Элемент списка
Вид на рабочем столе:
мобильный вид:
*{ маржа: 0; заполнение: 0; семейство шрифтов: «Поппинс», без засечек; } #banner{ фон: линейный градиент (rgba(0,0,0,0.5), #009688), url(Barber_Shop_img/banner.jpg); размер фона: обложка; фоновая позиция: центр; высота: 100вх; } .logo{ ширина: 140 пикселей; позиция: абсолютная; верх: 4%; слева: 10%; } .banner-текст { выравнивание текста: по центру; отступ: 180 пикселей; белый цвет; } .banner-text h1{ размер шрифта: 130 пикселей; семейство шрифтов: «Kaushan Script», курсив; } .banner-text p{ размер шрифта: 20 пикселей; стиль шрифта: курсив; } .banner-btn{ поле: 70 пикселей авто 0; } /* Целью руководства является создание кнопок с использованием тега привязки, а при наведении курсора мыши цвет фона становится белым, а цвет текста — черным */ /* объясним относительную и абсолютную позицию в этом контексте */ /* поясняем z-индекс для -1 и 1 в этом коде */ /* объясним переход: цвет 0,5 секунды в этом коде. потому что код работает так же без написания слова «цвет» */ .banner-btn а{ белый цвет; граница: 0,5 пикселя, сплошная #fff; отступ: 12 пикселей 0; поле: 0 10 пикселей; отображение: встроенный блок; текстовое оформление: нет; ширина: 150 пикселей; положение: относительное; z-индекс: 1; переход: цвет 0,5 с; } Дизайн веб-сайта магазина Barbar – простые уроки
Парикмахерская Украсьте волосы, чтобы подчеркнуть свою индивидуальность
Узнайте Подробнее
