Вид материалов в три колонки для uCoz

Вид материалов в три колонки для uCoz

10.12.2017 1147 0 milan_shubin Все для uCoz Вид материалов
Описание вид материала:


Хороший вид материал для создание интернет магазина или продажи игр, вид материал очень простой, там лишь есть вывод картинки и блок цену.

Установка:

В вид материалов нужного модуля ставим данный код :
Код
<div id="wid_n_inf2">  
  <div id="wid_n_inf2_cena">$OTHER1$</div>  
  <div id="wid_n_inf2_img"><img src="$IMG_URL1$"></div>  
  <div id="wid_n_inf2_nsme"><a href="$ENTRY_URL$">$TITLE$</a></div>  
  </div>

Теперь в таблицу стилей (CSS) подключим стили для нашего вида :
Код
#wid_n_inf2 {  
  position: relative;  
  width: 29%;  
  margin: 20px 2%;  
  float: left;  
}  
#wid_n_inf2_cena {  
  position: absolute;  
  right: -15px;  
  top: 15px;  
  background: #D53A3A;  
  color: #FFF;  
  padding: 5px 10px;  
}  

#wid_n_inf2_img {  
  min-width: 100%;  
  height: 200px;  
  overflow: hidden;  
}  
#wid_n_inf2_img img {  
  min-width: 100%;  
  max-width: 100%;  
  height: 200px;  
  object-fit: cover;  
}  

#wid_n_inf2_nsme {  
  height: 50px;  
  position: relative;  
  margin-top: -50px;  
  background: rgba(0,0,0,.7);  
  -webkit-transition: all 0.5s;  
  -moz-transition: all 0.5s;  
  -o-transition: all 0.5s;  
  transition: all 0.5s;  
}  
#wid_n_inf2_nsme:hover {  
  background: rgba(127,177,30,.8);  
}  
#wid_n_inf2_nsme a {  
  color: #FFF;  
  display: block;  
  font-family: Arial, Tahoma, sans-serif;  
  font-size: 13px;  
  padding: 10px 20px;  
}  

@media screen and (max-width: 1100px) {  
  #wid_n_inf2 {width: 48%;margin: 1%;}  
}  
@media screen and (max-width: 600px) {  
  #wid_n_inf2 {width: 96%;margin: 2%;}  
}


Вот и всё!

Автор: Waak
Вид материалов в три колонки для uCoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar