21. Создание сайта с помощью фреймворка. Заполнение дыр фреймворка

Автор Lyubov Stishevskaya
21. Создание сайта с помощью фреймворка. Заполнение дыр фреймворка

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

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

И мне не нужен вот этот лейбл.

Серп символ принимает. Я не хочу чтобы он отображался он нужен только для доступности поэтому сначала мне нужна и — это от него, а затем убедиться, что поле ввода текста и кнопка отправки поисковой формы отображаются в один следом за другим они располагаются вертикально друг над другом как сейчас очень часто. Это означает, что вам нужно будет капнуть в код самого фреймворка и посмотреть как и, что устроена. И если мы идём к файлу Foundation CSS его можно найти в папке подчеркивание CSS в папке 0407 давайте я про кручу вниз и сразу покажу вам то место потому, что она находится внизу у вас поиск займет некоторое время как занял у меня, но если я перейду к строке 2818 у вас может быть немного другая потому, что я применял исходное форматирование чтобы немного симпатичнее. А у вас он может быть минимизированы так, что если в вашем редакторе есть возможность применить исходное форматирование то. Сделайте это. Но в любом случае вы сможете — это найти то, что мы ещё находится. Вот здесь мы видим, что этот стиль применяется к нашей верхней панели навигации там мы. Обращаемся к элементам с классом Search и. Обращаемся прямо к тегу Input с атрибутом Type здесь у нас есть радиусы float Left размер шрифта, но ничего из этого не работает поэтому мне нужно посмотреть. Почему не работает и проблема в том, что сейчас для нашей поисковой формы установлено ширина 200 пикселов. Так, что здесь попросту не хватает места для лейбла элемента формы и кнопки чтобы все они выражались в строку и. Несмотря на то, что у Input есть свойство float Left он не может быть влево потому, что нет места. Так, что первое, что я хочу сделать — это спрятать лейбл избавиться от него, а затем доступное пространство для формы и немного модифицировать поле ввода чтобы например убрать немного отступать, но я не буду — это делать здесь в Foundation помните, что наша стратегия — это перед эти правила в наших собственных целях поэтому. Переключайся на File Custom CSS он также находится в папке подчёркивание и прокручиваем вниз до раздела form Styles с телефоном чтобы всё было организовано первое, что мы сделаем — это спрячем лейбл поисковой формы для этого мы здесь напишем очень конкретный табор пробил, а затем наследственный комбинатор символ больше, а затем. пробел пробел пробел. Ну настолько конкретные селектор. Нет не нужен. Но я взял его из стилей Foundation чтобы быть уверенным в том, что у меня не будет никаких конфликтов стилей и у меня будет достаточно точные который перепишет их и выиграет возможно такая конкретность селектора немного по влияет на производительность. Но в данном случае — это уступка стоит того. Так, что первое, что я сделаю — это задом своя позиция позиция пусть будет. Абсолют абсолютная и затем я задам смещение влево -9. если вам интересно почему чтобы спрятать я не воспользовался свойством дисплей на то — это из соображений доступности чтобы скринридер и могли прочитать волейбол и я хочу чтобы весь этот срочно исчез. Я не хочу чтобы что-либо занимала — это пространство. Так, что если я сохраню перейду в браузер и обновлю я увижу, что теперь лейбл исчез, а оставшиеся элементы поисковой форме вверху панель навигации. Так, что пока всё нормально следующие, что я сделаю — это создам ещё один селектор прямо под этим и он будет очень похож на него табор пробел Will следственный комбинатор знак больше. пробел форум то есть в этот раз точно такое же селектор за исключением лейбл он будет обращаться ко всей форме пишем в ширина и пусть она у нас будет равна 250 пикселов. Сейчас — это для меня ничего не делает по умолчанию элементы форм во фреймворке Foundation растягиваются на 100% своего родителя. Так, что неважно какую ширину ездить задом — это поле ввода будет растягиваться. Поэтому чтобы элементы находились рядом друг с другом. Я позабочусь позже следующая, что я сделаю — это удалю немного отступая день для самого поля поиска поэтому опять табор пробел знак больше. Search еще менее специфичный селектор. Я просто обращаюсь к элементам списка я собираюсь убрать немного отступ справа я могу сделать — это несколькими способами написать 0005 пикселов. Что даст мне только 15 пикселов отступ слева в стилизации Foundation по умолчанию adstop составляет 15 пикселов с обеих сторон теперь он будет только слева или я могу просто добавить отступ справа 0 теперь. Если я сохраню — это перейду браузер и посмотрю то увижу большие изменения теперь форма немного шире нет отступа P1 справа и она прикасается прямо краю. Я знаю, что выглядит — это не супер. Но имейте терпение можно сделать ещё несколько изменений и вот, что я имею в виду когда говорю отдых во фреймворке здесь сделано чтобы поля ввода Input плыли влево float Left, но проблема в том, что по полям вода задано конкретная ширина 100% они будут заполнять родительский контейнер и ничто не сможет отображаться не слева и справа от них вообще независимо от того. Какое свойство float. Это пробел в. Оренбурге которые нужно учитывать. Если хотите использовать этот функционал у всех примархов будут подобные дыры наберитесь терпения и дальше нам нужно будет. Ещё немного позаниматься стилизацией нужно будет стилизовать тег инпут и кнопка так чтобы мы могли воспользоваться этим плаванием и вообще немного их.

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

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