Как верстать такие блоки?

Ссылка скопирована
CSS HTML PHP
12 января 2026 1 ответ

Я новичок в верстке, верстал макеты и все было нормально, но потом пошли вот такие блоки которые я не понимаю как верстать(прикладываю три скрина) и в ютубчике никто этого не объясняет, поэтому решаю обратиться к гуру программистам здесь. Помогите пожалуйста, вообще не допираю как их верстать.

Как верстать такие блоки?

Как верстать такие блоки?

Как верстать такие блоки?

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

Обычные фоновые картинки.

Тексты на последнем скрине абсолютами или гридами.

Экспортируете граф. элементы в svg/png. Оборачиваете эти блоки в какой-нибудь div.wrapper с position:relative. Создаете дочерний div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }, а в этот div уже картинку img { width: 100%; height: 100%, object-fit: cover; } или background на дочерний, который с абсолютом.

Ответы:

через position: absolute

  • Понятнее не стало

На первых двух скринах подойдет displey: flex
На третьем было бы неплохо увидеть полный скрин, в теории там просто текст по центру, а названия планет через positio: absolute

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

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

Заказать помощь
Лучший ответ
1
Ирина WP Ответ

Для верстки блоков с кодом всех языков программирования с использованием тега

, вам нужно следовать определенным шагам. 
 
1. Откройте HTML-документ и создайте блок, в котором будет отображаться ваш код. Например:
 
```html
<pre lang="php">
// Ваш PHP код здесь

, вам нужно следовать определенным шагам. 1. Откройте HTML-документ и создайте блок, в котором будет отображаться ваш код. Например: ```html <pre lang="php"> // Ваш PHP код здесь

```

2. Внутри тега

 вставьте свой код на PHP. Например:
 
```html
<pre lang="php">

вставьте свой код на PHP. Например: ```html <pre lang="php">

```

3. Укажите язык программирования после тега 

 с помощью атрибута lang="php". Это поможет браузеру правильно интерпретировать код и отобразить его соответствующим образом.


4. Для подсветки синтаксиса кода на других языках программирования, просто замените "php" на соответствующее название языка (например, "javascript", "python", "html").


5. После завершения верстки всех блоков с кодом, убедитесь, что весь контент внутри тега 


 отображается корректно и соответствует вашим ожиданиям.


Следуя этим шагам, вы сможете верстать блоки с кодом всех языков программирования с использованием тега 


 без проблем.
Другие ответы (0)

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

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

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ