beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,21 +8,22 @@
|
|||
margin: 0;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
|
||||
#placeholder {
|
||||
color: red;
|
||||
|
||||
margin: -1.3em 0 0 0.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>Добро пожаловать</div>
|
||||
<input type="password" id="input">
|
||||
<div>Добро пожаловать</div>
|
||||
<input type="password" id="input">
|
||||
|
||||
<div id="placeholder">Скажи пароль, друг</div>
|
||||
<div id="placeholder">Скажи пароль, друг</div>
|
||||
|
||||
<div>.. и заходи</div>
|
||||
<div>.. и заходи</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>Добро пожаловать</div>
|
||||
<div>Добро пожаловать</div>
|
||||
|
||||
<input type="password" id="input">
|
||||
<input type="password" id="input">
|
||||
|
||||
<div id="placeholder">Скажи пароль, друг</div>
|
||||
<div id="placeholder">Скажи пароль, друг</div>
|
||||
|
||||
<div>.. и заходи</div>
|
||||
<div>.. и заходи</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,41 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid blue;
|
||||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.8em 0;
|
||||
background: #aef;
|
||||
|
||||
position: relative;
|
||||
top: -1.3em;
|
||||
}
|
||||
div {
|
||||
border: 1px solid blue;
|
||||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.8em 0;
|
||||
background: #aef;
|
||||
position: relative;
|
||||
top: -1.3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h2>Общие положения</h2>
|
||||
<div>
|
||||
<h2>Общие положения</h2>
|
||||
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,40 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid blue;
|
||||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.8em 0;
|
||||
background: #aef;
|
||||
|
||||
margin-top: -1.3em; /* или изменить margin выше */
|
||||
}
|
||||
div {
|
||||
border: 1px solid blue;
|
||||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.8em 0;
|
||||
background: #aef;
|
||||
margin-top: -1.3em;
|
||||
/* или изменить margin выше */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h2>Общие положения</h2>
|
||||
<div>
|
||||
<h2>Общие положения</h2>
|
||||
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,32 +8,36 @@
|
|||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 { margin-bottom: 0; }
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<h2>Общие положения</h2>
|
||||
<hr class="margin">
|
||||
<h2>Общие положения</h2>
|
||||
<hr class="margin">
|
||||
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
<hr class="position">
|
||||
<div>
|
||||
<h2>Общие обязанности водителей</h2>
|
||||
<hr class="position">
|
||||
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,34 +8,45 @@
|
|||
margin: 2em;
|
||||
font: .8em/1.25 Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 { margin-bottom: 0; }
|
||||
hr.margin { margin-left: -2em; }
|
||||
hr.position { position: relative; left: -2em; }
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr.margin {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
hr.position {
|
||||
position: relative;
|
||||
left: -2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<h2>Общие положения (hr.margin)</h2>
|
||||
<hr class="margin">
|
||||
<h2>Общие положения (hr.margin)</h2>
|
||||
<hr class="margin">
|
||||
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
<p>Настоящие Правила дорожного движения устанавливают единый порядок дорожного движения на всей территории Российской Федерации. Другие нормативные акты, касающиеся дорожного движения, должны основываться на требованиях Правил и не противоречить им.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Общие обязанности водителей (hr.position)</h2>
|
||||
<hr class="position">
|
||||
<div>
|
||||
<h2>Общие обязанности водителей (hr.position)</h2>
|
||||
<hr class="position">
|
||||
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Водитель механического транспортного средства обязан иметь при себе и по требованию сотрудников милиции передавать им для проверки:</p>
|
||||
<ul>
|
||||
<li>водительское удостоверение на право управления транспортным средством соответствующей категории;</li>
|
||||
<li>...и так далее...</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.content {
|
||||
background: #aef;
|
||||
padding: 1em 2em 2em 2em;
|
||||
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
|
||||
|
||||
.comment {
|
||||
margin: 0 1em;
|
||||
padding: .2em;
|
||||
|
|
@ -19,23 +19,22 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div>У DIV'а с холодильниками стоит margin-bottom: -1em</div>
|
||||
<div>У DIV'а с холодильниками стоит margin-bottom: -1em</div>
|
||||
|
||||
<div class="content">
|
||||
Наши холодильники - самые лучшие холодильники в мире!
|
||||
Наши холодильники - самые лучшие холодильники в мире!
|
||||
Наши холодильники - самые лучшие холодильники в мире!
|
||||
Наши холодильники - самые лучшие холодильники в мире!
|
||||
</div>
|
||||
<div class="content">
|
||||
Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире! Наши холодильники - самые лучшие холодильники в мире!
|
||||
</div>
|
||||
|
||||
<span class="comment">
|
||||
<span class="comment">
|
||||
Так считают: 5 человек
|
||||
</span>
|
||||
|
||||
<span class="comment">
|
||||
<span class="comment">
|
||||
Оставьте <u>свой</u> отзыв!
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,23 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style>
|
||||
* { margin: 0; padding: 0; }
|
||||
img { display: block; }
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; font-size:120%">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; font-size:120%">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
p<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
p<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; line-height: 1px">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid; line-height: 1px">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,20 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style> * { margin: 0; padding: 0; } </style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="border:1px red solid">
|
||||
<img src="https://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,35 +8,37 @@
|
|||
border: 1px solid black;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
.toggler {
|
||||
height: 100%;
|
||||
background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
|
||||
border-right: #AAA 1px solid;
|
||||
width: 30px;
|
||||
float: left;
|
||||
margin-le
|
||||
cursor: pointer;
|
||||
margin-le cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
.toggler {
|
||||
height: 100%;
|
||||
background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
|
||||
|
|
@ -15,26 +16,29 @@
|
|||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,11 +8,11 @@
|
|||
border: 1px solid black;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
|
||||
.toggler {
|
||||
height: 100%;
|
||||
background: #EEE url(https://js.cx/height-percent/arrow_left.png) center center no-repeat;
|
||||
|
|
@ -22,21 +23,25 @@
|
|||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<div class="container">
|
||||
<div class="toggler"></div>
|
||||
<div class="content">
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,76 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
// тестовая функция для селекторов
|
||||
// проверяет, чтобы элементов по селектору selector было ровно count
|
||||
function test(selector, count) {
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
<script>
|
||||
// тестовая функция для селекторов
|
||||
// проверяет, чтобы элементов по селектору selector было ровно count
|
||||
function test(selector, count) {
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
if (!ok) alert(selector + ": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
// ------------- селекторы --------------
|
||||
// ------------- селекторы --------------
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('input[type="checkbox"]', 1);
|
||||
// Выбрать input типа checkbox
|
||||
test('input[type="checkbox"]', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('input[type="checkbox"]:not(:checked)', 1);
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('input[type="checkbox"]:not(:checked)', 1);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('[id|="message"]', 6);
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('[id|="message"]', 6);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('[id^="message-"]', 5);
|
||||
// Найти все элементы с id=message-*
|
||||
test('[id^="message-"]', 5);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('a[href$=".zip"]', 1);
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('a[href$=".zip"]', 1);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('[data-action~="delete"]', 2);
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('[data-action~="delete"]', 2);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержащит delete в списке (через пробел)
|
||||
test('[data-action]:not([data-action~="delete"])', 1);
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержащит delete в списке (через пробел)
|
||||
test('[data-action]:not([data-action~="delete"])', 1);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('#messages li:nth-child(2n)', 3);
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('#messages li:nth-child(2n)', 3);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title + *', 1);
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title + *', 1);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title ~ a', 2);
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title ~ a', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('#messages li:last-child a', 1);
|
||||
</script>
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('#messages li:last-child a', 1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,84 +1,87 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
/**
|
||||
* Функция test(selector, count) находит элементы по селектору
|
||||
* и сравнивает их число с count.
|
||||
*
|
||||
* Иными словами, вызовы ниже проверяют,
|
||||
* что число элементов по селектору - правильное
|
||||
**/
|
||||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||||
|
||||
/**
|
||||
* Функция test(selector, count) находит элементы по селектору
|
||||
* и сравнивает их число с count.
|
||||
*
|
||||
* Иными словами, вызовы ниже проверяют,
|
||||
* что число элементов по селектору - правильное
|
||||
**/
|
||||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||||
// Выбрать input типа checkbox
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('...', 1);
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('...', 1);
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('...', 6);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('...', 6);
|
||||
// Найти все элементы с id=message-*
|
||||
test('...', 5);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('...', 5);
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('...', 1);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('...', 1);
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('...', 2);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('...', 2);
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержит delete в списке (через пробел)
|
||||
test('...', 1);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержит delete в списке (через пробел)
|
||||
test('...', 1);
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('...', 3);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('...', 3);
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 1);
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 2);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('...', 1);
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('...', 1);
|
||||
|
||||
|
||||
function test(selector, count) {
|
||||
if (selector === '...') return;
|
||||
function test(selector, count) {
|
||||
if (selector === '...') return;
|
||||
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
</script>
|
||||
if (!ok) alert(selector + ": " + elems.length + " != " + count);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,28 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,28 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,38 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
|
||||
dt:nth-of-type(2n) {
|
||||
/* чётные dt (соседи с другими тегами игнорируются) */
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
|
||||
dd:nth-last-of-type(2) {
|
||||
/* второй dd снизу */
|
||||
|
||||
color: red;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<dl>
|
||||
<dt>Первый dt</dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Третий dt</dt>
|
||||
<dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
|
||||
<dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Первый dt</dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Третий dt</dt>
|
||||
<dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
|
||||
<dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
|
||||
li:nth-child(2n) { /* чётные */
|
||||
li:nth-child(2n) {
|
||||
/* чётные */
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
li:nth-child(3) { /* 3-ий потомок */
|
||||
|
||||
li:nth-child(3) {
|
||||
/* 3-ий потомок */
|
||||
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li>Древнерусский язык</li>
|
||||
<li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
|
||||
<li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
|
||||
<li>Украинский язык <code>li:nth-child(2n)</code></li>
|
||||
<li>Белорусский язык</li>
|
||||
<li>Другие языки <code>li:nth-child(2n)</code></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Древнерусский язык</li>
|
||||
<li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
|
||||
<li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
|
||||
<li>Украинский язык <code>li:nth-child(2n)</code></li>
|
||||
<li>Белорусский язык</li>
|
||||
<li>Другие языки <code>li:nth-child(2n)</code></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,59 +1,71 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
#languages li {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#languages > li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#e-slavic { font-style: italic; }
|
||||
#e-slavic ~ li {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#latvian { font-style: italic; }
|
||||
|
||||
#latvian * { font-style: normal }
|
||||
#latvian + li {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
#languages li {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#languages > li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#e-slavic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#e-slavic ~ li {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#latvian {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#latvian * {
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
#latvian + li {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h3>Балтославянские языки</h3>
|
||||
<h3>Балтославянские языки</h3>
|
||||
|
||||
<ol id="languages">
|
||||
<li>Славянские языки
|
||||
<ol>
|
||||
<li>Славянские микроязыки</li>
|
||||
<li>Праславянский язык</li>
|
||||
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
|
||||
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li> ... <code>#e-slavic ~ li</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Балтийские языки
|
||||
<ol>
|
||||
<li>Литовский язык</li>
|
||||
<li id="latvian">Латышский язык <code>#latvian</code>
|
||||
<ol><li>Латгальский язык <code>#latvian *</code></li></ol>
|
||||
</li>
|
||||
<li>Прусский язык <code>#latvian + li </code></li>
|
||||
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol id="languages">
|
||||
<li>Славянские языки
|
||||
<ol>
|
||||
<li>Славянские микроязыки</li>
|
||||
<li>Праславянский язык</li>
|
||||
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
|
||||
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li> ... <code>#e-slavic ~ li</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Балтийские языки
|
||||
<ol>
|
||||
<li>Литовский язык</li>
|
||||
<li id="latvian">Латышский язык <code>#latvian</code>
|
||||
<ol>
|
||||
<li>Латгальский язык <code>#latvian *</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Прусский язык <code>#latvian + li </code></li>
|
||||
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 48px;
|
||||
|
|
@ -11,24 +11,26 @@
|
|||
outline: 1px dotted black;
|
||||
background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -13,13 +14,14 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="rss"></div>
|
||||
Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
|
||||
Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
|
||||
<div class="rss"></div>
|
||||
Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость Очень интересная новость
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 48px;
|
||||
|
|
@ -11,24 +11,26 @@
|
|||
outline: 1px dotted black;
|
||||
background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -11,24 +11,26 @@
|
|||
outline: 1px dotted black;
|
||||
background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Пример раздела</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.open .icon {
|
||||
cursor: pointer;
|
||||
background: url(https://js.cx/sprite-tree/minus.gif);
|
||||
}
|
||||
|
||||
|
||||
.closed .icon {
|
||||
cursor: pointer;
|
||||
background: url(https://js.cx/sprite-tree/plus.gif);
|
||||
}
|
||||
|
||||
|
||||
.leaf .icon {
|
||||
cursor: text;
|
||||
background: url(https://js.cx/sprite-tree/article.gif);
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>В две строки</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1 в одну строку</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br> в две строки</div>
|
||||
</li>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1
|
||||
<br>В две строки</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1 в одну строку</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2
|
||||
<br> в две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2
|
||||
<br>В две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>В две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,64 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
background: url(https://js.cx/sprite-tree/icons.gif) no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.open .icon {
|
||||
background-position: 0 -16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.closed .icon {
|
||||
background-position: 0 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.leaf .icon {
|
||||
background-position: 0 -32px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>В две строки</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1 в одну строку</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br> в две строки</div>
|
||||
</li>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1
|
||||
<br>В две строки</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1 в одну строку</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2
|
||||
<br> в две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2
|
||||
<br>В две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>В две строки</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,75 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
.gallery li:nth-child(2n) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
||||
.gallery li:nth-child(2n) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,72 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,63 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.open .icon {
|
||||
cursor: pointer;
|
||||
background: url(https://js.cx/sprite-tree/minus.gif);
|
||||
}
|
||||
|
||||
|
||||
.closed .icon {
|
||||
cursor: pointer;
|
||||
background: url(https://js.cx/sprite-tree/plus.gif);
|
||||
}
|
||||
|
||||
|
||||
.leaf .icon {
|
||||
cursor: text;
|
||||
background: url(https://js.cx/sprite-tree/article.gif);
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1
|
||||
<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2
|
||||
<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2
|
||||
<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,39 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* ваш стиль */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- картинки для узлов -->
|
||||
<img src="https://js.cx/sprite-tree/minus.gif" width="16" height="16">
|
||||
<img src="https://js.cx/sprite-tree/plus.gif" width="16" height="16">
|
||||
<img src="https://js.cx/sprite-tree/article.gif" width="16" height="16">
|
||||
<!-- картинки для узлов -->
|
||||
<img src="https://js.cx/sprite-tree/minus.gif" width="16" height="16">
|
||||
<img src="https://js.cx/sprite-tree/plus.gif" width="16" height="16">
|
||||
<img src="https://js.cx/sprite-tree/article.gif" width="16" height="16">
|
||||
|
||||
|
||||
<ul>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
<li class="open">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1
|
||||
<br>(занимает две строки)</div>
|
||||
<ul>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 1.1</div>
|
||||
</li>
|
||||
<li class="leaf">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Страница 1.2
|
||||
<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2
|
||||
<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="closed">
|
||||
<div class="icon"></div>
|
||||
<div class="text">Раздел 2<br>(занимает две строки)</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -8,32 +9,36 @@
|
|||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
border:1px solid black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
border:1px solid black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border:1px solid black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<div class="pages">1 2 3 4 5 6 7 8 9</div>
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<div class="pages">1 2 3 4 5 6 7 8 9</div>
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
|
||||
Текст Снизу
|
||||
Текст Снизу
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,61 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav .pages li {
|
||||
display: inline;
|
||||
margin: 0 3px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav {
|
||||
height: 40px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.nav .left {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .right {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav .pages {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav .pages li {
|
||||
display: inline;
|
||||
margin: 0 3px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Текст Снизу
|
||||
Текст Снизу
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -11,29 +12,30 @@
|
|||
/* ваш код */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст Сверху
|
||||
Текст Сверху
|
||||
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
<div class="nav">
|
||||
<img src="https://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
|
||||
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
<ul class="pages">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
<li>7</li>
|
||||
<li>8</li>
|
||||
<li>9</li>
|
||||
</ul>
|
||||
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
Текст Снизу
|
||||
<img src="https://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
|
||||
</div>
|
||||
Текст Снизу
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,72 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.gallery li {
|
||||
float: left;
|
||||
width: 130px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
/* красивости */
|
||||
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
<ul class="gallery">
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/1.png" width="130" height="130">
|
||||
<div>Картинка 1</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/2.png" width="130" height="130">
|
||||
<div>Картинка 2</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/3.png" width="130" height="130">
|
||||
<div>Картинка 3</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/4.png" width="130" height="130">
|
||||
<div>Картинка 4</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/5.png" width="130" height="130">
|
||||
<div>Картинка 5</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/6.png" width="130" height="130">
|
||||
<div>Картинка 6</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/7.png" width="130" height="130">
|
||||
<div>Картинка 7</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/8.png" width="130" height="130">
|
||||
<div>Картинка 8</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://js.cx/carousel/9.png" width="130" height="130">
|
||||
<div>Картинка 9</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,67 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="background:yellow">Шапка</div>
|
||||
<div style="background:yellow">Шапка</div>
|
||||
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner"> <!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner">
|
||||
<!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,66 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
|
||||
.column-right {
|
||||
float: left;
|
||||
width: 70%;
|
||||
overflow: auto; /* расшириться вниз захватить float'ы */
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="background:yellow">Шапка</div>
|
||||
<div style="background:yellow">Шапка</div>
|
||||
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner"> <!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
<div class="column-left" style="background:#aef">
|
||||
<div class="inner">
|
||||
<!-- див для отступа внутри ширины родителя -->
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
<h3>Винни-Пух</h3>
|
||||
<div class="column-right" style="background:tan">
|
||||
<div class="inner">
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
<div class="footer" style="background:yellow">Низ</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
|
||||
/* рамочка и центрирование */
|
||||
margin: 0 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
p {
|
||||
background: #aef;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
/* рамочка и центрирование */
|
||||
|
||||
margin: 0 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
p {
|
||||
background: #aef;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
|
||||
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
|
||||
/* рамочка и центрирование */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
/* рамочка и центрирование */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left-picture">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left-picture">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века. </p>
|
||||
<p>Один из самых известных героев детской литературы XX века. </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<h2>Сова</h2>
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<h2>Сова</h2>
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
<h2>Сова</h2>
|
||||
<div style="clear:both"></div>
|
||||
<h2>Сова</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/owl-mult.jpg" width="200" height="233">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
|
||||
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
<p>Говорит редко, но чрезвычайно мудро.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,41 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,55 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero clearfix">
|
||||
<div class="hero clearfix">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,43 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,43 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,45 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
|
||||
/* для красоты */
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 200px;
|
||||
/* для красоты */
|
||||
|
||||
margin: 5px 10px 5px 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #D2B48C;
|
||||
border: 1px solid red;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-size:0.8em">
|
||||
|
||||
<div class="hero clearfix">
|
||||
<div class="hero clearfix">
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
<div class="left">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из советского мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
|
||||
|
||||
<p>Один из самых известных героев детской литературы XX века.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,25 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,25 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
p { font-size: 80%; }
|
||||
|
||||
p {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -7,41 +8,42 @@
|
|||
float: right;
|
||||
margin: 5px 0 5px 10px;
|
||||
}
|
||||
|
||||
|
||||
img.left {
|
||||
float: left;
|
||||
margin: 5px 10px 5px 0;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Винни-Пух</h2>
|
||||
<h2>Винни-Пух</h2>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
|
||||
<img src="https://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
|
||||
|
||||
<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом, существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
|
||||
<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом,
|
||||
существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
|
||||
|
||||
<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
|
||||
<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
|
||||
|
||||
|
||||
<img src="https://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
|
||||
<img src="https://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
|
||||
|
||||
<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
|
||||
<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
|
||||
|
||||
<p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
|
||||
<p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,45 +1,53 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* модальный DIV, который всё перекрывает */
|
||||
|
||||
#box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999; /* нужно если в документе есть элементы с z-index > 0 */
|
||||
|
||||
z-index: 999;
|
||||
/* нужно если в документе есть элементы с z-index > 0 */
|
||||
|
||||
background: #aef;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p, button { margin: 35px; }
|
||||
|
||||
p,
|
||||
button {
|
||||
margin: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="box"></div>
|
||||
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,39 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* модальный DIV, который всё перекрывает */
|
||||
|
||||
#box {
|
||||
/* ...ваш стиль... */
|
||||
|
||||
background: #aef;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
p, button { margin: 35px; }
|
||||
|
||||
p,
|
||||
button {
|
||||
margin: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="box"></div>
|
||||
<div id="box"></div>
|
||||
|
||||
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
<p>Текст Текст Текст</p>
|
||||
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="height:2000px">
|
||||
<div style="background:#aef;text-align:center">Прокрутите меня...</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>вровень с <sub></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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue