Все записи с меткой ‘HTML’
Вывод рамки вокруг изображения
Изображения размещенное на сайте можно украсить рамкой, для этого нужно всего лишь добавить следующий код в таблицу стилей:
CSS-код:
img {
border: 2px solid #595959;
padding: 4px;
}Также можно добавить эффект смены цвета рамки при наведении курсора на изображение, если картинка является ссылкой.
CSS-код:
a:hover img {
border: 2px solid #000;
padding: 4px;
}Готово!
Пример использования здесь.
p.s. В этом примере показана работа с рамками, но не ограничивайтесь только этим кодом, экспериментируйте, можно добавить еще много эффектов которые украсят изображения на Вашем сайте. Только не переусердствуйте!
p.p.s В IE6 hover таким способом не работает.
Иконка в адресной строке браузера
Иконка в адресной строке браузера, а за одно и в избранном делается очень просто. Для этого нам понадобится:
Первое – иконка в формате ico размером 16 на 16 пикселей. Сделать её можно из любой картинки на сайте Favicon.ru.
Второе – HTML код написанный ниже, который нужно добавить между <head> и </head>.
HTML-код:
<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">Пример использования можно увидеть на этом сайте в адресной строке.
В Internet Explorer favicon может не отображаться, для отображения нужно добавить сайт в избранное.
Раскраска ячеек таблицы через одну
Для того, чтобы раскрасить ячейки таблицы через одну, например в гостевой книге, нам понадобится следующий скрипт который нужно разместить после таблицы, которой требуется раскраска.
JavaScript:
function paintTable(obj){
for(i=0; i<obj.rows.length; i++){
if(i%2>0){
obj.rows[i].style.background = "#ccc";
}
}
}
paintTable(document.getElementById("coloring"));В строке
obj.rows[i].style.background = "#ccc";задается цвет бэкграунда ячеек.
В строке
paintTable(document.getElementById("coloring"));задается id таблицы, в данном случае это “coloring”.
Теперь для того, чтобы ячейки у заданной таблицы раскрашивались в нужный нам цвет, нужно присвоить таблице id который указан в скрипте, например так:
HTML-код:
<table id="coloring"> ...Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Показ, скрытие блока (div) по клику
Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:
CSS-код:
.headline {
border: 1px solid #000000;
cursor: pointer;
text-align: center;
}
.hidden {
display: none;
border: 1px solid #ff0000;
text-align: center;
margin-top: 2px;
}JavaScript:
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
}
}HTML-код:
<div class="headline" onclick="show('cat1')">Заголовок</div>
<div class="hidden" id="cat1">Текст раскрывающегося блока</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Закругленные углы без графики при помощи CSS
В настоящее время в среде WEB-дизайна достаточно популярны закругленные углы, которые воспроизводятся различными способами. В этой статье я приведу один из примеров, лидирующий на мой взгляд, как сделать углы закругленными при помощи CSS.
CSS-код:
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r1 {margin: 0 1px;}
.r2 {margin: 0 2px;}
.r3 {margin: 0 3px;}
.r4 {margin: 0 4px;}
.r5 {margin: 0 5px;}
.r6 {margin: 0 6px;}
.r7 {margin: 0 7px;}
.r8 {margin: 0 8px;}
.r9 {margin: 0 9px;}
.r10 {margin: 0 10px;}
.content, b {background-color: #CCCCCC;}
.content {padding: 10px 10px; text-align: center;}HTML-код:
<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
<div class="content">
Здесь содержимое блока
</div>
<b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>В данном примере показаны углы с закругленностью в 10px. Но не стоит на этом останавливаться, нужно экспериментировать и изобретать новые дизайнерские решения.
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Размещение блока (div) по центру страницы
Для того, чтобы разместить блок (div) по центру окна браузера нам понадобится несколько сток HTML и CSS кода приведенного ниже:
CSS код:
#block-on-center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px; /* значение равно половине height со знаком минус */
margin-left: -100px; /* значение равно половине width со знаком минус */
border: 1px solid #000;
}HTML-код:
<div id="block-on-center">
<!-- здесь содержимое блока -->
</div>Размещаем вышеприведенный код в своем HTML документе не забывая про doctype, head, body, и другие элементы. Готово!
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Расположение текста по левому и правому краю на одной строке
Иногда возникает ситуация когда нужно расположить текст по левому и правому краю на одной строке. У меня такая ситуация, например, возникла при редактировании темы WordPress.
Решение данной задачи очень простое:
CSS код:
.alignleft {
float: left;
}
.alignright {
float: right;
}HTML код:
<div id="textbox">
<p class="alignleft">Текст слева</p>
<p class="alignright">Текст справа</p>
<div style="clear: both;"></div>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64