<!--HTML--><div id="p6-content" class="post-content">
            <div class="htmldemo"><style>
.temstyle {width: 583px; padding: 0; background: url(http://sd.uploads.ru/fP2BR.jpg) top no-repeat, url(http://sa.uploads.ru/UIdLz.jpg) bottom no-repeat, url(http://sa.uploads.ru/7z9uR.jpg) repeat-y; margin-top: -27px!important; margin-left: 0px;}
.contenttem {padding-top: 70px; padding-bottom: 50px; width: 550px;  color: #5f2f16; margin-left: 40px!important; 
min-height: 250px; font-family: 'Cuprum'; font-size: 12px;}</style>
<div class="temstyle"><div class="contenttem"><div style="background-color:#000000; color:#0cc0f7; FONT-FAMILY: DAYS; font-size: 30px;margin-left: -30px;height: 38px;width: 563px;margin-top: -5px;text-align: center;">ДЕЛО №13 СОВЕРШЕННО СЕКРЕТНО</div>
<div style="font-size: 16px; font-weight: bold; font-family: 'Bebas Neue'; display: inline;">
<center>
<div class="Mirage">
    <input type="radio" name="Miragea" id="Miragea_1" checked="checked">
    <input type="radio" name="Miragea" id="Miragea_2">
    <input type="radio" name="Miragea" id="Miragea_3">
    <input type="radio" name="Miragea" id="Miragea_4">
<!--------------------------------1 ВКЛАДКА ----------------------------------------------------->
    <div>
        <label for="Miragea_1">ПЕРСОНАЖ</label>
        <div style="background-color:#060606; color:#0cc0f7; FONT-FAMILY: DAYS; font-size: 30px;">◄♦◊ MIRAGE MONTENEGRO ◊♦► </div><br><div class="view view-first">
                    <img src="http://s4.uploads.ru/BPgrv.jpg">
                    <div class="mask">
                        <div style="background-color:#00c2f9; color:#232323; FONT-FAMILY: DAYS;">ТОТ СТРАШЕН, КТО ЗА БЛАГО ПОЧИТАЕТ - СМЕРТЬ </div><br>
                        <p>Здесь будет какой-то дофига важный текст. </p>
                    </div></div></div>
   
<!--------------------------------2 ВКЛАДКА ----------------------------------------------------->
    <div>
        <label for="Miragea_2">ЛИЧНОЕ ДЕЛО</label>
        <div style="width:500px; height:200px; overflow:auto;"><br><div style="background-color:#00c2f9; color:#232323; FONT-FAMILY: DAYS;">ЗДЕСЬ БИОГРАФИЯ </div><br>В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка <input> <label> и непосредственно секции <section>, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а воспользоваться стабильным решением с применением jQuery.</div>
        <div style="width:500px; height:200px; overflow:auto;"><div style="background-color:#00c2f9; color:#232323; FONT-FAMILY: DAYS;">ЗДЕСЬ ХАРАКТЕР </div><br>В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка <input> <label> и непосредственно секции <section>, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а воспользоваться стабильным решением с применением jQuery.</div>
    </div>
<!--------------------------------3 ВКЛАДКА ----------------------------------------------------->
    <div>
        <label for="Miragea_3">ОТНОШЕНИЯ</label>
        <p>ТИПА ВАЖНЫЕ ОТНОШЕНЬКИ</p>
    </div>
<!--------------------------------4 ВКЛАДКА ----------------------------------------------------->
    <div>
        <label for="Miragea_4">ХРОНОЛОГИЯ</label>
        <p>ТИПА ВАЖНАЯ ХРОНОЛОГИЯ</p>
    </div>
</div>
</div></div></div>
            </div>