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/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>