Таблица для продажи товаров с сервиса catcut

Добро пожаловать! Здесь вы можете узнать о последних обновлениях и решить вопросы касательно использования функционала данного сайта! Перед посещением обязательно ознакомьтесь с правилами форума. Некоторые функции форума доступны только зарегистрированным пользователям.
1 ответ(ов) в теме
Romych
не в сети 1 день
На сайте с 13.03.2021
Модератор
Титул: Элита
100%
Тем 5
Сообщения 26
Подарок автору
1
20:22

Эту таблицу можно использовать на своем сайте, для продажи товаров по партнерке с сервиса: catcut
Добавить категории, для навигации по имеющимся товарам, можно из этой темы... Пример использования категорий можно увидеть здесь: https://goprofits.ru/shop
Выполнить код (и посмотреть на его в работе) можно здесь: https://codepen.io/pen/#anon-signup

CSS

Спойлер
* { 
	margin: 0; 
	padding: 0; 
}
body { 
	font: 14px/1.4 Georgia, Serif; 
}
#page-wrap {
	margin: 50px;
}
p {
	margin: 20px 0; 
}

	h1 {
		text-align: center;
	}

	/* Универсальный стиль для настольных компьютеров и ноутбуков */
	table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Полосатая зебра */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
	}
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}		
		tr { border: 1px solid #ccc; }		
		td { 
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}		
		td:before {
			position: absolute;
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		td:nth-of-type(1):before { content: "Наименование"; }
		td:nth-of-type(2):before { content: "Продавец"; }
		td:nth-of-type(3):before { content: "Стоимость"; }
		td:nth-of-type(4):before { content: "Переход на товар"; }
	}
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}
	/* Всплывающее описание при наведение на название товара */
	dfn {
	  border-bottom: dashed 1px rgba(0,0,0,0.8);
	  padding: 0 0.4em;
	  cursor: help;
	  font-style: normal;
	  position: relative; 
	}
	dfn::after {
	  content: attr(data-info);
	  display: inline;
	  position: absolute;
	  top: 22px; left: 0;
	  opacity: 0;
	  width: 230px;
	  font-size: 13px;
	  font-weight: 700;
	  line-height: 1.5em;
	  padding: 0.5em 0.8em;
	  background: #333333;
	  color: white;
	  pointer-events: none; /* Это предотвращает появление окна при зависании */
	  transition: opacity 250ms, top 250ms;
	}
	dfn::before { /* треугольничек над подсказкой и поле между текстом, наведя на которое появится подсказка */
	  content: '';
	  display: block;
	  position: absolute;
	  top: 12px; left: 20px;
	  opacity: 0;
	  width: 0; height: 0;
	  border: solid transparent 5px;
	  border-bottom-color: #264f59;
	  transition: opacity 250ms, top 250ms;
	}
	dfn:hover {z-index: 2;} /* Сохраняет информационные поля поверх других элементов */
	dfn:hover::after,
	dfn:hover::before {opacity: 1;}
	dfn:hover::after {top: 30px;}
	dfn:hover::before {top: 20px;}

HTML

Спойлер
<div id="page-wrap">
	<table>
		<thead>
		<tr>
			<th>Наименование</th>
			<th>Продавец</th>
			<th>Стоимость</th>
			<th>Переход на товар</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td><dfn data-info="Здесь размещается описание товара, которое будет выводиться при наведение на его название">Здесь размещается название товара</dfn></td>
			<td><a href="" target="_blank"><dfn data-info="Это тот, кто выложил товар в продажу на сервисе catcut">Имя/Логин продавца на catcut</dfn></a></td>
			<td>50 руб.</td>
			<td><input onclick="javascript: this.style.textDecoration='line-through'; window.open('https://goprofits.ru/shop');" style="padding: 1px 3px; cursor: pointer;" value="Перейти к покупке" type="submit" class="btn btn-link"></td>
		</tr>
		<tr>
			<td><dfn data-info="Здесь размещается описание товара, которое будет выводиться при наведение на его название">Здесь размещается название товара</dfn></td>
			<td><a href="" target="_blank"><dfn data-info="Это тот, кто выложил товар в продажу на сервисе catcut">Имя/Логин продавца на catcut</dfn></a></td>
			<td>100 руб.</td>
			<td><input onclick="javascript: this.style.textDecoration='line-through'; window.open('https://goprofits.ru/shop');" style="padding: 1px 3px; cursor: pointer;" value="Перейти к покупке" type="submit" class="btn btn-link"></td>
		</tr>
		<tr>
			<td><dfn data-info="Здесь размещается описание товара, которое будет выводиться при наведение на его название">Здесь размещается название товара</dfn></td>
			<td><a href="" target="_blank"><dfn data-info="Это тот, кто выложил товар в продажу на сервисе catcut">Имя/Логин продавца на catcut</dfn></a></td>
			<td>500 руб.</td>
			<td><input onclick="javascript: this.style.textDecoration='line-through'; window.open('https://goprofits.ru/shop');" style="padding: 1px 3px; cursor: pointer;" value="Перейти к покупке" type="submit" class="btn btn-link"></td>
		</tr>
		<tr>
			<td><dfn data-info="Здесь размещается описание товара, которое будет выводиться при наведение на его название">Здесь размещается название товара</dfn></td>
			<td><a href="" target="_blank"><dfn data-info="Это тот, кто выложил товар в продажу на сервисе catcut">Имя/Логин продавца на catcut</dfn></a></td>
			<td>1 000 руб.</td>
			<td><input onclick="javascript: this.style.textDecoration='line-through'; window.open('https://goprofits.ru/shop');" style="padding: 1px 3px; cursor: pointer;" value="Перейти к покупке" type="submit" class="btn btn-link"></td>
		</tr>
		</tbody>
	</table>
</div>

Лучшая благодарность - Like на сообщение!
0
Вы не имеете права на публикацию сообщений в этой теме