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

refactor 3-more into separate books

Browse source
This commit is contained in:
Ilya Kantor 2015-02-27 13:21:58 +03:00
parent bd1d5e4305
commit 87639b2740
423 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
12-css-for-js/6-css-center/1-center-ball-css/solution.md Normal file
View file

@ -0,0 +1,13 @@
Сместим мяч в центр при помощи `left/top=50%`, а затем приподымем его указанием `margin`:
```css
#ball {
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}
```
[edit src="solution"]Полный код решения[/edit]

31
12-css-for-js/6-css-center/1-center-ball-css/solution.view/index.html Normal file
View file

@ -0,0 +1,31 @@
<!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>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>

27
12-css-for-js/6-css-center/1-center-ball-css/source.view/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<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>
</body>
</html>

20
12-css-for-js/6-css-center/1-center-ball-css/task.md Normal file
View file

@ -0,0 +1,20 @@
# Поместите мяч в центр поля (CSS)
[importance 5]
Поместите мяч в центр поля при помощи CSS.
Исходный код:
[iframe height=200 src="source"]
Используйте CSS, чтобы поместить мяч в центр:
[iframe height=200 src="solution"]
<ul>
<li>CSS для центрирования может использовать размеры мяча.</li>
<li>CSS для центрирования не должен опираться на конкретный размер поля.</li>
</ul>
[edit src="source"]Исходный документ[/edit].