В "Дом питомцах", виртуальном мире для любителей животных, Алекс, веб-разработчик, отправляется в поиски способа обновить показ их услуг с использованием CSS Grid.
Этот лаба旨在 привлечь пользователей, представляя услуги в организованном, визуально привлекательном виде. Задача Алексе - превратить раздел "Показ" в сеточный макет, который будет элегантно и эффективно подчеркивать услуги по уходу за питомцами.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"])
css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"])
css/CoreLayoutGroup -.-> css/box_model("Box Model")
css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding")
css/CoreLayoutGroup -.-> css/width_and_height("Width and Height")
css/CoreLayoutGroup -.-> css/display_property("Display Property")
css/CoreLayoutGroup -.-> css/positioning("Positioning")
css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout")
subgraph Lab Skills
css/box_model -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
css/margin_and_padding -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
css/width_and_height -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
css/display_property -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
css/positioning -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
css/grid_layout -.-> lab-289077{{"Показка услуг по уходу за питомцами с использованием CSS Grid"}}
end
Свойство position
Свойство CSS position - это мощный инструмент, который позволяет разработчикам точно контролировать расположение элементов на странице. Это позволяет размещать элементы в соответствии с их нормальным потоком, относительно их родительского элемента, относительно viewport или относительно их ближайшего прокручивающегося предка.
Статическое позиционирование
static - это значение по умолчанию для всех элементов, что означает, что элементы располагаются в соответствии с нормальным документо-типом. Элементы с статическим позиционированием не受影响 свойствами top, right, bottom или left.
Когда вы хотите, чтобы элементы следовали стандартному потоку, статическое позиционирование - ваш лучший выбор.
Например, есть изображение робота слева от страницы, и если мы установим этот элемент в position:static, то при прокрутке страницы это изображение также будет прокручиваться вместе с потоком страницы.
fixed позиционирование размещает элемент относительно viewport браузерного окна. Элемент останется на том же месте, даже если страница прокручивается.
Для создания навигационной панели, которая фиксирована вверху или внизу страницы.
Например, есть изображение робота слева от страницы, если мы установим этот элемент в position:fixed, то при прокрутке страницы это изображение не исчезнет из-за прокрутки страницы, изображение будет находится в фиксированном положении.
relative позиционирование позволяет смещать элемент относительно его нормального положения. Даже при смещении элемент по-прежнему занимает свое исходное пространство.
Когда вам нужно немного изменить положение элемента, не влияя на другие части макета.
Например, мы сдвинули изображение робота слева от страницы на заданное количество пикселей в направлениях top и left относительно его нормального положения.
absolute позиционирование делает элемент позиционируемым относительно его ближайшего позиционированного предка, если таковой имеется, или иначе относительно начального содержащего блока. Он удаляется из документационного потока и не занимает места.
Когда вам нужно создать плавающий элемент, такой как модальное окно или выпадающее меню.
В предыдущей лабораторной работе мы изучали Flexbox, но макет страницы для питомцев не давал нужного результата, поэтому в следующем этапе изучим другой макет - Grid Layout.
CSS Grid Layout (Grid) - это система макета на основе сетки, которая позволяет разработчикам создавать адаптивные макеты веб-страниц. Grid может разделить страницу на основные области или определить макет более мелких компонентов.
Для использования Grid-макета необходимо сначала установить свойство display: grid; на элементе-контейнере. Мы можем добавить следующее в style.css:
В этой лабораторной работе Алекс успешно использовал CSS Grid для перезаписи раздела отображения "Дом для питомцев", демонстрируя услуги по уходу за питомцами в структурированном и привлекательном сеточном макете. Этот подход не только улучшил визуальное представление, но и продемонстрировал гибкость и мощь CSS Grid в веб-дизайне.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy