лол
елка
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться22017-01-18 04:04:40
Код:
<!--HTML--><style type="text/css">
/******************************************************************
Cтиль:"таблица с вкладками"
******************************************************************/
/*Правки для Цвета фона и бордюров таблицы*/
.s-tabs>.stab,.s-tabs>span{
background:#F7F6D2;
border-color: #7E7E7E!important;
}
.s-tabs{
width:500px; /*ширина таблицы*/
display:block;
}
.s-tabs>.stab{
height:200px; /*высота вкладки*/
}
/* Стиль "Ушка" вкладок */
.s-tabs>span{
position:relative;
z-index:100;
color:#626436;
cursor:pointer;
border: 1px solid;
display:inline-block;
padding:4px;
height: 17px;
margin:0;
margin-right:-1px;
text-align:left;
padding-right:6px;
text-shadow: 1px 1px 2px rgba(0,0,0,.4);
font: italic normal 400 13px/16.5px "Comic Sans Ms";
}
/* Активное "Ушко" */
.s-tabs>span.selected{
color:#fff;
background:#000;
border-bottom-color:transparent!important;
}
/* Стиль вкладки(LI)*/
.s-tabs>.stab{
width:100%;
margin:0;
display:none;
overflow-y:auto;
overflow-x:hidden;
text-align:center;
vertical-align:middle;
border: 4px solid;
padding:4px 12px!important;
}
</style>
<ul class="s-tabs">
<span>Вкладка 1</span><span>Вкладка 2</span><span>Вкладка 3</span><span>Вкладка 4</span><span>Вкладка 5</span><span>Вкладка 6</span>
<li class="stab">
<!-- Ваш контент 1-->
</li>
<li class="stab">
<!-- Ваш контент 2-->
</li>
<li class="stab">
<!-- Ваш контент 3-->
</li>
<li class="stab">
<!-- Ваш контент 4-->
</li>
<li class="stab">
<!-- Ваш контент 5-->
</li>
<li class="stab">
<!-- Ваш контент 6-->
</li>
</ul>
<script type="text/javascript">
$('.s-tabs').each(function(){
$(this).children('span:first').addClass('selected');
$(this).children('.stab').eq(0).show();
});
$('.s-tabs>span').live('click', function(){
var a = $(this).parent('.s-tabs');
var arr = a.children('span');
var index = arr.index(this);
arr.removeClass('selected');
$(this).addClass('selected');
a.children('.stab').hide();
a.children('.stab').eq(index).show();
});
</script>Поделиться32017-01-19 00:52:41
Код:
<!--HTML--><div class="htmldemo">
<div class="htmldemo">
<style type="text/css">
.korpus > div, .korpus > input { display: none; }
.korpus {text-align: center;
padding: 10px;
border-top: 30px;
}
.korpus label {
padding: 5px 5px;
border: 3px #7e7e7e;
border-style: double;
box-shadow: inset 1 0 0px 3px #7e7e7e;
line-height: 29px;
background-color: #eaeaea;
cursor: context-menu;
position: relative;
bottom: -3px;
background: #///;
font-size: 10px;
font-style: inherit;
font-family: sans-serif;
}
.korpus input[type="radio"]:checked + label {
border-bottom: 2px solid #51929f;
}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.korpus > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.korpus > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.korpus > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.korpus > input:nth-of-type(7):checked ~ div:nth-of-type(7) {
display: block;
padding: 15px;
border: 3px #7e7e7e;
border-style: double;
background-color: #eaeaea;
box-shadow: inset 0 0 0px 0px #67552f;
text-align: justify;
width: 520px;
height: 180px;
overflow: auto;
overflow-x: hidden;
}
</style>
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"><label for="vkl1">A-B-C-D</label>
<input type="radio" name="odin" id="vkl2"><label for="vkl2">E-F-G-H</label>
<input type="radio" name="odin" id="vkl3"><label for="vkl3">J-K-L-M</label>
<input type="radio" name="odin" id="vkl4"><label for="vkl4">N-O-P-Q-R</label>
<input type="radio" name="odin" id="vkl5"><label for="vkl5">S-T-U-V</label>
<input type="radio" name="odin" id="vkl6"><label for="vkl6">W-X-Y-Z</label>
<input type="radio" name="odin" id="vkl7"><label for="vkl7">0-9 + Арты</label>
<div><center><b>Attack on Titan</b> — Annie Leonhart<br><br><hr>
<b>Bleach</b> — Zaraki Kempachi<br>
<b>BTS</b> — Park Jimin<br><br><hr>
<b>Code Geass</b> — C.C.<br><br><hr>
<b>D.Gray-man</b> — Allen Walker<br>
<b>Dogs: Bullets & Carnage</b> — Haine Rammsteiner<br>
<b>Deadman Wonderland</b> — Shiro<br>
<b>DC comics</b> — Harley Quinn<br>
<b>DC comics</b> — John Constantine<br>
<b>DmC 5</b> — Dante<br> </center></div>
<div><center><b>EXO</b> — Byun Baekhyun<br><br><hr>
<b>Free!</b> — Matsuoka Rin<br>
<b>Fate</b> — Arthuria Pendragon<br>
<b>Fables</b> — Snow White<br><br><hr>
<b>Haikyuu!!</b> — Oikawa Tooru<br>
<b>Haikyuu!!</b> — Tetsurou Kuroo<br>
<b>Haikyuu!!</b> — Bokuto Koutarou<br>
<b>Homestuck</b> — John Egbert<br>
<b>Homestuck</b> — Human!Cronus Ampora<br>
</center><br></div>
<div><center>
<b>JoJo no Kimyou na Bouken</b> — Diavolo<br><br><hr>
<b>Kuroko no Basuke</b> — Aomine Daiki<br>
<b>Kuroko no Basuke</b> — Kagami Taiga<br><br><hr>
<b>League of Legends</b> — Miss Fortune<br><br><hr>
<b>Mass Effect</b> — Jane Shepard<br>
<b>Mass Effect 3</b> — Jack «Subject Zero»<br>
</center></div>
<div><center><b>Neon Genesis Evangelion</b> — Sohryu Asuka Langley<br>
<b>Neon Genesis Evangelion</b> — Misato Katsuragi<br>
<b>Naruto</b> — Deidara<br>
<b>Naruto</b> — Sasuke Uchiha<br>
<b>Nico-Nico Singer</b> — Fukuwa<br><br><hr>
<b>Owari no Seraph</b> — Mikaela Hyakuya<br><br><hr>
<b>Psycho-Pass</b> — Makishima Shōgo<br><br><hr>
<b>Resident Evil 4</b> — Leon Scott Kennedy<br></center></div>
<div><center><b>Tekken</b> — Bryan Fury<br>
<b>Touken Ranbu</b> — Taroutachi <br>
<b>Togainu no Chi</b> — Shiki<br>
<b>Togainu no Chi</b> — Akira<br>
<b>Tokyo Ghoul</b> — Akira Mado<br><br><hr>
<b>Uta no Prince-sama</b> — Otoya Ittoki<br><br><hr>
<b>Yuri on Ice</b> — Victor Nikiforov<br>
<b>Yuri on Ice</b> — Yuri Plisetsky<br>
<b>Yuri on Ice</b> — Yuuri Katsuki<br></center></div>
<div><center><b>Wand of Fortune</b> — Alvaro Garay</center></div>
<div><center><b>art by Barechu</b><br>
<b>shiva by entrepreneurial</b><br>
<b>art by "denoro"</b><br>
<b>art by Kyrie</b><br>
<b>art by hetza (hellshock)</b></center></div>
</div>
</div></div>Страница: 1
