Как сделать несколько блоков

Всем привет, как сделать несколько (блоков информации) на одной html странице вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Каталог товаров</title>
<link rel="stylesheet" href="style.css"> 
</head>
<body>

<h1>Наши товары</h1>

<div class="product-list">

<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>


<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>


<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-хаки */

IMG_20260104_112344_567.jpg 85.5 Kb ⬇ 52

________
посл. ред. 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

Вот ответ ИИ

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

TheSom (4 янв 2026, в 12:47)

Andr11 , я тебе вышел скинул с java там попроще вывод будет обьеденение css, html, java

Сейчас попробую

TheSom (4 янв 2026, в 12:47)

Andr11 , я тебе вышел скинул с java там попроще вывод будет обьеденение css, html, java

Написал в приват

Вот готовый файл на крайняк сюда еще закину распакуешь файл test.html

xhata.ru.20260104_14_20_14.zip 2.4 Kb ⬇ 47

После открытия вкладки будет так выглядеть

Screenshot_2026010414132962_40deb401b9ffe8e1df2f1cc5ba480b12.jpg 275.1 Kb ⬇ 45