Добрый день! сегодня мы с вами разработаем тело диалогов. а это где будут отображатся все юзеры (кто онлайн).И так создадим папку dialogvk и в этой папке создадим файлы: style.css, index.html, и папка images.Зайдём в index.html и поместим вот такой код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Диалоги (в)контакте от "Вадима Кондакова"</title></head><body></body></html>Сохраняем, и после<title>Диалоги (в)контакте от "Вадима Кондакова"</title>вставляем:<link rel="stylesheet" href="style.css" type="text/css"/>Сохраним, и между тегами:<body></body>вставим:<script type='text/javascript'> /* Определяем тип браузера */ var ie = 0; var op = 0; var ff = 0; var browser = navigator.userAgent; if (browser.indexOf("Opera") != -1) op = 1; else { if (browser.indexOf("MSIE") != -1) ie = 1; else { if (browser.indexOf("Firefox") != -1) ff = 1; } } var block = document.getElementById("block"); delta_x = 0; delta_y = 0; /* Ставим обработчики событий на нажатие и отпускание клавиши мыши */ block.onmousedown = saveXY; if (op || ff) { block.addEventListener("onmousedown", saveXY, false); } document.onmouseup = clearXY; /* При нажатии кнопки мыши попадаем в эту функцию */ function saveXY(obj_event) { /* Получаем текущие координаты курсора */ if (obj_event) { x = obj_event.pageX; y = obj_event.pageY; } else { x = window.event.clientX; y = window.event.clientY; if (ie) { y -= 2; x -= 2; } } /* Узнаём текущие координаты блока */ x_block = block.offsetLeft; y_block = block.offsetTop; /* Узнаём смещение */ delta_x = x_block - x; delta_y = y_block - y; /* При движении курсора устанавливаем вызов функции moveWindow */ document.onmousemove = moveBlock; if (op || ff) document.addEventListener("onmousemove", moveBlock, false); } function clearXY() { document.onmousemove = null; // При отпускании мыши убираем обработку события движения мыши } function moveBlock(obj_event) { /* Получаем новые координаты курсора мыши */ if (obj_event) { x = obj_event.pageX; y = obj_event.pageY; } else { x = window.event.clientX; y = window.event.clientY; if (ie) { y -= 2; x -= 2; } } /* Вычисляем новые координаты блока */ new_x = delta_x + x; new_y = delta_y + y; block.style.top = new_y + "px"; block.style.left = new_x + "px"; }</script>теперь откроем файл style.css и вставим вот это:html { height:100%; }body { background: repeat center top #1F3147; height: 100%; margin:0px; padding:0px; word-wrap: break-word; font-family: tahoma; font-size:11px; overflow-x:hidden}сохраним. и откроем наш index.html и посмотрим перед собой тёмно-синий фон).и так теперь в style.css вставим:.block {cursor: move;position: fixed;z-index: 9999999;}.im_title_online {font-size: 1.09em;cursor: pointer;font-weight: bold;text-shadow: 0px 1px 0px #262626;color: white;}.im_close {display: block;background: black;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 0 2px #111;-webkit-box-shadow: 0 0 2px #111;box-shadow: 0 0 2px #111;padding: 3px;margin: 0 0 0 4px;visibility: hidden;opacity: 0.6;filter: alpha(opacity=60);visibility: visible;cursor: pointer;}.im_header {background: white;background:rgba(0, 0, 0, 0.75);width:220px;height: 388px; padding: 5px 10px 5px 10px;border-radius: 3px 3px 3px 3px;}.im_content {background: white;box-shadow: inset 0 0 3px #777;height: 307px;border-radius: 3px 3px 3px 3px;padding: 5px 8px 5px 8px;cursor: default;overflow:auto}.ims_content img {border-radius: 2px;float:left;margin-right:3px;width:30px}.ims_content a {color: #2B587A;text-decoration: none;padding: 0 0 0 8px;cursor: pointer;line-height: 2.72em;white-space: nowrap;display: block;width: 130px;-o-text-overflow: ellipsis;text-overflow: ellipsis;padding: 5px 2px 5px 2px;}.ims_content a:hover {background: none repeat scroll 0 0 rgba(219, 227, 235, 0.5);width:200px;padding: 5px 2px 5px 2px;border-radius: 3px 3px 3px 3px;}сохраняем и в index.html поместим:после:<body>добавляем:<div id="block" class="block"><div class="im_header"><div class="im_title_online">8 друзей онлайн<div class="im_close" style="float:right;"><img src="./images/close.png"></div><p><input type="text" style="color: rgb(119, 119, 119);border:0px;width: 200px;" placeholder="Начните вводить имя..."></div><div class="im_content"><div class="ims_content"><a><img src="http://cs307513.vk.me/v307513253/987a/_uUnuva59Co.jpg" />Кирилл Филинков</a><a><img src="http://cs403017.vk.me/v403017405/449e/SzTfQ-vU8Gw.jpg" />Денис Телешев</a><a><img src="http://cs406523.vk.me/v406523776/7b12/DR2mk_m0PmA.jpg" />Евгений Одинцов</a></div></div></div></div>сохраняем. и смотрим результати у нас получилось вот такое чудо:И теперь добавим в style.css:input[type=checkbox] { margin: 5px;}input,textarea { background: white; border: 1px solid #AAA; box-shadow: 0px 1px 0px white; -webkit-box-shadow: 0px 1px 0px white; -moz-box-shadow: 0px 1px 0px white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: inherit; font-size: 11px; line-height: 26px; color: #555555; font-size: 11px; padding: 0px 10px; height: 28px; position: relative; display: block; outline: none; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;}input.hidden,textarea.hidden { display: none;}input:focus,textarea:focus { border-color: rgba(34, 121, 204, 0.8) !important; outline: 0; outline: thin dotted \\9; box-shadow: inset 0 1px 1px rgba&
Делаем диалоги как вконтакте (Урок 01)
- Автор темы presebook
- Дата начала