Верстка блоку отзивов,как сделать так как на дизайне?

CSS HTML Sass

1 ответ

Привет, у меня получилось сделать чтобы оно было адаптивно и тд но без пробела между этими блоками двумя, потому что я сделал вот так

&lt;div class="boxForText"&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;No.&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             &lt;p&gt;1&lt;/p&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;Date&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             &lt;p&gt;21 Nov 2022&lt;/p&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;Nom&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             &lt;p&gt;Merry&lt;/p&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;Agence&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             Tattly           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;Ville&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             Ajaccio           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="boxForTextElement"&gt;           &lt;div class="boxForTextUp"&gt;             &lt;p&gt;Rating&lt;/p&gt;           &lt;/div&gt;           &lt;div class="boxForTextBottom"&gt;             90.6           &lt;/div&gt;         &lt;/div&gt;       &lt;/div&gt;

<div class="boxForText"> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>No.</p> </div> <div class="boxForTextBottom"> <p>1</p> </div> </div> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>Date</p> </div> <div class="boxForTextBottom"> <p>21 Nov 2022</p> </div> </div> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>Nom</p> </div> <div class="boxForTextBottom"> <p>Merry</p> </div> </div> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>Agence</p> </div> <div class="boxForTextBottom"> Tattly </div> </div> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>Ville</p> </div> <div class="boxForTextBottom"> Ajaccio </div> </div> <div class="boxForTextElement"> <div class="boxForTextUp"> <p>Rating</p> </div> <div class="boxForTextBottom"> 90.6 </div> </div> </div>

и boxForText дал градиент,но между двома блоками есть отступ,не знаю как сверстать как на макете

Дополнительно:

Это же явная таблица. Как в вашем случае добавлять вторую, третью строку?
Построчно верстать нужно.

&lt;div class="block"&gt;    &lt;div class="block-header"&gt;No.&lt;/div&gt;   &lt;div class="block-header"&gt;Date&lt;/div&gt;   &lt;div class="block-header"&gt;Nom&lt;/div&gt;   &lt;div class="block-header"&gt;Agence&lt;/div&gt;   &lt;div class="block-header"&gt;Ville&lt;/div&gt;   &lt;div class="block-header"&gt;Rating&lt;/div&gt;    &lt;div class="block-cell"&gt;1&lt;/div&gt;   &lt;div class="block-cell"&gt;21 Nov 2022&lt;/div&gt;   &lt;div class="block-cell"&gt;Merry&lt;/div&gt;   &lt;div class="block-cell"&gt;Tattly&lt;/div&gt;   &lt;div class="block-cell"&gt;Ajaccio&lt;/div&gt;   &lt;div class="block-cell"&gt;90.6&lt;/div&gt;    &lt;div class="block-cell"&gt;2&lt;/div&gt;   &lt;div class="block-cell"&gt;21 Nov 2022&lt;/div&gt;   &lt;div class="block-cell"&gt;Merry&lt;/div&gt;   &lt;div class="block-cell"&gt;Tattly&lt;/div&gt;   &lt;div class="block-cell"&gt;Ajaccio&lt;/div&gt;   &lt;div class="block-cell"&gt;90.6&lt;/div&gt;  &lt;/div&gt;

<div class="block"> <div class="block-header">No.</div> <div class="block-header">Date</div> <div class="block-header">Nom</div> <div class="block-header">Agence</div> <div class="block-header">Ville</div> <div class="block-header">Rating</div> <div class="block-cell">1</div> <div class="block-cell">21 Nov 2022</div> <div class="block-cell">Merry</div> <div class="block-cell">Tattly</div> <div class="block-cell">Ajaccio</div> <div class="block-cell">90.6</div> <div class="block-cell">2</div> <div class="block-cell">21 Nov 2022</div> <div class="block-cell">Merry</div> <div class="block-cell">Tattly</div> <div class="block-cell">Ajaccio</div> <div class="block-cell">90.6</div> </div>

.block {   display: grid;   grid-template-columns: repeat(6, 1fr);   row-gap: 1rem; } .block-header {   background: red; } .block-cell {   background: lime; }

.block { display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 1rem; } .block-header { background: red; } .block-cell { background: lime; }

Сергей delphinpro, спасибо

H1f3st, но дайте br:10px;и не будет работать)

H1f3st, ну а если подумать?
каждому шестому элементу начиная с первого левые верхний и нижний радиусы
каждому шестому элементу начиная с шестого - правые верхний и нижний.
nth-child

.block-header:nth-child(6n + 1), .block-cell:nth-child(6n + 1) {   border-radius: 10px 0 0 10px; } .block-header:nth-child(6n), .block-cell:nth-child(6n) {   border-radius: 0 10px 10px 0; }

.block-header:nth-child(6n + 1), .block-cell:nth-child(6n + 1) { border-radius: 10px 0 0 10px; } .block-header:nth-child(6n), .block-cell:nth-child(6n) { border-radius: 0 10px 10px 0; }

Сергей delphinpro, спасибо!

Сергей delphinpro, я бы их в ряды обернул и им просто display: contents кинул

Сергей delphinpro, отвязываемся сразу от количества айтемов в ряду в селекторах да и просто логичнее-читаемее

Ответы:

Самое простое — таблицей, на мой взгляд

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Елена Вебер Ответ

Для верстки блока отзывов, чтобы он выглядел как на дизайне, вам потребуется применить некоторые CSS стили. Во-первых, вам нужно определить структуру HTML для вашего блока отзывов. Обычно блок отзывов состоит из контейнера, в котором находятся отдельные отзывы.

Пример HTML структуры для блока отзывов:

<div class="reviews-container">
  <div class="review">
    <div class="review-author">John Doe</div>
    <div class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <div class="review">
    <div class="review-author">Jane Smith</div>
    <div class="review-content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
  </div>
</div>

<div class="reviews-container"> <div class="review"> <div class="review-author">John Doe</div> <div class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </div> <div class="review"> <div class="review-author">Jane Smith</div> <div class="review-content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div> </div> </div>

Теперь приступим к применению CSS стилей для блока отзывов. Вам нужно задать стили для каждого элемента отзыва, а также для контейнера отзывов.

Пример CSS стилей для блока отзывов:

.reviews-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.review {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
}
 
.review-author {
  font-weight: bold;
  color: #333;
}
 
.review-content {
  color: #666;
}

.reviews-container { display: flex; flex-direction: column; gap: 10px; } .review { background-color: #f9f9f9; padding: 10px; border-radius: 5px; } .review-author { font-weight: bold; color: #333; } .review-content { color: #666; }

Это простой пример CSS стилей, которые можно применить к вашему блоку отзывов. Вы можете настраивать стили под свои потребности, добавлять анимации, изменять шрифты и цвета.

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

Надеюсь, этот ответ поможет вам создать стильный и красивый блок отзывов на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их. Удачи в верстке!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Верстка блоку отзивов,как сделать так как на дизайне?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно