Главная » Статьи |
Всего материалов в каталоге: 19 Показано материалов: 11-19 |
Страницы: « 1 2 |
Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{}, вкладки из горизонтальных преобразуются в вертикальный аккордион. |
Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим. Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:
|
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей... |
Существуют множество вариантов. чтобы установить бегущую строку себе на сайт. Но она служит только лишь целью рекламного характера или как украшение Web-страницы. Многие просто не задумываются, что к текстовой бегущей строке можно прикрепить графическое изображение, а так-же сделать его ссылкой на другую страницу либо документ... |
<button onclick="HideIt();">Название спойлера</button> |
Содержимое spoiler.css: .spoilerBody {
padding: 3px; background-color: #FFFFFF; border: 1px solid #D8D8D8; font-size: 1em; } .spoilerBar { text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block; } .spoilerContents { padding: 4px; background-color: #F7ECDC; border: 1px solid #D8D8D8; font-size: 0.9em; } Сам HTML код: <div>
<div><br> <div class="smallfont" style="margin-bottom:2px"><br><input type="button" value="+ Показать" style="width:75px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = '';this.innerText = ''; this.value = '- Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none'; this.innerText = ''; this.value = '+ Показать'; }"><br> </div><br> <div style="display: none;">ЗДЕСЬ МОЖЕТ БЫТЬ ВСЕ, ЧТО ЗАХОТИТЕ</div><br></div>
|
Предлагаем Вам совсем простой и совсем небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.
Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на спойлер, находящееся чуть ниже:
Для получения такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код: |
Пожалуй, ни одно из достижений современности не связано с таким количеством слухов, легенд и мифов, как всеми нами любимый Интернет. На самом деле история его создания не так романтична, как хотелось бы многим, но от этого не менее интересна. С чего же все началось? Еще в 1961 году Леонард Клейнрок опубликовал работу, посвященную пакетной коммутации. Надо сказать, что подобных работ в то время было много, но так уж получилось, что ... |
Очень тяжело определить какое-либо устройство как самый первый компьютер. С тех пор изменилось даже само значение определения, поэтому обозначить первый компьютер, как и любое другое изобретение, которое человечество породило изнутри, практически невозможно. Многие устройства, называемые на заре своей юности компьютерами, согласно современным критериям уже не могут быть таковыми. Изначально термин «компьютер» ... |