jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

45
8-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html
View file

@ -1,31 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>
</html>

37
8-css-for-js/6-css-center/1-center-ball-css/source.view/index.html
View file

@ -1,27 +1,30 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>
</html>

65
8-css-for-js/6-css-center/2-form-modal/solution.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
/* внешний DIV перекрывает всё окно */
#box {
position: fixed;
left: 0;
@ -12,8 +14,8 @@
height: 100%;
z-index: 999;
}
/* в нём находится полупрозрачный экран, на 20px меньше */
#box-inner {
position: absolute;
left: 20px;
@ -24,12 +26,19 @@
opacity: 0.3;
filter: alpha(opacity=30);
}
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
#box form {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
margin: auto; /* центрирование */
top: 0;
bottom: 0;
right: 0;
left: 0;
/* центрирование */
margin: auto;
/* центрирование */
height: 120px;
width: 300px;
border: 1px solid black;
@ -38,32 +47,48 @@
}
</style>
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<p>Текст Текст Текст</p>
<div id="box">
<div id="box-inner">
</div>
<div id="box">
<div id="box-inner">
</div>
<form>
Добро пожаловать!
<table>
<tr><td>Логин</td><td><input></td></tr>
<tr><td>Пароль</td><td><input></td></tr>
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
</table>
<form>
Добро пожаловать!
<table>
<tr>
<td>Логин</td>
<td>
<input>
</td>
</tr>
<tr>
<td>Пароль</td>
<td>
<input>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Войти">
</td>
</tr>
</table>
</form>
</form>
</div>
</div>
</body>
</html>
</html>

13
8-css-for-js/6-css-center/2-form-modal/source.view/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<p>Текст Текст Текст</p>
<img src="https://js.cx/clipart/key.png"/>
<img src="https://js.cx/clipart/key.png" />
</body>
</html>
</html>

9
8-css-for-js/6-css-center/vertical-align.view/index.html
View file

@ -1,13 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:
Картинка размером в <code>30px</code>, значения <code>vertical-align</code>:
<pre>
<pre>
baseline(по умолчанию) <img src="https://js.cx/clipart/30.png">
middle(по середине) <img src="https://js.cx/clipart/30.png" style="vertical-align: middle">
sub<sub>вровень с &lt;sub&gt;</sub> <img src="https://js.cx/clipart/30.png" style="vertical-align: sub">
@ -17,4 +19,5 @@ text-bottom(нижняя граница вровень с текстом) <img s
</pre>
</body>
</html>
</html>