beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,167 +1,175 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
/* подсказка должна перекрывать другие элементы */
|
||||
|
||||
padding: 10px 20px;
|
||||
/* красивости... */
|
||||
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
var showingTooltip;
|
||||
|
||||
var showingTooltip;
|
||||
document.onmouseover = function(e) {
|
||||
var target = e.target;
|
||||
|
||||
document.onmouseover = function(e) {
|
||||
var target = e.target;
|
||||
// ВАЖНО: mouseover может сработать сразу на потомке
|
||||
// минуя родителя (при быстром движении мышью)
|
||||
|
||||
// ВАЖНО: mouseover может сработать сразу на потомке
|
||||
// минуя родителя (при быстром движении мышью)
|
||||
|
||||
// пройти вверх до первого элемента с data-tooltip
|
||||
while (target !== this) {
|
||||
var tooltip = target.getAttribute('data-tooltip');
|
||||
if (tooltip) break;
|
||||
target = target.parentNode;
|
||||
}
|
||||
// пройти вверх до первого элемента с data-tooltip
|
||||
while (target !== this) {
|
||||
var tooltip = target.getAttribute('data-tooltip');
|
||||
if (tooltip) break;
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if (!tooltip) return;
|
||||
if (!tooltip) return;
|
||||
|
||||
// показать и запомнить подсказку
|
||||
showingTooltip = showTooltip(tooltip, target);
|
||||
}
|
||||
|
||||
document.onmouseout = function() {
|
||||
// возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
|
||||
// но в этом случае сразу же будет и mouseover,
|
||||
// то есть подсказка будет уничтожена и тут же показана заново
|
||||
//
|
||||
// это лишние расходы, их можно избежать дополнительными проверками
|
||||
if (showingTooltip) {
|
||||
document.body.removeChild(showingTooltip);
|
||||
showingTooltip = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function showTooltip(text, elem) {
|
||||
var tooltipElem = document.createElement('div');
|
||||
tooltipElem.className = 'tooltip';
|
||||
tooltipElem.innerHTML = text;
|
||||
document.body.appendChild(tooltipElem);
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth)/2;
|
||||
if (left < 0) left = 0; // не вылезать за левую границу экрана
|
||||
|
||||
// не вылезать за верхнюю границу окна
|
||||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||||
if (top < 0) {
|
||||
top = coords.top + elem.offsetHeight + 5;
|
||||
}
|
||||
|
||||
tooltipElem.style.left = left + 'px';
|
||||
tooltipElem.style.top = top + 'px';
|
||||
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getCoords(elem) {
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
var body = document.body;
|
||||
var docEl = document.documentElement;
|
||||
|
||||
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
||||
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
||||
|
||||
var clientTop = docEl.clientTop || body.clientTop || 0;
|
||||
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
||||
|
||||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return { top: Math.round(top), left: Math.round(left) };
|
||||
}
|
||||
|
||||
function getPageScroll() {
|
||||
if (window.pageXOffset != undefined) {
|
||||
return {
|
||||
left: pageXOffset,
|
||||
top: pageYOffset
|
||||
// показать и запомнить подсказку
|
||||
showingTooltip = showTooltip(tooltip, target);
|
||||
}
|
||||
}
|
||||
|
||||
var html = document.documentElement;
|
||||
var body = document.body;
|
||||
document.onmouseout = function() {
|
||||
// возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
|
||||
// но в этом случае сразу же будет и mouseover,
|
||||
// то есть подсказка будет уничтожена и тут же показана заново
|
||||
//
|
||||
// это лишние расходы, их можно избежать дополнительными проверками
|
||||
if (showingTooltip) {
|
||||
document.body.removeChild(showingTooltip);
|
||||
showingTooltip = false;
|
||||
}
|
||||
|
||||
var top = html.scrollTop || body && body.scrollTop || 0;
|
||||
top -= html.clientTop;
|
||||
}
|
||||
|
||||
var left = html.scrollLeft || body && body.scrollLeft || 0;
|
||||
left -= html.clientLeft;
|
||||
|
||||
return { top: top, left: left };
|
||||
}
|
||||
function showTooltip(text, elem) {
|
||||
var tooltipElem = document.createElement('div');
|
||||
tooltipElem.className = 'tooltip';
|
||||
tooltipElem.innerHTML = text;
|
||||
document.body.appendChild(tooltipElem);
|
||||
|
||||
</script>
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var left = coords.left + (elem.offsetWidth - tooltipElem.offsetWidth) / 2;
|
||||
if (left < 0) left = 0; // не вылезать за левую границу экрана
|
||||
|
||||
// не вылезать за верхнюю границу окна
|
||||
var top = coords.top - tooltipElem.offsetHeight - 5;
|
||||
if (top < 0) {
|
||||
top = coords.top + elem.offsetHeight + 5;
|
||||
}
|
||||
|
||||
tooltipElem.style.left = left + 'px';
|
||||
tooltipElem.style.top = top + 'px';
|
||||
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getCoords(elem) {
|
||||
var box = elem.getBoundingClientRect();
|
||||
|
||||
var body = document.body;
|
||||
var docEl = document.documentElement;
|
||||
|
||||
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
||||
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
||||
|
||||
var clientTop = docEl.clientTop || body.clientTop || 0;
|
||||
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
||||
|
||||
var top = box.top + scrollTop - clientTop;
|
||||
var left = box.left + scrollLeft - clientLeft;
|
||||
|
||||
return {
|
||||
top: Math.round(top),
|
||||
left: Math.round(left)
|
||||
};
|
||||
}
|
||||
|
||||
function getPageScroll() {
|
||||
if (window.pageXOffset != undefined) {
|
||||
return {
|
||||
left: pageXOffset,
|
||||
top: pageYOffset
|
||||
}
|
||||
}
|
||||
|
||||
var html = document.documentElement;
|
||||
var body = document.body;
|
||||
|
||||
var top = html.scrollTop || body && body.scrollTop || 0;
|
||||
top -= html.clientTop;
|
||||
|
||||
var left = html.scrollLeft || body && body.scrollLeft || 0;
|
||||
left -= html.clientLeft;
|
||||
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать при прокрутке */
|
||||
}
|
||||
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
height: 2000px;
|
||||
/* подсказка должна работать при прокрутке */
|
||||
}
|
||||
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
#house {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
border: 1px solid brown;
|
||||
}
|
||||
|
||||
#roof {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 200px solid transparent;
|
||||
border-right: 200px solid transparent;
|
||||
border-bottom: 20px solid brown;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
margin: 10px 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
<div data-tooltip="Это – внутренность дома" id="house">
|
||||
<div data-tooltip="Это – крыша" id="roof"></div>
|
||||
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
<p>Жили-были на свете три поросёнка. Три брата.</p>
|
||||
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
<p>Все одинакового роста, кругленькие, розовые, с одинаковыми весёлыми хвостиками.</p>
|
||||
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
<p>Даже имена у них были похожи. Звали поросят Ниф-Ниф, Нуф-Нуф и Наф-Наф. Всё лето они кувыркались в зелёной траве, грелись на солнышке, нежились в лужах.</p>
|
||||
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
<p>Но вот наступила осень. <a href="http://ru.wikipedia.org/wiki/Три_поросёнка" data-tooltip="Читать дальше…">Наведи на меня</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,43 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="hoverIntent.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="elem" class="clock">
|
||||
<span class="hours">12</span>
|
||||
:
|
||||
<span class="minutes">30</span>
|
||||
:
|
||||
<span class="hours">12</span> :
|
||||
<span class="minutes">30</span> :
|
||||
<span class="seconds">00</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,44 +1,43 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="hoverIntent.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="elem" class="clock">
|
||||
<span class="hours">12</span>
|
||||
:
|
||||
<span class="minutes">30</span>
|
||||
:
|
||||
<span class="hours">12</span> :
|
||||
<span class="minutes">30</span> :
|
||||
<span class="seconds">00</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
var tooltip = document.createElement('div');
|
||||
tooltip.className = "tooltip";
|
||||
tooltip.innerHTML = "Подсказка";
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
new HoverIntent({
|
||||
elem: elem,
|
||||
over: function() {
|
||||
tooltip.style.left = this.getBoundingClientRect().left + 'px';
|
||||
tooltip.style.top = this.getBoundingClientRect().bottom + 5 + 'px';
|
||||
document.body.appendChild(tooltip);
|
||||
},
|
||||
out: function() {
|
||||
document.body.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,49 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<body>
|
||||
|
||||
|
||||
<table id="table">
|
||||
<tr>
|
||||
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nw"><strong>Northwest</strong>
|
||||
<br>Metal
|
||||
<br>Silver
|
||||
<br>Elders
|
||||
</td>
|
||||
<td class="n"><strong>North</strong>
|
||||
<br>Water
|
||||
<br>Blue
|
||||
<br>Change
|
||||
</td>
|
||||
<td class="ne"><strong>Northeast</strong>
|
||||
<br>Earth
|
||||
<br>Yellow
|
||||
<br>Direction
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w"><strong>West</strong>
|
||||
<br>Metal
|
||||
<br>Gold
|
||||
<br>Youth
|
||||
</td>
|
||||
<td class="c"><strong>Center</strong>
|
||||
<br>All
|
||||
<br>Purple
|
||||
<br>Harmony
|
||||
</td>
|
||||
<td class="e"><strong>East</strong>
|
||||
<br>Wood
|
||||
<br>Blue
|
||||
<br>Future
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sw"><strong>Southwest</strong>
|
||||
<br>Earth
|
||||
<br>Brown
|
||||
<br>Tranquility
|
||||
</td>
|
||||
<td class="s"><strong>South</strong>
|
||||
<br>Fire
|
||||
<br>Orange
|
||||
<br>Fame
|
||||
</td>
|
||||
<td class="se"><strong>Southeast</strong>
|
||||
<br>Wood
|
||||
<br>Green
|
||||
<br>Romance
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
|
||||
<div id="red"></div>
|
||||
</div>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
|
||||
<div id="red"></div>
|
||||
</div>
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,22 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
|
||||
|
||||
<div class="blue" onmouseover="mouselog(event)" onmouseout="mouselog(event)">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea id="text">mouseover [target: blue]
|
||||
mouseout [target: blue]
|
||||
mouseover [target: red]
|
||||
</textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
<textarea id="text">mouseover [target: blue] mouseout [target: blue] mouseover [target: red]
|
||||
</textarea>
|
||||
<input type="button" onclick="text.value=''" value="Очистить">
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="green">
|
||||
<div id="red">Тест</div>
|
||||
</div>
|
||||
|
||||
<input onclick="clearText()" value="Очистить" type="button">
|
||||
<input onclick="clearText()" value="Очистить" type="button">
|
||||
|
||||
<textarea id="text"></textarea>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="smiley-green">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="smiley-yellow">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="smiley-red">
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
<div class="left-eye"></div>
|
||||
<div class="right-eye"></div>
|
||||
<div class="smile"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<textarea id="log" style="width:400px;height:100px">Здесь будут события и relatedTarget
|
||||
</textarea>
|
||||
</textarea>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue