diff --git a/1-1/index.html b/1-1/index.html new file mode 100644 index 0000000..733fee0 --- /dev/null +++ b/1-1/index.html @@ -0,0 +1,25 @@ + + + + + 1.1 + + + +
1
+
2
+
+
3
+
+ + + + +
+
4
+
+
+
5
+
+ + \ No newline at end of file diff --git a/1-1/style.css b/1-1/style.css new file mode 100644 index 0000000..14a947b --- /dev/null +++ b/1-1/style.css @@ -0,0 +1,31 @@ +body { + margin: 0; +} + +.box { + box-sizing: border-box; + width: 100px; + height: 100px; + border: 1px solid black; + background-color: silver; +} + +.box.v1 { margin: auto; } + +.box.v2{ + position: relative; + left: 50%; + margin-left: -50px; +} + +.wrap3 { text-align: center; } +.box.v3 { display: inline-block; } + +table { width: 100%; } + +.wrap5 { + float: right; + width: 50%; +} + +.box.v5 { margin-left: -50px; } \ No newline at end of file diff --git a/1-2/index.html b/1-2/index.html new file mode 100644 index 0000000..289cd7a --- /dev/null +++ b/1-2/index.html @@ -0,0 +1,19 @@ + + + + + 1.2 + + + +
+
Выровнять элемент с высотой 100px и шириной по содержимому (какой-нибудь текст) по центру страницы по горизонтали всеми возможными способами.
+
+
+
Выровнять элемент с высотой 100px и шириной по содержимому (какой-нибудь текст) по центру страницы по горизонтали всеми возможными способами.
+
+
+
Выровнять элемент с высотой 100px и шириной по содержимому (какой-нибудь текст) по центру страницы по горизонтали всеми возможными способами.
+
+ + \ No newline at end of file diff --git a/1-2/style.css b/1-2/style.css new file mode 100644 index 0000000..c7e6d34 --- /dev/null +++ b/1-2/style.css @@ -0,0 +1,29 @@ +body { + margin: 0; +} + +.box { + box-sizing: border-box; + height: 100px; + border: 1px solid black; + background-color: silver; +} + +.wrap1 { text-align: center; } +.box.v1 { display: inline-block; } + +.wrap2 { text-align: center; } +.box.v2{ + display: table; + margin: auto; +} + +.wrap3 { + position: relative; + left: 50%; + float: left; +} +.box.v3{ + position: relative; + right: 50%; +} \ No newline at end of file diff --git a/2-1/2-1_v1.css b/2-1/2-1_v1.css new file mode 100644 index 0000000..31eb359 --- /dev/null +++ b/2-1/2-1_v1.css @@ -0,0 +1,16 @@ +html, body { + margin: 0; + height: 100%; +} + +aside { + float: left; + width: 300px; + height: 100%; + background-color: gray; +} + +article { + height: 100%; + background-color: silver; +} \ No newline at end of file diff --git a/2-1/2-1_v1.html b/2-1/2-1_v1.html new file mode 100644 index 0000000..8911527 --- /dev/null +++ b/2-1/2-1_v1.html @@ -0,0 +1,12 @@ + + + + + 2-1_v1 + + + + +
+ + \ No newline at end of file diff --git a/2-1/2-1_v2.css b/2-1/2-1_v2.css new file mode 100644 index 0000000..4c51015 --- /dev/null +++ b/2-1/2-1_v2.css @@ -0,0 +1,19 @@ +html, body { + margin: 0; + height: 100%; +} + +aside { + position: absolute; + width: 300px; + height: 100%; + background-color: gray; +} + +article { + position: absolute; + right: 0; + left: 300px; + height: 100%; + background-color: silver; +} \ No newline at end of file diff --git a/2-1/2-1_v2.html b/2-1/2-1_v2.html new file mode 100644 index 0000000..5cab0de --- /dev/null +++ b/2-1/2-1_v2.html @@ -0,0 +1,12 @@ + + + + + 2.1_v2 + + + + +
+ + \ No newline at end of file diff --git a/2-2/index.html b/2-2/index.html new file mode 100644 index 0000000..98e785f --- /dev/null +++ b/2-2/index.html @@ -0,0 +1,12 @@ + + + + + 2.2 + + + + +
2
+ + \ No newline at end of file diff --git a/2-2/style.css b/2-2/style.css new file mode 100644 index 0000000..021a72c --- /dev/null +++ b/2-2/style.css @@ -0,0 +1,19 @@ +html, body { + margin: 0; + height: 100%; + background-color: gray; +} + +aside { + float: left; + width: 25%; + height: 100%; + max-width: 300px; + min-width: 150px; + background-color: gray; +} + +article { + height: 100%; + background-color: silver; +} \ No newline at end of file diff --git a/3-1_bonus/3-1_v1.css b/3-1_bonus/3-1_v1.css new file mode 100644 index 0000000..aa46994 --- /dev/null +++ b/3-1_bonus/3-1_v1.css @@ -0,0 +1,22 @@ +html, body { + margin: 0; + height: 100%; +} + +.box { + box-sizing: border-box; + width: 100px; + height: 100px; + border: 1px solid black; + background-color: silver; +} + +.wrap { + display: table; + margin: auto; + height: 100%; +} +.cell { + display: table-cell; + vertical-align: middle; +} \ No newline at end of file diff --git a/3-1_bonus/3-1_v1.html b/3-1_bonus/3-1_v1.html new file mode 100644 index 0000000..476602c --- /dev/null +++ b/3-1_bonus/3-1_v1.html @@ -0,0 +1,15 @@ + + + + + 3-1_v1 (bonus) + + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/3-1_bonus/3-1_v2.css b/3-1_bonus/3-1_v2.css new file mode 100644 index 0000000..862983c --- /dev/null +++ b/3-1_bonus/3-1_v2.css @@ -0,0 +1,17 @@ +html, body { + margin: 0; + height: 100%; +} + +.box { + position: absolute; + top: 50%; + left: 50%; + box-sizing: border-box; + margin-top: -50px; + margin-left: -50px; + width: 100px; + height: 100px; + border: 1px solid black; + background-color: silver; +} \ No newline at end of file diff --git a/3-1_bonus/3-1_v2.html b/3-1_bonus/3-1_v2.html new file mode 100644 index 0000000..7dce096 --- /dev/null +++ b/3-1_bonus/3-1_v2.html @@ -0,0 +1,11 @@ + + + + + 3-1_v2 (bonus) + + + +
+ + \ No newline at end of file diff --git a/3-1_bonus/3-1_v3.css b/3-1_bonus/3-1_v3.css new file mode 100644 index 0000000..bf13639 --- /dev/null +++ b/3-1_bonus/3-1_v3.css @@ -0,0 +1,21 @@ +html, body { + margin: 0; + height: 100%; +} + +.wrap { + float: left; + height: 50%; + margin-bottom: -50px; +} + +.box { + margin: auto; + clear: both; + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + background-color: silver; + box-sizing: border-box; +} \ No newline at end of file diff --git a/3-1_bonus/3-1_v3.html b/3-1_bonus/3-1_v3.html new file mode 100644 index 0000000..c5d914d --- /dev/null +++ b/3-1_bonus/3-1_v3.html @@ -0,0 +1,12 @@ + + + + + 3-1_v3 (bonus) + + + +
+
+ + \ No newline at end of file diff --git a/3-1_bonus/3-1_v4.css b/3-1_bonus/3-1_v4.css new file mode 100644 index 0000000..bd68881 --- /dev/null +++ b/3-1_bonus/3-1_v4.css @@ -0,0 +1,18 @@ +html, body { + margin: 0; + height: 100%; +} + +.box { + margin: auto; + position: absolute; + width: 100px; + height: 100px; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: 1px solid black; + background-color: silver; + box-sizing: border-box; +} \ No newline at end of file diff --git a/3-1_bonus/3-1_v4.html b/3-1_bonus/3-1_v4.html new file mode 100644 index 0000000..ea85be1 --- /dev/null +++ b/3-1_bonus/3-1_v4.html @@ -0,0 +1,11 @@ + + + + + 3-1_v4 (bonus) + + + +
+ + \ No newline at end of file diff --git a/3-2_bonus/3-2_v1.css b/3-2_bonus/3-2_v1.css new file mode 100644 index 0000000..3ac4539 --- /dev/null +++ b/3-2_bonus/3-2_v1.css @@ -0,0 +1,21 @@ +html, body { + margin: 0; + height: 100%; +} + +.box { + box-sizing: border-box; + width: 100px; + border: 1px solid black; + background-color: silver; +} + +.wrap { + display: table; + margin: auto; + height: 100%; +} +.cell { + display: table-cell; + vertical-align: middle; +} \ No newline at end of file diff --git a/3-2_bonus/3-2_v1.html b/3-2_bonus/3-2_v1.html new file mode 100644 index 0000000..a75a240 --- /dev/null +++ b/3-2_bonus/3-2_v1.html @@ -0,0 +1,15 @@ + + + + + 3-2_v1 (bonus) + + + +
+
+
Выровнять элемент с шириной 100px и высотой по содержимому (какой-нибудь текст) по центру страницы по вертикали всеми возможными способами.
+
+
+ + \ No newline at end of file