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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-07 19:26:10 +03:00
parent dceccedb58
commit 6ac9e3a500
182 changed files with 275 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

32
8-css-for-js/15-css-selectors/3-margin-between-pairs/index.html Normal file
View file

@ -0,0 +1,32 @@
<!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;
}
</style>
</head>
<body>
Текст вверху без отступа от списка.
<ul>
<li>Маша</li>
<li>Паша</li>
<li>Даша</li>
<li>Женя</li>
<li>Саша</li>
<li>Гоша</li>
</ul>
Текст внизу без отступа от списка.
</body>
</html>

26
8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.md Normal file
View file

@ -0,0 +1,26 @@
# Селектор
Для отступа между парами, то есть перед каждым нечётным элементом, можно использовать селектор [nth-child](http://css-tricks.ru/Articles/Details/HowNthChildWorks).
Селектор будет `li:nth-child(odd)`, к нему нужно ещё добавить отсечение первого элемента: `li:nth-child(odd):not(:first-child)`.
Можно поступить и по-другому: `li:nth-child(2n+3)` выберет все элементы для `n=0,1,2...`, то есть 3й, 5й и далее, те же, что и предыдущий селектор. Немного менее очевидно, зато короче.
# Правило
Отступ, размером в одну строку, при `line-height: 1.5` -- это `1.5em`.
Поставим отступ перед каждым *нечётным* элементом, кроме первого:
```css
li:nth-child(odd):not(:first-child) {
margin-top: 1.5em;
}
```
Получится так:
```html
<!--+ run src="index.html" -->
```

32
8-css-for-js/15-css-selectors/3-margin-between-pairs/solution.view/index.html Normal file
View file

@ -0,0 +1,32 @@
<!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;
}
</style>
</head>
<body>
Текст вверху без отступа от списка.
<ul>
<li>Маша</li>
<li>Паша</li>
<li>Даша</li>
<li>Женя</li>
<li>Саша</li>
<li>Гоша</li>
</ul>
Текст внизу без отступа от списка.
</body>
</html>

28
8-css-for-js/15-css-selectors/3-margin-between-pairs/source.view/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
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>
Текст внизу без отступа от списка.
</body>
</html>

37
8-css-for-js/15-css-selectors/3-margin-between-pairs/task.md Normal file
View file

@ -0,0 +1,37 @@
# Отступ между парами, размером со строку
[importance 4]
Есть список `UL/LI`.
```html
Текст вверху без отступа от списка.
<ul>
<li>Маша</li>
<li>Паша</li>
<li>Даша</li>
<li>Женя</li>
<li>Саша</li>
<li>Гоша</li>
</ul>
Текст внизу без отступа от списка.
```
Размеры шрифта и строки заданы стилем:
```css
body {
font: 14px/1.5 Georgia, serif;
}
```
**Сделайте, чтобы между каждой парой элементов был вертикальный отступ.**
<ul>
<li>Размер отступа: ровно 1 строка.</li>
<li>Нужно добавить только одно правило CSS, можно использовать CSS3.</li>
<li>Не должно быть лишних отступов сверху и снизу списка.</li>
</ul>
Результат:
[iframe src="solution" border=1 link]