Обучение/Помощь новичкам | Как сделать несколько блоков
tucha_32
Всем привет, как сделать несколько (блоков информации) на одной html странице вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Каталог товаров</title>
<link rel="stylesheet" href="style.css"> <!-- Подключаем CSS -->
</head>
<body>
<h1>Наши товары</h1>
<div class="product-list">
<!-- Товар 1 -->
<div class="product-card" id="product1">
<img src="image1.jpg" alt="Товар 1">
<h2>Название товара 1</h2>
<p>Краткое описание первого товара, его основные характеристики.</p
<a href="#detail1" class="details-link">Подробнее</a>
</div>
<!-- Товар 2 -->
<div class="product-card" id="product2">
<img src="image2.jpg" alt="Товар 2">
<h2>Название товара 2</h2>
<p>Краткое описание второго товара, его основные характеристики.</p>
<a href="#detail2" class="details-link">Подробнее</a>
</div>
<!-- И так далее для всех товаров -->
</div>
<!-- Блоки с детальной информацией (можно скрывать/показывать JS) -->
<div class="product-details" id="detail1">
<h3>Детали товара 1</h3>
<p>Полное описание товара 1, технические характеристики, галерея изображений.</p
<a href="#product1">Назад к списку</a>
</div>
<div class="product-details" id="detail2">
<h3>Детали товара 2</h3>
<p>Полное описание товара 2, технические характеристики, галерея изображений.</p>
<a href="#product2">Назад к списку</a>
</div>
</body>
</html>
Стил css
.product-list {
display: grid; /* Или display: flex; */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Сетка */
gap: 20px;
padding: 20px;
}
.product-card {
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.product-card img {
max-width: 100%;
height: auto;
}
.product-details {
display: none; /* Скрываем детали по умолчанию */
padding: 20px;
border: 2px dashed #007bff;
margin-top: 20px;
}
/* Показываем нужный блок с деталями, когда он активен */
/* Для этого нужен JavaScript или CSS-хаки */
------
89787_IMG_20260104_112344_567.jpg (85.5 Kb)
Скачиваний: 13
________
посл. ред. 04.01.2026 в 12:24; всего 1 раз(а); by Andr11
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Каталог товаров</title>
<link rel="stylesheet" href="style.css"> <!-- Подключаем CSS -->
</head>
<body>
<h1>Наши товары</h1>
<div class="product-list">
<!-- Товар 1 -->
<div class="product-card" id="product1">
<img src="image1.jpg" alt="Товар 1">
<h2>Название товара 1</h2>
<p>Краткое описание первого товара, его основные характеристики.</p
<a href="#detail1" class="details-link">Подробнее</a>
</div>
<!-- Товар 2 -->
<div class="product-card" id="product2">
<img src="image2.jpg" alt="Товар 2">
<h2>Название товара 2</h2>
<p>Краткое описание второго товара, его основные характеристики.</p>
<a href="#detail2" class="details-link">Подробнее</a>
</div>
<!-- И так далее для всех товаров -->
</div>
<!-- Блоки с детальной информацией (можно скрывать/показывать JS) -->
<div class="product-details" id="detail1">
<h3>Детали товара 1</h3>
<p>Полное описание товара 1, технические характеристики, галерея изображений.</p
<a href="#product1">Назад к списку</a>
</div>
<div class="product-details" id="detail2">
<h3>Детали товара 2</h3>
<p>Полное описание товара 2, технические характеристики, галерея изображений.</p>
<a href="#product2">Назад к списку</a>
</div>
</body>
</html>
Стил css
.product-list {
display: grid; /* Или display: flex; */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Сетка */
gap: 20px;
padding: 20px;
}
.product-card {
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.product-card img {
max-width: 100%;
height: auto;
}
.product-details {
display: none; /* Скрываем детали по умолчанию */
padding: 20px;
border: 2px dashed #007bff;
margin-top: 20px;
}
/* Показываем нужный блок с деталями, когда он активен */
/* Для этого нужен JavaScript или CSS-хаки */
Изображение
------
89787_IMG_20260104_112344_567.jpg (85.5 Kb) Скачиваний: 13
________
посл. ред. 04.01.2026 в 12:24; всего 1 раз(а); by Andr11
Andr11 , Если я тебя правильнт понял то вот код. php
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Каталог товаров 2026</title> <style> /* Основные стили */ body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } h1 { text-align: center; color: #333; } /* Сетка товаров */ .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; } .product-card { background: #fff; border: 1px solid #ccc; padding: 15px; text-align: center; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s; } .product-card:hover { transform: translateY(-5px); } .product-card img { max-width: 100%; height: 150px; object-fit: cover; border-radius: 4px; background-color: #eee; } .details-link { display: inline-block; margin-top: 10px; padding: 8px 16px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; } /* Блоки с деталями */ .product-details { display: none; /* Скрыто по умолчанию */ background: #fff; padding: 30px; border: 2px solid #007bff; border-radius: 8px; margin-top: 20px; animation: fadeIn 0.5s; } .back-link { color: #007bff; text-decoration: none; font-weight: bold; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <h1>Наши товары</h1> <!-- Список товаров --> <div class="product-list"> <div class="product-card" id="product1"> <img src="via.placeholder.com" alt="Товар 1"> <h2>Смартфон X</h2> <p>Мощный процессор и отличная камера для снимков в 2026 году.</p> <a href="#detail1" class="details-link" onclick="showDetail('detail1')">Подробнее</a> </div> <div class="product-card" id="product2"> <img src="via.placeholder.com" alt="Товар 2"> <h2>Ноутбук Pro</h2> <p>Легкий и быстрый инструмент для работы из любой точки мира.</p> <a href="#detail2" class="details-link" onclick="showDetail('detail2')">Подробнее</a> </div> </div> <!-- Блоки с детальной информацией --> <div class="product-details" id="detail1"> <a href="#product1" class="back-link" onclick="hideAll()">← Назад к списку</a> <h3>Детали Смартфона X</h3> <p>Здесь находится полное описание технических характеристик, цены и отзывы на первый товар. Этот блок появляется только при клике.</p> </div> <div class="product-details" id="detail2"> <a href="#product2" class="back-link" onclick="hideAll()">← Назад к списку</a> <h3>Детали Ноутбука Pro</h3> <p>Подробная информация о втором товаре: время автономной работы, объем памяти и возможности экрана.</p> </div> <script> function showDetail(detailId) { // Сначала скрываем все открытые детали hideAll(); // Показываем нужный блок const target = document.getElementById(detailId); if (target) { target.style.display = 'block'; // Плавная прокрутка к деталям target.scrollIntoView({ behavior: 'smooth' }); } } function hideAll() { const allDetails = document.querySelectorAll('.product-details'); allDetails.forEach(detail => { detail.style.display = 'none'; }); } </script> </body> </html> ________
посл. ред. 04.01.2026 в 12:42; всего 1 раз(а); by TheSom
Вот ответ ИИ
________
посл. ред. 04.01.2026 в 12:42; всего 1 раз(а); by EseninLive
html
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Каталог товаров</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Наши товары</h1> <div class="product-list"> <!-- Карточка 1 --> <div class="product-card"> <img src="image1.jpg" alt="Товар 1"> <h2>Название товара 1</h2> <p>Краткое описание первого товара, его основные характеристики.</p> <button class="details-btn">Подробнее</button> <div class="details-panel"> <h3>Детали товара 1</h3> <p>Полное описание товара 1, технические характеристики, галерея изображений.</p> <button class="close-btn">Закрыть</button> </div> </div> <!-- Карточка 2 --> <div class="product-card"> <img src="image2.jpg" alt="Товар 2"> <h2>Название товара 2</h2> <p>Краткое описание второго товара, его основные характеристики.</p> <button class="details-btn">Подробнее</button> <div class="details-panel"> <h3>Детали товара 2</h3> <p>Полное описание товара 2, технические характеристики, галерея изображений.</p> <button class="close-btn">Закрыть</button> </div> </div> </div> <script> document.querySelectorAll('.details-btn').forEach(btn => { btn.addEventListener('click', () => { const card = btn.closest('.product-card'); const panel = card.querySelector('.details-panel'); panel.style.maxHeight = panel.scrollHeight + 'px'; btn.style.display = 'none'; }); }); document.querySelectorAll('.close-btn').forEach(btn => { btn.addEventListener('click', () => { const card = btn.closest('.product-card'); const panel = card.querySelector('.details-panel'); panel.style.maxHeight = '0'; const detailsBtn = card.querySelector('.details-btn'); detailsBtn.style.display = 'block'; }); }); </script> </body> </html> ________
посл. ред. 04.01.2026 в 12:42; всего 1 раз(а); by EseninLive
EseninLive (4 янв 2026, в 12:41)Вот ответ ИИ
html
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Каталог товаров</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Наши товары</h1> <div class="product-list"> <!-- Карточка 1 --> <div class="product-card"> <img src="image1.jpg" alt="Товар 1"> <h2>Название товара 1</h2> <p>Краткое описание первого товара, его основные характеристики.</p> <button class="details-btn">Подробнее</button> <div class="details-panel"> <h3>Детали товара 1</h3> <p>Полное описание товара 1, технические характеристики, галерея изображений.</p> <button class="close-btn">Закрыть</button> </div> </div> <!-- Карточка 2 --> <div class="product-card"> <img src="image2.jpg" alt="Товар 2"> <h2>Название товара 2</h2> <p>Краткое описание второго товара, его основные характеристики.</p> <button class="details-btn">Подробнее</button> <div class="details-panel"> <h3>Детали товара 2</h3> <p>Полное описание товара 2, технические характеристики, галерея изображений.</p> <button class="close-btn">Закрыть</button> </div> </div> </div> <script> document.querySelectorAll('.details-btn').forEach(btn => { btn.addEventListener('click', () => { const card = btn.closest('.product-card'); const panel = card.querySelector('.details-panel'); panel.style.maxHeight = panel.scrollHeight + 'px'; btn.style.display = 'none'; }); }); document.querySelectorAll('.close-btn').forEach(btn => { btn.addEventListener('click', () => { const card = btn.closest('.product-card'); const panel = card.querySelector('.details-panel'); panel.style.maxHeight = '0'; const detailsBtn = card.querySelector('.details-btn'); detailsBtn.style.display = 'block'; }); }); </script> </body> </html> Andr11 , я тебе вышел скинул с java там попроще вывод будет обьеденение css, html, java
Сейчас попробую
Написал в приват
Вот готовый файл на крайняк сюда еще закину распакуешь файл test.html
------
89789_xhata.ru.20260104_14_20_14.zip (2.4 Kb)
Скачиваний: 8
------
89789_xhata.ru.20260104_14_20_14.zip (2.4 Kb) Скачиваний: 8
После открытия вкладки будет так выглядеть
------
89790_Screenshot_2026010414132962_40deb401b9ffe8e1df2f1cc5ba480b12.jpg (275.1 Kb)
Скачиваний: 7
Изображение
------
89790_Screenshot_2026010414132962_40deb401b9ffe8e1df2f1cc5ba480b12.jpg (275.1 Kb) Скачиваний: 7