3130 читали · 3 года назад
[HTML + CSS] Как удобно верстать карточку товара и т.п.
Привет, всем будущим фронтенд разработчикам! В этой статье мы разберем как удобно верстать различные карточки. Любая карточка состоит из изображения и контента: Красным выделена верхушка карточки (изображение), а оранжевым контент. Исходя из этого мы можем создать два контейнера: Зачем нам создавать отдельный див для изображения, почему не вставить ее фоном в .card? - Если вставлять ее фоном в .card, мы должны будем вручную высчитывать отступы контента от изображения и решать остальные мелкие проблемы по ходу адаптива наших карточек, а зачем, если можно сделать намного проще...
3 дня назад
Сделал симпотичный вид слайдера
Поскольку в дзене есть ограничение на количество картинок в статье Я продолжу тут Решил сделать зону контента с права равной высоте картинки Сделал так и добавил .slide img, slide-content высота 100% Результат Сделал отступ зоне контента от картинки и дал стилей заголовку Убрал оранжевую рамку получилось так Гораздо симпатичнее Когда я перенёс слайдер в релизный файл своего сайта, то в итоге текст и кнопка слайда прилипли к его заголовку + текст над всем слайдером стал маленьким. Проблема была...