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

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
03-more/11-css-for-js/04-float/01-inline-block-vs-float/gallery-float-diffsize.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

44
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution.md Normal file
View file

@ -0,0 +1,44 @@
# Наводящие вопросы
<ol>
<li>Что произойдёт, если контейнеру `UL` поставить рамку `border` -- в первом и во втором случае?</li>
<li>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</li>
<li>Как будут вести себя блоки, находящиеся под галереей?</ul>
</ol>
# Ответы
Разница колоссальная.
В первую очередь она в том, что `inline-block` продолжают участвовать в потоке, а `float` -- нет.
Ответы на вопросы по примеру:
<dl>
<dt>Что будет, если контейнеру `UL` поставить рамку `border`?</dt>
<dd>Контейнер не выделяет пространство под `float`. А больше там ничего нет. В результате он просто сожмётся в одну линию сверху.
Попробуйте сами, добавьте рамку в [edit src="solution"]песочнице[/edit].
А в случае с `inline-block` всё будет хорошо, т.к. элементы остаются в потоке.
</dd>
<dt>Что будет, если элементы `LI` различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?</dt>
<dd>При `float:left` элементы двигаются направо до тех пор, пока не наткнутся на границу внешнего блока (с учётом `padding`) или на другой `float`-элемент.
Может получиться вот так:
<img src="gallery-float-diffsize.png">
Вы можете увидеть это, открыв демо-галерею в отдельном окне и изменяя его размер:
[demo src="solution"]
При использовании `inline-block` таких странностей не будет, блоки перенесутся корректно на новую строку. И, кроме того, можно выровнять элементы по высоте при помощи `li { vertical-align:middle }`:
[iframe height=500 src="solution" link edit]
</dd>
<dt>Как будут вести себя блоки, находящиеся под галереей?</dt>
<dd>В случае с `float` нужно добавить дополнительную очистку с `clear`, чтобы поведение было идентично обычному блоку.
Иначе блоки, находящиеся под галереей, вполне могут "заехать" по вертикали на территорию галереи.</dd>
</dl>

1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}

1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-float-diffsize/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"gallery-float-diffsize","plunk":"muXiXpqrv6D1H1eMZTyX"}

75
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-float-diffsize/index.html Executable file
View file

@ -0,0 +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="http://js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>
</ul>
</body>
</html>

1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-float/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}

72
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-float/index.html Executable file
View file

@ -0,0 +1,72 @@
<!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="http://js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>
</ul>
</body>
</html>

1
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-inline-block/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"gallery-inline-block","plunk":"COpVO2ksZf8Y2yK68Ktp"}

63
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/gallery-inline-block/index.html Executable file
View file

@ -0,0 +1,63 @@
<!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="http://js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
</ul>
</body>
</html>

72
03-more/11-css-for-js/04-float/01-inline-block-vs-float/solution/index.html Executable file
View file

@ -0,0 +1,72 @@
<!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="http://js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>
</ul>
</body>
</html>

16
03-more/11-css-for-js/04-float/01-inline-block-vs-float/task.md Normal file
View file

@ -0,0 +1,16 @@
# Разница inline-block и float
[importance 5]
Галерея изображений состоит из картинок в рамках с подписями (возможно, с другой дополнительной информацией).
Пример галереи:
[iframe src="solution" link edit].
Технически вывод такой галереи можно реализовать при помощи списка UL/LI, где:
<ol>
<li>каждый LI имеет `display:inline-block`</li>
<li>каждый LI имеет `float:left`</li>
</ol>
**Какие различия между этими подходами? Какой вариант выбрали бы вы?**

3
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/solution.md Normal file
View file

@ -0,0 +1,3 @@
Для решения можно применить принцип двухколоночной верстки `float` + `margin`. Иконка будет левой колонкой, а содержимое -- правой.
[edit src="solution"/]

1
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"tree","plunk":"3oXkeuCyBNatBJNAAZKj"}

63
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/solution/index.html Executable file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.icon {
width: 16px;
height: 16px;
float: left;
}
.open .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/minus.gif);
}
.closed .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/plus.gif);
}
.leaf .icon {
cursor: text;
background: url(http://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>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>(занимает две строки)</div>
</li>
</ul>
</body>
</html>

1
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/solution/tree/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"tree","plunk":"3oXkeuCyBNatBJNAAZKj"}

63
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/solution/tree/index.html Executable file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.icon {
width: 16px;
height: 16px;
float: left;
}
.open .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/minus.gif);
}
.closed .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/plus.gif);
}
.leaf .icon {
cursor: text;
background: url(http://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>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>(занимает две строки)</div>
</li>
</ul>
</body>
</html>

20
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task.md Normal file
View file

@ -0,0 +1,20 @@
# Дерево с многострочными узлами
[importance 3]
Сделайте дерево при помощи семантической вёрстки и CSS-спрайта с иконками (есть готовый).
Выглядеть должно так (не кликабельно):
[iframe src="solution" border="1" height=200 link edit]
<ul>
<li>Поддержка многострочных названий узлов</li>
<li>Над иконкой курсор становится указателем.</li>
</ul>
Исходный документ содержит список UL/LI и ссылку на картинку.
[edit task src="task"/]
P.S. Достаточно сделать HTML/CSS-структуру, действия добавим позже.

1
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"tree-src","plunk":"eWXR21aaVq8oMFlJewKd"}

39
03-more/11-css-for-js/04-float/02-tree-with-multiline-nodes/task/index.html Executable file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* ваш стиль */
</style>
</head>
<body>
<!-- картинки для узлов -->
<img src="http://js.cx/sprite-tree/minus.gif" width="16" height="16">
<img src="http://js.cx/sprite-tree/plus.gif" width="16" height="16">
<img src="http://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>
</ul>
</li>
<li class="closed">
<div class="icon"></div>
<div class="text">Раздел 2<br>(занимает две строки)</div>
</li>
</ul>
</body>
</html>

BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-left.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/arrow-right.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

39
03-more/11-css-for-js/04-float/03-paginator-css/nav-div-wrong/index.html Executable file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.nav {
height: 40px;
width: 80%;
margin: auto;
}
.nav .left {
float: left;
border:1px solid black;
}
.nav .right {
float: right;
border:1px solid black;
}
.nav .pages {
text-align: center;
line-height: 40px;
border:1px solid black;
}
</style>
</head>
<body>
Текст Сверху
<div class="nav">
<img src="http://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="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
</div>
Текст Снизу
</body>
</html>

99
03-more/11-css-for-js/04-float/03-paginator-css/solution.md Normal file
View file

@ -0,0 +1,99 @@
HTML-структура:
```html
<div class="nav">
<img src="arrow-left.jpg" class="left" width="40" height="40">
<img src="arrow-right.jpg" class="right" width="40" height="40">
<ul class="pages"> <li>...</li> </ul>
</div>
```
Стили:
```css
.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;
}
```
Основные моменты:
<ul>
<li>**Сначала идёт левая кнопка, затем правая, а лишь затем -- текст.**
Почему так, а не лево - центр - право?
Дело в том, что `float` смещает элемент вправо относительно обычного места. А какое обычное место будет у правого `IMG` без `float`?
Оно будет под списком, так как список -- блочный элемент, а `IMG` -- инлайн-элемент. При добавлении `float:right` элемент `IMG` сдвинется вправо, оставшись под списком.
Код в порядке лево-центр-право (неправильный):
```html
<div...>
<img src="arrow-left.jpg" class="left" width="40" height="40">
<ul class="pages"> (li) 1 2 3 4 5 6 7 8 9</ul>
<img src="arrow-right.jpg" class="right" width="40" height="40">
</div>
```
Его демо:
[iframe src="nav-div-wrong" border=1 height="140"]
Правильный порядок: лево-право-центр, тогда `float` останется на верхней строке.
Код, который даёт правильное отображение:
```html
<div ...>
<img src="arrow-left.jpg" class="left" width="40" height="40">
<img src="arrow-right.jpg" class="right" width="40" height="40">
<ul class="pages"> .. список .. </ul>
</div>
```
Также можно расположить стрелки при помощи `position: absolute`. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки -- нужно добавить в контейнер левый и правый `padding`:
Выглядеть будет примерно так:
```html
<div style="position:relative; padding: 0 40px;">
<img style="position:absolute;left:0" src="..left.." width="40" height="40">
<ul> (li) 1 2 3 4 5 6 7 8 9 </ul>
<img style="position:absolute;right:0" srr="..right.." width="40" height="40">
</div>
```
</li>
<li>**Центрирование одной строки по вертикали осуществляется указанием `line-height`, равной высоте.**
Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две -- получается некрасиво, хотя и читаемо.
Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.</li>
</ul>
[edit src="solution"]Полное решение[/edit]

1
03-more/11-css-for-js/04-float/03-paginator-css/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"nav-div","plunk":"CoVT0ZW1UJ33PuKyIyjk"}

61
03-more/11-css-for-js/04-float/03-paginator-css/solution/index.html Executable file
View file

@ -0,0 +1,61 @@
<!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;
}
</style>
</head>
<body>
Текст Сверху
<div class="nav">
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="http://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>

1
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"nav-div","plunk":"CoVT0ZW1UJ33PuKyIyjk"}

61
03-more/11-css-for-js/04-float/03-paginator-css/solution/nav-div/index.html Executable file
View file

@ -0,0 +1,61 @@
<!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;
}
</style>
</head>
<body>
Текст Сверху
<div class="nav">
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="http://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>

19
03-more/11-css-for-js/04-float/03-paginator-css/task.md Normal file
View file

@ -0,0 +1,19 @@
# Постраничная навигация (CSS)
[importance 5]
Оформите навигацию, центрированную внутри `DIV'а`:
[iframe src="solution" height="100" border="1"]
Требования:
<ul>
<li>Левая стрелка -- слева, правая -- справа, список страниц -- по центру.</li>
<li>Список страниц центрирован вертикально.</li>
<li>Текст сверху и снизу ни на что не наползает.</li>
<li>Курсор при наведении на стрелку или элемент списка становится стрелкой `pointer`.</li>
</ul>
[edit src="task" task/]
P.S. Без использования таблиц.

1
03-more/11-css-for-js/04-float/03-paginator-css/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"nav-src","plunk":"6OneoKKw4jEaGQdyBJsQ"}

39
03-more/11-css-for-js/04-float/03-paginator-css/task/index.html Executable file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.nav {
height: 40px;
width: 80%;
margin: auto;
}
/* ваш код */
</style>
</head>
<body>
Текст Сверху
<div class="nav">
<img src="http://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>
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
</div>
Текст Снизу
</body>
</html>

41
03-more/11-css-for-js/04-float/04-add-border-keep-width/solution.md Normal file
View file

@ -0,0 +1,41 @@
# Подсказка
Используйте свойство `box-sizing`.
# Решение
Да, можно -- указываем `box-sizing: border-box` и добавляем свойства:
```html
<!--+ run -->
<style>
.left {
float:left;
width:30%;
background: #aef;
}
.right {
float:right;
width:70%;
*!*
box-sizing: border-box;
-moz-box-sizing: border-box;
border-left: 2px solid green;
padding-left: 10px;
*/!*
background: tan;
}
</style>
<div class="left">
Левая<br>Колонка
</div>
<div class="right">
Правая<br>Колонка<br>...
</div>
```

37
03-more/11-css-for-js/04-float/04-add-border-keep-width/task.md Normal file
View file

@ -0,0 +1,37 @@
# Добавить рамку, сохранив ширину
[importance 4]
Есть две колонки `30%/70%`:
```html
<!--+ autorun run play -->
<style>
.left {
float:left;
width:30%;
background: #aef;
}
.right {
float:right;
width:70%;
background: tan;
}
</style>
<div class="left">
Левая<br>Колонка
</div>
<div class="right">
Правая<br>Колонка<br>...
</div>
```
**Добавьте к правой колонке рамку `border-left` и отступ `padding-left`.**
Двухколоночная вёрстка при этом не должна сломаться!
Желательно не трогать свойство `width` ни слева ни справа и не создавать дополнительных элементов.
Требуется поддержка всех современных браузеров, IE начиная с версии 8.

468
03-more/11-css-for-js/04-float/article.md Normal file
View file

@ -0,0 +1,468 @@
# Свойство "float"
Свойство `float` в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании `float` станет вашим верным другом и помощником.
Далее мы рассмотрим, как работает `float`, разберём решения сопутствующих проблем, а также ряд полезных рецептов.
[cut]
## Как работает float [#float-algorithm]
Синтаксис:
```css
float: left | right | none | inherit;
```
При применении этого свойства происходит следующее:
<ol>
<li>Элемент позиционируется как обычно, а затем *вынимается из <strike>документа</strike> потока* и сдвигается влево (для `left`) или вправо (для `right`) до того как коснётся либо границы родителя, либо другого элемента с `float`.</li>
<li>Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.</li>
<li>Другие непозиционированные блочные элементы без `float` ведут себя так, как будто элемента с `float` нет, так как он убран из потока.</li>
<li>Строки (inline-элементы), напротив, "знают" о `float` и обтекают элемент по сторонам.</li>
</ol>
Ещё детали:
<ol>
<li>**Элемент при наличии `float` получает `display:block`.** То есть, указав элементу, у которого `display:inline` свойство `float: left/right`, мы автоматически сделаем его блочным. В частности, для него будут работать `width/height`.
Исключением являются некоторые редкие `display` наподобие `inline-table` и `run-in` (см. [Relationships between 'display', 'position', and 'float'](http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo))</li>
<li>**Ширина `float`-блока определяется по содержимому.** (["CSS 2.1, 10.3.5"](http://www.w3.org/TR/CSS2/visudet.html#float-width)).</li>
<li>**Вертикальные отступы `margin` элементов с `float` не сливаются с отступами соседей,** в отличие от обычных блочных элементов.</li>
</ol>
Это пока только теория. Далее мы рассмотрим происходящее на примере.
### Текст с картинками
Одно из первых применений `float`, для которого это свойство когда-то было придумано -- это вёрстка текста с картинками, отжатыми влево или вправо.
Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство `float`:
<img src="text.png">
Её HTML-код ([edit src="winnie"]открыть[/edit]) выглядит примерно так:
```html
<img src="1.jpg" style="float:right">
<p>Текст...</p>
<p>Текст...</p>
<img src="2.jpg" style="float:left">
<p>Текст...</p>
<img src="3.jpg" style="float:right">
<p>Текст...</p>
```
Каждая картинка, у которой есть `float`, обрабатывается в точности [по алгоритму](#float-algorithm), указанному выше.
Посмотрим, например, как выглядело бы начало текста без float:
[iframe src="winnie-nofloat" height=300 border=1 link edit]
<ol>
<li>Элемент `IMG` вынимается из <strike>документа</strike> потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):
[iframe src="winnie-nofloat-1" height=250 border=1 link edit]
</li>
<li>Элемент `IMG` сдвигается максимально вправо(при `float:right`):
[iframe src="winnie-nofloat-2" height=250 border=1 link edit]
</li>
<li>Строки, в отличие от блочных элементов, "чувствуют" `float` и уступают ему место, обтекая картинку слева:
[iframe src="winnie-nofloat-3" height=250 border=1 link edit]
</li>
</ol>
При `float:left` -- всё то же самое, только `IMG` смещается влево (или не смещается, если он и так у левого края), а строки -- обтекают справа
**Строки и инлайн-элементы смещаются, чтобы уступить место `float`. Обычные блоки -- ведут себя так, как будто элемента нет.**
Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:
[iframe src="winnie-block-bg" height=300 border=1 link edit]
Как видно из рисунка, параграфы проходят "за" `float`. При этом строки в них о `float'ах` знают и обтекают их, поэтому соответствующая часть параграфа пуста.
### Блок с float
Свойство `float` можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.
Посмотрим, как это работает, на конкретной задаче -- сделать рамку с названием вокруг картинки с Винни.
HTML будет такой:
```html
<h2>Винни-Пух</h2>
*!*
<div class="left-picture">
<img src="winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
*/!*
<p>Текст...</p>
```
..То есть, `div.left-picture` включает в себя картинку и заголовок к ней. Добавим стиль с `float`:
```css
.left-picture {
*!*
float: left;
*/!*
/* рамочка и отступ для красоты (не обязательно) */
margin: 0 10px 5px 0;
text-align: center;
border: 1px solid black;
}
```
Результат:
[iframe src="winnie-block" height=300 border=1 link edit]
Заметим, что блок `div.left-picture` "обернул" картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с `float` определяется по содержимому.
## Очистка под float
Разберём еще одну особенность использования свойства `float`.
Для этого выведем персонажей из мультфильма "Винни-Пух". Цель:
[iframe src="winnie-clear-3" height=600 border=1 link edit]
Реализуем её, шаг за шагом.
### Шаг 1. Добавляем информацию
Попробуем просто добавить Сову после Винни-Пуха:
```html
<h2>Винни-Пух</h2>
<div class="left">Картинка</div>
<p>..Текст о Винни..</p>
<h2>Сова</h2>
<div class="left">Картинка</div>
<p>..Текст о Сове..</p>
```
Результат [edit src="winnie-clear-1"]такого кода[/edit] будет странным, но предсказуемым:
[iframe src="winnie-clear-1" border="1" height=500 link edit]
Произошло следующее:
<ul>
<li>**Заголовок `<h2>Сова</h2>` не заметил `float`** (он же блочный элемент) и расположился сразу после предыдущего параграфа `<p>..Текст о Винни..</p>`.</li>
<li>После него идёт `float`-элемент -- картинка "Сова". Он был сдвинут влево. Согласно [алгоритму](#float-algorithm), он двигается до левой границы или до касания с другим `float`-элементом, что и произошло (картинка "Винни-Пух").</li>
<li>Так как у совы `float:left`, то **последующий текст обтекает её справа**.</li>
</ul>
### Шаг 2. Свойство clear
Мы, конечно же, хотели бы расположить заголовок "Сова" и остальную информацию ниже Винни-Пуха.
Для решения возникшей проблемы придумано свойство `clear`.
Синтаксис:
```css
clear: left | right | both;
```
Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся `float'ы` слева/справа/с обеих сторон.
Применим его к заголовку `H2`:
```css
h2 {
clear: left;
}
```
Результат [edit src="winnie-clear-2"]получившегося кода[/edit] будет ближе к цели, но всё еще не идеален:
<img src="float-small-margin.png">
Элементы теперь в нужном порядке. Но куда пропал отступ `margin-top` у заголовка "Сова"?
Теперь заголовок "Сова" прилегает снизу почти вплотную к картинке, с учётом её `margin-bottom`, но без своего большого отступа `margin-top`.
Таково поведение свойства `clear`. Оно сдвинуло элемент `h2` вниз ровно настолько, чтобы элементов `float` не было *сбоку от его верхней границы*.
Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ `margin-top` у заголовка по-прежнему есть, но он располагается "за" элементом `float` и не учитывается при работе в `clear`.
Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством `clear:both`. Тогда уже под ним отступ заголовка будет работать нормально:
```html
<h2>Винни-Пух</h2>
<div class="left">Картинка</div>
<p>Текст</p>
*!*
<div style="clear:both"></div>
*/!*
<h2>Сова</h2>
<div class="left">Картинка</div>
<p>Текст</p>
```
Результат [edit src="winnie-clear-3"]получившегося кода[/edit]:
[iframe src="winnie-clear-3" border="1" height=600 link edit]
<ul>
<li>Свойство `clear` гарантировало, что `<div style="clear:both">` будет под картинкой с `float`.</li>
<li>Заголовок `<h2>Сова</h2>` идёт после этого `<div>`. Так что его отступ учитывается.</li>
</ul>
## Заполнение блока-родителя
Итак, мы научились располагать другие элементы *под* `float`. Теперь рассмотрим следующую особенность.
**Из-за того, что блок с `float` удалён из потока, родитель не выделяет под него места.**
Например, выделим для информации о Винни-Пухе красивый элемент-контейнер `<div class="hero">`:
```html
<div class="hero">
<h2>Винни-Пух</h2>
<div class="left">Картинка</div>
<p>Текст.</p>
</div>
```
Стиль контейнера:
```css
.hero {
background: #D2B48C;
border: 1px solid red;
}
```
Результат [edit src="winnie-clear-4"]получившегося кода[/edit]:
[iframe src="winnie-clear-4" border="1" height=300 link edit]
Элемент с `float` оказался выпавшим за границу родителя `.hero`.
Чтобы этого не происходило, используют одну из следующих техник.
### Поставить родителю float
**Элемент с `float` обязан расшириться, чтобы вместить вложенные `float`.**
Поэтому, если это допустимо, то установка `float` контейнеру всё исправит:
```css
.hero {
background: #D2B48C;
border: 1px solid red;
*!*
float: left;
*/!*
}
```
[iframe src="winnie-clearfill-float" border="1" height=300 link edit]
Разумеется, не всегда можно поставить родителю `float`, так что смотрим дальше.
### Добавить в родителя элемент с clear
Добавим элемент `div style="clear:both"` в самый конец контейнера `.hero`.
Он с одной стороны будет "нормальным" элементом, в потоке, и контейнер будет обязан выделить под него пространство, с другой -- он знает о `float` и сместится вниз.
Соответственно, и контейнер вырастет в размере:
```html
<div class="hero">
<h2>Винни-Пух</h2>
<div class="left">Картинка</div>
<p>Текст.</p>
*!*
<div style="clear:both"></div>
*/!*
</div>
```
Результат -- правильное отображение, как и в примере выше. [edit src="winnie-clearfill-div"]Открыть код[/edit].
Единственный недостаток этого метода -- лишний HTML-элемент в разметке.
### Универсальный класс clearfix
Чтобы не добавлять в HTML-код лишний элемент, можно задать его через `:after`.
```css
.clearfix:after {
content: "."; /* добавить содержимое: "." */
display: block; /* сделать блоком, т.к. inline не может иметь clear */
clear: both; /* с обеих сторон clear */
visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
height: 0; /* сделать высоту 0, чтобы не занимал место */
}
```
Добавив этот класс к родителю, получим тот же результат, что и выше. [edit src="winnie-clearfill-clearfix"]Открыть код[/edit].
Псевдоселектор `:after` не поддерживается в IE<8, но для старых IE сработает другое свойство:
```css
.clearfix {
zoom: 1; /* спец-свойство IE */
}
```
### overflow:auto/hidden
Если добавить родителю `overflow: hidden` или `overflow: auto`, то всё станет хорошо.
```css
.hero {
*!*
overflow: auto;
*/!*
}
```
Этот метод работает во всех браузерах. [edit src="winnie-clearfill-overflow"]Открыть код[/edit].
Несмотря на внешнюю странность, этот способ не является "хаком". Такое поведение прописано в спецификации CSS.
Однако, установка `overflow` может привести к появлению полосы прокрутки, способ с дополнительным элементом (или `.clearfix:after`, если без IE<8) более безопасен.
## Еще применения float
Одно применение -- для верстки текста, мы уже видели. Рассмотрим ещё несколько.
### Галерея
При помощи `float` можно сделать галерею изображений:
```html
<ul class="gallery">
<li>
<img src="1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
...
</ul>
```
Стиль:
```css
.gallery li {
float: left;
width: 130px;
list-style: none;
}
```
Элементы `float:left` двигаются влево, а если это невозможно, то вниз, автоматически адаптируясь под ширину контейнера.
Результат:
[iframe src="gallery-float" border="1" height=550 link edit]
### Вёрстка в несколько колонок
Свойство `float` позволяет делать несколько вертикальных колонок.
### float:left + float:right
Например, для вёрстки в две колонки можно сделать два `<div>`. Первому указать `float:left` (левая колонка), а второму -- `float:right` (правая колонка).
Чтобы они не ссорились, каждой колонке нужно дополнительно указать ширину:
```html
<div>Шапка</div>
<div class="column-left">Левая колонка</div>
<div class="column-right">Правая колонка</div>
<div class="footer">Низ</div>
```
Стили:
```css
.column-left {
float: left;
width: 30%;
}
.column-right {
float: left;
width: 70%;
}
.footer {
clear: both;
}
```
Результат (добавлены краски):
[iframe src="two-columns" border="1" height=440 link edit]
В эту структуру легко добавить больше колонок с разной шириной. Правой колонке можно было бы указать и `float:right`.
### float + margin
Ещё вариант -- сделать `float` для левой колонки, а правую оставить в потоке, но с отбивкой через `margin`:
```css
.column-left {
float: left;
width: 30%;
}
.column-right {
margin-left: 30%;
}
.footer {
clear: both;
}
```
Результат (добавлены краски):
[iframe src="two-columns-2" border="1" height=440 link edit]
В примере выше -- показана небольшая проблема. Колонки не растягиваются до одинаковой высоты. Конечно, это не имеет значения, если фон одинаковый, но что, если он разный?
Технически, нет кросс-браузерного CSS-способа сделать, чтобы они растягивались. Есть различные обходы и трюки, которые позволяют обойти проблему в ряде ситуаций, но они выходят за рамки нашего обсуждения. Если интересно -- посмотрите, например, [Faux Columns](http://goodline.spb.ru/III-05-002.html).
Техник построения структуры страницы и колонок ("CSS layout") очень много. Более подробно вы можете с ними познакомиться в книгах и продвинутых статьях, либо просто придумать самому на основе того, как работает `float`.

BIN
03-more/11-css-for-js/04-float/float-small-margin.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

1
03-more/11-css-for-js/04-float/gallery-float/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"gallery-float","plunk":"XwI8ymszoonTImR6CwcY"}

72
03-more/11-css-for-js/04-float/gallery-float/index.html Executable file
View file

@ -0,0 +1,72 @@
<!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="http://js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>
</ul>
</body>
</html>

BIN
03-more/11-css-for-js/04-float/text.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 239 KiB

1
03-more/11-css-for-js/04-float/two-columns-2/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"two-columns-2","plunk":"X1QW1sWkIHNPSDAXjvH6"}

67
03-more/11-css-for-js/04-float/two-columns-2/index.html Executable file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
}
.column-right {
margin-left: 30%;
width: 70%;
overflow: auto; /* расшириться вниз захватить float'ы */
}
.footer {
clear: both;
}
.inner {
margin: 1em;
}
</style>
</head>
<body>
<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">
<h3>Винни-Пух</h3>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</div>
</div>
<div class="footer" style="background:yellow">Низ</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/two-columns/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"two-columns","plunk":"b5viwb7EJ2sgO2opygek"}

66
03-more/11-css-for-js/04-float/two-columns/index.html Executable file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
padding: 0;
}
.column-left {
float: left;
width: 30%;
}
.column-right {
float: left;
width: 70%;
overflow: auto; /* расшириться вниз захватить float'ы */
}
.footer {
clear: both;
}
.inner {
margin: 1em;
}
</style>
</head>
<body>
<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">
<h3>Винни-Пух</h3>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</div>
</div>
<div class="footer" style="background:yellow">Низ</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-block-bg/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-block-bg","plunk":"IgkCnUZ5R3q07tAb1WUw"}

36
03-more/11-css-for-js/04-float/winnie-block-bg/index.html Executable file
View file

@ -0,0 +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;
}
</style>
</head>
<body style="font-size:0.8em">
<h2>Винни-Пух</h2>
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-block/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-block","plunk":"VHBwLRdOKbdcEf9dTPPV"}

34
03-more/11-css-for-js/04-float/winnie-block/index.html Executable file
View file

@ -0,0 +1,34 @@
<!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;
}
</style>
</head>
<body style="font-size:0.8em">
<h2>Винни-Пух</h2>
<div class="left-picture">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века. </p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clear-1/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clear-1","plunk":"nuCWCfR2sJETGgyK2NJR"}

50
03-more/11-css-for-js/04-float/winnie-clear-1/index.html Executable file
View file

@ -0,0 +1,50 @@
<!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>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
<p>Говорит редко, но чрезвычайно мудро.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clear-2/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clear-2","plunk":"9VdfUYmAI6Ojap3pMzUk"}

51
03-more/11-css-for-js/04-float/winnie-clear-2/index.html Executable file
View file

@ -0,0 +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;
clear: left;
}
</style>
</head>
<body style="font-size:0.8em">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
<p>Говорит редко, но чрезвычайно мудро.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clear-3/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clear-3","plunk":"OXrPRNVOQLiGhKmnD8K6"}

51
03-more/11-css-for-js/04-float/winnie-clear-3/index.html Executable file
View file

@ -0,0 +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>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
<div style="clear:both"></div>
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>
<p>Персонаж мультфильма про Винни-Пуха. Очень умная.</p>
<p>Говорит редко, но чрезвычайно мудро.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clear-4/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clear-4","plunk":"cJnMu9ndC5OS2K0E4gSk"}

41
03-more/11-css-for-js/04-float/winnie-clear-4/index.html Executable file
View file

@ -0,0 +1,41 @@
<!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;
}
</style>
</head>
<body style="font-size:0.8em">
<div class="hero">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clearfill-clearfix","plunk":"ekQG0HiUM7WrjGehIwF4"}

55
03-more/11-css-for-js/04-float/winnie-clearfill-clearfix/index.html Executable file
View file

@ -0,0 +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;
}
</style>
</head>
<body style="font-size:0.8em">
<div class="hero clearfix">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clearfill-div/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clearfill-div","plunk":"9j96Inb15YprTuhiAaIx"}

43
03-more/11-css-for-js/04-float/winnie-clearfill-div/index.html Executable file
View file

@ -0,0 +1,43 @@
<!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;
}
</style>
</head>
<body style="font-size:0.8em">
<div class="hero">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clearfill-float/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clearfill-float","plunk":"iBSEKP29QXTk79KhvpV2"}

43
03-more/11-css-for-js/04-float/winnie-clearfill-float/index.html Executable file
View file

@ -0,0 +1,43 @@
<!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;
}
</style>
</head>
<body style="font-size:0.8em">
<div class="hero">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-clearfill-overflow","plunk":"azMzKhwmzWAlVZCT01pR"}

45
03-more/11-css-for-js/04-float/winnie-clearfill-overflow/index.html Executable file
View file

@ -0,0 +1,45 @@
<!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;
}
</style>
</head>
<body style="font-size:0.8em">
<div class="hero clearfix">
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге).</p>
<p>Один из самых известных героев детской литературы XX века.</p>
</div>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-nofloat-1/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-nofloat-1","plunk":"gkYdKEPbeIRvjy1QQ4Ky"}

26
03-more/11-css-for-js/04-float/winnie-nofloat-1/index.html Executable file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p { font-size: 80%; }
img {
border: 1px solid black;
opacity: 0.7;
}
</style>
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-nofloat-2/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-nofloat-2","plunk":"KI4RH5TmcIWZtAArfRsc"}

26
03-more/11-css-for-js/04-float/winnie-nofloat-2/index.html Executable file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p { font-size: 80%; }
img {
border: 1px solid black;
opacity: 0.7;
}
</style>
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-nofloat-3/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-nofloat-3","plunk":"4jEyVLdfipJu6dWwy8E5"}

25
03-more/11-css-for-js/04-float/winnie-nofloat-3/index.html Executable file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p { font-size: 80%; }
img {
border: 1px solid black;
}
</style>
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie-nofloat/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie-nofloat","plunk":"adGOyV1fE4ZlVXs5jGAu"}

25
03-more/11-css-for-js/04-float/winnie-nofloat/index.html Executable file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p { font-size: 80%; }
img {
border: 1px solid black;
}
</style>
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
</body>
</html>

1
03-more/11-css-for-js/04-float/winnie/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"winnie","plunk":"LULyE1f0OQIqrWWogTr6"}

47
03-more/11-css-for-js/04-float/winnie/index.html Executable file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img.right {
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>
<img src="http://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
<img src="http://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом, существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
<img src="http://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>
<p>Сценарий написал Хитрук в соавторстве с Заходером; работа соавторов не всегда шла гладко, что стало в конечном счёте причиной прекращения выпуска мультфильмов (первоначально планировалось выпустить сериал по всей книге). Текст и картинки взяты с Wikipedia.</p>
</body>
</html>