მთავარი » 2014 იანვარი 17 » ინფორმაცის ბლოკის სტილი
13:53 ინფორმაცის ბლოკის სტილი | |
 ეს არის ინფორმაცის ბლოკის სტილი. დემო<style> body { background-color:white; /* Фон */ margin:0; /* Внешний отступ 0 */ padding:0; /* Внутренний отступ 0 */ text-align:center; /* Текст по центру (для IE) */ font:13pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; } .main { margin:0 auto; /* Внешних отступов 0, делаем элемент по центру */ width:800px; /* Обяхательно наличие ширины */ text-align:left; /* Текст по левому краю */ } .tabs { opacity: 0; /* Прозрачность */ visibility: hidden; /* Изначально - спрятан */ } .tab{ visibility: hidden; /* Изначально - спрятан */ z-index: 10; /* z-index */ color:#fff; /* Цвет */ font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */ margin-top:-30px; /* Отступы */ padding:5px; /* Внутренние отступы */ width:200px; /* Ширина */ position:absolute; /* Позиционирование */ /* transitio старт */ -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; /* transitio конец */ /* Округление старт */ -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; /* Округление конец */ } .tabs:target+.tab { opacity: 1; /* Убирает прозрачность */ visibility: visible; /* Делает видимым */ margin-top:0px; /* Отступы */ background-color:#478CFB; /* Фон */ color:#fff; /* Цвет текста */ position:relative; /* Позиционирование */ border:1px solid #337EFB; /* Граница */ } .blockLink{ background-color:#E6E6E6; /* Цвет */ border:1px solid #D5D5D5; /* Граница */ padding:5px; /* Внутренние отступы */ width:200px; /* Ширина */ /* Округление старт */ -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Округление конец */ } .blockLink a{ padding:5px; /* Внутренние отступы */ font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */ color:#A4A5A4; /* Цвет */ text-decoration:none; /* Отсутствие нижней линии */ display:block; /* Тип оттображения */ } .menu a { color:#fff; font: bold 10pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */ text-decoration:none; padding:2px; } .menu a:hover { text-decoration:underline; } .demotype a{ background-color:#337EFB; padding:5px; font: bold 10pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; color:#fff; text-decoration:none; } </style> </head> <body> <div class="main"> <br> <div class="blocks"> <div class="blockLink"><a href="#tab1">რა არის ეს?</a></div> <a class="tabs" id="tab1"></a> <div class="tab"> ეს არის მენიუს ბლოკი, რომლის დაჭერიშ შემთხვევაში ჩამოიშლება ტექსტი </div> <br> <div class="blockLink"><a href="#tab4">მენიუ</a></div> <a class="tabs" id="tab4"></a> <div class="tab menu"> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="/">კატეგორია</a><br> <a href="http://gelesson.net/">GeLesson.Net</a> </div> <br> <div class="blockLink"><a href="#tab2">საიტის შესახებ</a></div> <a class="tabs" id="tab2"></a> <div class="tab"> ტექსტი </div> <br> <div class="blockLink"><a href="#tab3">ცარიელია</a> </div> <a class="tabs" id="tab3"></a> <div class="tab"> ტექსტი </div> </div> </div> </body> </html> | |
|
| |
| სულ კომენტარები: 0 | |
საიტის მენიუ
შესვლის ფორმა
ჩვენი გამოკითხვა
რეკლამა
საიტის მეგობრები
სტატისტიკა
სულ ონლაინში: 1
სტუმარი: 1
მომხმარებელი: 0