Страница 1 из 3123»
Форум про uCoz » Общие темы » Просьба/Услуга » Каркас под плеер с фильмами онлайн
Каркас под плеер с фильмами онлайн
Kosten
Дата: Вторник, 19.05.2015, 15:41 | Сообщение # 1
Администраторы
Сообщений:12664
Награды: 39


Приветствую всех, кто может пожалуйста, вытащить сам каркас, где расположены плееры.

Прикрепления: 9639362.jpg(32Kb)


First
Дата: Вторник, 19.05.2015, 17:10 | Сообщение # 2
Vip
Сообщений:381
Награды: 11


html код:
Код
<script type="text/javascript" src="http://www.megomult.ru/templates/Online/js/tables.js"></script>

  <div class="sectiontable" id="multmult">  
  <ul class="tabs">
  <li class="current">Первый плеер</li>
  <li>Второй плеер</li>
  <li>Третий плеер</li>  
  <li>Трейлер</li>  
  </ul>

<div class="box visible">
тут код первого плеера
</div>

<div class="box">
тут код второго плеера
</div>

<div class="box">
тут код третьего плеера
</div>
   

  <div class="box">
тут код трейлера  
  </div>
   
  </div>


Стили CSS:
Код
/* TabControl Start */  
p {padding: 7px 0;}  
.sectiontable {  
  width: 100%;  
  background: #EFEFEF;  
  margin: 0 0 30px;  
}  
ul.tabs {  
  height: 28px;  
  line-height: 25px;  
  list-style: none;  
  border-bottom: 1px solid #DDD;  
  background: #FFF;  
}  
.tabs li {  
  float: left;  
  display: inline;  
  margin: 0 1px -1px 0;  
  padding: 0 13px 1px;  
  color: #777;  
  cursor: pointer;  
  background: #F9F9F9;  
  border: 1px solid #E4E4E4;  
  border-bottom: 1px solid #F9F9F9;  
  position: relative;  
}  
.tabs li:hover,  
.vertical .tabs li:hover {  
  color: #F70;  
  padding: 0 13px;  
  background: #FFFFDF;  
  border: 1px solid #FFCA95;  
}  
.tabs li.current {  
  color: #444;  
  background: #9cf;  
  padding: 0 13px 2px;  
  border: 1px solid #D4D4D4;  
  border-bottom: 1px solid #EFEFEF;  
}  
.box {  
  display: none;  
  border: 1px solid #D4D4D4;  
  border-width: 0 1px 1px;  
  background: #EFEFEF;  
  padding: 0 12px;  
}  
.box.visible {  
  display: block;  
}  

.section.vertical {  
  width: 440px;  
  border-left: 160px solid #FFF;  
}  
.vertical .tabs {  
  width: 160px;  
  float: left;  
  display: inline;  
  margin: 0 0 0 -160px;  
}  
.vertical .tabs li {  
  padding: 0 13px;  
  margin: 0 0 1px;  
  border: 1px solid #E4E4E4;  
  border-right: 1px solid #F9F9F9;  
  width: 132px;  
  height: 25px;  
}  
.vertical .tabs li:hover {  
  width: 131px;  
}  
.vertical .tabs li.current {  
  width: 133px;  
  color: #444;  
  background: #EFEFEF;  
  border: 1px solid #D4D4D4;  
  border-right: 1px solid #EFEFEF;  
  margin-right: -1px;  
}  
.vertical .box {  
  border-width: 1px;  
}  
/* TabControl End */


Так же можно самому добавить вкладки, это не сложно


Kosten
Дата: Вторник, 19.05.2015, 17:25 | Сообщение # 3
Администраторы
Сообщений:12664
Награды: 39


First, круто, спасибо.

First
Дата: Вторник, 19.05.2015, 21:03 | Сообщение # 4
Vip
Сообщений:381
Награды: 11


Kosten, не за что.

First
Дата: Вторник, 19.05.2015, 21:35 | Сообщение # 5
Vip
Сообщений:381
Награды: 11


Kosten, чем хорош ещё код, так это тем, что построен чисто на стилях и без картинок, и можно с ним делать всё что угодно..... к примеру под тёмный дизайн можно перекрасить, закруглить углы, добавить и убрать разделы и т.д...
к примеру вот красил


Гость
Дата: Среда, 20.05.2015, 07:08 | Сообщение # 6
Гости
Сообщений:
Награды:







First - не совсем понял что ты хочешь ?
Напиши мне в ВК https://vk.com/grabbertm

админ http://www.megomult.ru/
First
Дата: Среда, 20.05.2015, 09:34 | Сообщение # 7
Vip
Сообщений:381
Награды: 11


Гость, правильно ты понял, потому что я ничего не хочу, а показал на скрине то, что можно сделать с тем каркасом что вытащил biggrin

Kosten
Дата: Среда, 20.05.2015, 10:00 | Сообщение # 8
Администраторы
Сообщений:12664
Награды: 39


First, если не трудно, сделай сразу такой вид.

Kosten
Дата: Пятница, 22.05.2015, 19:47 | Сообщение # 9
Администраторы
Сообщений:12664
Награды: 39


First, как ты сделал темный, пробовал, что то не получается?

First
Дата: Пятница, 22.05.2015, 21:36 | Сообщение # 10
Vip
Сообщений:381
Награды: 11


Kosten, вот так вот примерно
Код
/* TabControl Start */  
p {padding: 7px 0;}  
.sectiontable {
  width: 100%;  
  margin: 10 0 30px;
}  
ul.tabs {  
  height: 28px;
  padding:0px 0 5 0px;
line-height: 25px;  
  list-style: none;  
   
  background: #FFF;  
}  
.tabs li {  
  float: left;  
  display: inline;  
  margin: 0 1px -1px 0;  
  padding: 0 13px 1px;
border-radius:10px;  
  color: #fff;  
  cursor: pointer;  
  background: #121212;  
  border: 1px solid #E4E4E4;  
   border: 1px solid #000;  
  position: relative;  
}  
.tabs li:hover,  
.vertical .tabs li:hover {  
  color: #32CD32;  
  padding: 0 13px;  
  background: #666;  
  border: 1px solid #666555;
}  
.tabs li.current {  
  color: #32CD32;  
  background: #666;  
  padding: 0 13px 2px;  
  border: 1px solid #D4D4D4;  
  border: 1px solid #EFEFEF;  
}  
.box {  
  display: none;  
border-radius:10px;
  border: 1px solid #000;  
  border-width: 0 1px 1px;
   
  background: #151515;  
  padding: 0 12px;  
}  
.box.visible {  
  display: block;  
}  

.section.vertical {  
  width: 440px;  
  border-left: 160px solid #FFF;  
}  
.vertical .tabs {  
  width: 160px;  
  float: left;  
  display: inline;  
  margin: 0 0 0 -160px;  
}  
.vertical .tabs li {  
  padding: 0 13px;  
  margin: 0 0 1px;  
  border: 1px solid #E4E4E4;  
  border-right: 1px solid #F9F9F9;  
  width: 132px;  
  height: 25px;  
}  
.vertical .tabs li:hover {  
  width: 131px;  
}  
.vertical .tabs li.current {  
  width: 133px;  
  color: #444;  
  background: #EFEFEF;  
  border: 1px solid #D4D4D4;  
  border-right: 1px solid #EFEFEF;  
  margin-right: -1px;  
}  
.vertical .box {  
  border-width: 1px;  
}  
/* TabControl End */


Результат этого кода можешь посмотреть тут




Сообщение отредактировал First - Пятница, 22.05.2015, 21:44
Kosten
Дата: Пятница, 22.05.2015, 21:57 | Сообщение # 11
Администраторы
Сообщений:12664
Награды: 39


First, благодарю, то что то сам пробовал, не мог закруглить.

Kosten
Дата: Пятница, 22.05.2015, 22:00 | Сообщение # 12
Администраторы
Сообщений:12664
Награды: 39


First, реально смотрится сейчас по сути и оригинально. От первоисточника не чего не осталось.

Прикрепления: 3680123.jpg(20Kb)


First
Дата: Пятница, 22.05.2015, 22:06 | Сообщение # 13
Vip
Сообщений:381
Награды: 11


Kosten, не за что
если хочешь добавить ещё отступы от плеера сверху и снизу так замени эту часть кода
Код
.box {   
   display: none;   
border-radius:10px;
   border: 1px solid #000;   
   border-width: 0 1px 1px;
     
   background: #151515;   
   padding: 13 12px;   
}   
.box.visible {   
   display: block;   
}

так на много мне кажется красивее чем только по сторонам




Сообщение отредактировал First - Пятница, 22.05.2015, 22:10
Kosten
Дата: Суббота, 23.05.2015, 00:35 | Сообщение # 14
Администраторы
Сообщений:12664
Награды: 39


First, ты реально и оригинала красивей сделал, буду заливать фильм попробую, но 4 плеера это много, 2 хватит и трейлер.

First
Дата: Суббота, 23.05.2015, 01:33 | Сообщение # 15
Vip
Сообщений:381
Награды: 11


Цитата Kosten ()
4 плеера это много
конечно много, но можно использовать и не под плееры а под части фильма, к примеру 4 части крепкого орешка biggrin А если писать не первый плеер к примеру, а 1серия или 1часть, так их влезет штук 7-8 я так думаю




Сообщение отредактировал First - Суббота, 23.05.2015, 01:42
Форум про uCoz » Общие темы » Просьба/Услуга » Каркас под плеер с фильмами онлайн
Страница 1 из 3123»
Поиск: