762 читали · 5 лет назад
CSS: Многоколоночные макеты
При вёрстке сайта, одной из первых задач верстальщика является создание основного шаблона. Основным шаблоном в данном случае называется вёрстка без контента - это совокупность шапки сайта, меню, футера и прочих элементов, которые встречаются на каждой странице. Итак, попробуем сверстать простой макет сайта. Сверху у нас будет шапка сайта, слева будет навигация по разделу сайта, справа контент, а снизу футер. Стандартный шаблон, ничего необычного. Начнём с HTML. <div class="main-container"> <header>Header</header> ...
5 месяцев назад
#1 CSS Grid Layout: Создайте потрясающие макеты для веб-страниц
Хотите создавать потрясающие, адаптивные и стильные макеты для своих веб-страниц? Тогда CSS Grid Layout – это ваш лучший друг! 🤝 CSS Grid – это мощная технология, которая позволяет легко организовывать и размещать элементы веб-страницы в двумерной сетке. Она не только упрощает процесс верстки, но и открывает безграничные возможности для создания креативных и функциональных макетов. 😎 Практический пример: создание простого макета .container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 столбца равной ширины */ gap: 10px; /* Отступ между элементами */ } ...