ByMAS.TOP | Как сделать несколько блоков

Andr11
Автор
4 января 2026, в 12:26
@andr11

Всем привет, как сделать несколько (блоков информации) на одной 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-хаки */

Изображение

------

1045_IMG_20260104_112344_567.jpg (85.5 Кб)
Скачиваний: 45

TheSom 4 января 2026, в 14:08
Не всегда свободен

Andr11 ,

HTML

<!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;
}

.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;
cursor: pointer;
border: none;
}

.details-link:hover {
background: #0056b3;
}
</style>
</head>
<body>

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

<div class="product-list">

<div class="product-card">
<img src="via.placeholder.com" alt="Товар 1">
<h2>Смартфон X</h2>
<p>Мощный процессор и отличная камера для снимков в 2026 году.</p>
<button class="details-link" onclick="openProduct(1)">Подробнее</button>
</div>


<div class="product-card">
<img src="via.placeholder.com" alt="Товар 2">
<h2>Ноутбук Pro</h2>
<p>Легкий и быстрый инструмент для работы из любой точки мира.</p>
<button class="details-link" onclick="openProduct(2)">Подробнее</button>
</div>
</div>

<script>
// База данных товаров
const products = {
1: {
title: "Смартфон X (Модель 2026)",
description: "Полное описание: Процессор нового поколения, поддержка голографических вызовов и аккумулятор на 7 дней работы. Идеальное устройство для связи в 2026 году.",
price: "99 000 руб.",
img: "via.placeholder.com"
},
2: {
title: "Ноутбук Pro (Edition 2026)",
description: "Полное описание: Сверхлегкий корпус из титана, экран 120Гц и встроенный ИИ-помощник. Подходит для сложного видеомонтажа и 3D графики.",
price: "150 000 руб.",
img: "via.placeholder.com"
}
};

function openProduct(id) {
const item = products[id];

// Генерируем контент для новой вкладки
const pageHtml = `
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>${item.title}</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; padding: 40px; background: #eee; }
.container { background: white; padding: 30px; border-radius: 12px; max-width: 600px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; }
img { width: 100%; border-radius: 8px; margin-bottom: 20px; }
h1 { color: #333; }
p { font-size: 18px; color: #555; line-height: 1.5; }
.price { font-size: 24px; font-weight: bold; color: #28a745; margin: 20px 0; }
.close-btn { display: inline-block; padding: 10px 20px; background: #333; color: white; text-decoration: none; border-radius: 5px; cursor: pointer; }
</style>
</head>
<body>
<div class="container">
<img src="${item.img}" alt="${item.title}">
<h1>${item.title}</h1>
<p>${item.description}</p>
<div class="price">Цена: ${item.price}</div>
<button class="close-btn" onclick="window.close()">Закрыть вкладку</button>
</div>
</body>
</html>
`;

// Открываем новую вкладку
const newWindow = window.open('', '_blank');

// Записываем код в новую вкладку
newWindow.document.write(pageHtml);
newWindow.document.close();
}
</script>

</body>
</html>

________
посл. ред. 05.01.2026 в 16:22; всего 1 раз(а); by Ulty

TheSom 4 января 2026, в 14:22
Не всегда свободен

Держи

------

1046_xhata.ru.20260104_14_20_14.zip (2.4 Кб)
Скачиваний: 50

TheSom 4 января 2026, в 14:22
Не всегда свободен

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

Изображение

------

1047_Screenshot_2026010414132962_40deb401b9ffe8e1df2f1cc5ba480b12.jpg (275.1 Кб)
Скачиваний: 48

Andr11
Автор
4 января 2026, в 14:30
@andr11

TheSom (4 янв 2026, в 14:22)
После открытия будет вот так выглядеть

Работает только перед открытием blob:http://
Как исправить?

________
посл. ред. 04.01.2026 в 14:31; всего 1 раз(а); by Andr11

Ulty
Адм
5 января 2026, в 16:35
Оперативно отвечаю в ТГ

Мне нужно больше информации, что бы понять автора.
Нужна карусель? Когда слайды сами перелистываются.
Нужен слайдер? Когда пользователь сам нажимает на стрелку, что бы посмотреть все варианты.
Нужен просто блок, в котором можно будет выбрать что нужно человеку, а его перекинет (с помощью якоря) на ту часть страницы, где есть информация, его интересующая?

Прикрепил ниже слайдер (присутствуют кнопки перелистывания)

Изображение

------

1050_slider.png (87.2 Кб)
Скачиваний: 43

________
посл. ред. 05.01.2026 в 16:38; всего 1 раз(а); by Ulty

TheSom 7 января 2026, в 1:42
Не всегда свободен

Ulty , Уже запилил ему :)

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

Andr11 Автор 4 января 2026, в 12:26 @andr11

TheSom 4 января 2026, в 14:08 Не всегда свободен

TheSom 4 января 2026, в 14:22 Не всегда свободен

TheSom 4 января 2026, в 14:22 Не всегда свободен

Andr11 Автор 4 января 2026, в 14:30 @andr11

Ulty Адм 5 января 2026, в 16:35 Оперативно отвечаю в ТГ

TheSom 7 января 2026, в 1:42 Не всегда свободен

Вход

Andr11
Автор
4 января 2026, в 12:26
@andr11

TheSom 4 января 2026, в 14:08
Не всегда свободен

TheSom 4 января 2026, в 14:22
Не всегда свободен

TheSom 4 января 2026, в 14:22
Не всегда свободен

Andr11
Автор
4 января 2026, в 14:30
@andr11

Ulty
Адм
5 января 2026, в 16:35
Оперативно отвечаю в ТГ

TheSom 7 января 2026, в 1:42
Не всегда свободен