diff --git a/1_1.html b/1_1.html new file mode 100644 index 0000000..f662e70 --- /dev/null +++ b/1_1.html @@ -0,0 +1,116 @@ + + + +Выравнивание 1.1 + + + + +
Блок 100х100 1 Способ
+
+6 способ + +
+
Блок 100х100 2 Способ
+ ++ + + + + +
+
Блок 100х100 3 Способ
+ 		+
+
+
Блок 100х100 4 Способ
+
+
Блок 100х100 5 Способ
+ + diff --git a/2_1.html b/2_1.html new file mode 100644 index 0000000..1567053 --- /dev/null +++ b/2_1.html @@ -0,0 +1,30 @@ + + + + +Раскладка 2.1 + + + + +
Левая колонка = 300 px
+
Правая колонка = все остальное
+ + diff --git a/dz-3/dz-3(1.1).html b/dz-3/dz-3(1.1).html new file mode 100644 index 0000000..be6fd41 --- /dev/null +++ b/dz-3/dz-3(1.1).html @@ -0,0 +1,101 @@ + + + + + dz-1.1 + + + +
+
+
Общие стили
body { text-align: center; }
+
+#box-1, #box-2, #box-3, #box-4 {
+	width: 88px;
+	height: 88px;
+	padding: 5px;
+	margin-top: 30px;
+	border: 1px solid #000;
+	font: normal 12px Arial;
+	text-align: left;
+}
+
+
+ +
+ + #box-1 { margin: 0 auto; } + +
+ +
+ + #box-2 { + display: inline-block; + } + +
+ +
+ + #box-3 { + position: relative; + left: 50%; + margin-left: -50px; + } + +
+ +
+ + #box-4 { + position: absolute; + left: 50%; + margin-left: -50px; + } + +
+ + + diff --git a/dz-3/dz-3(1.2).html b/dz-3/dz-3(1.2).html new file mode 100644 index 0000000..6e0239a --- /dev/null +++ b/dz-3/dz-3(1.2).html @@ -0,0 +1,79 @@ + + + + + dz-1.2 + + + + + + + +
+
Общие стили

+* {margin: 0; padding: 0;}
+
+body, html { text-align: center; }
+
+div {
+	max-width: 800px;
+	height: 80px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 1px solid red;
+	text-align: left;
+}
+
+
Стили для центрируемых блоков

+#box-1 { 
+	display: table;
+	margin: 20px auto;
+}
+
+#box-2 {
+	display: inline-block;
+	margin-top: 20px;
+}
+
+
jQuery используется только для добавления и скрытия текста.

+$(function() {
+	$('a').toggle(function() {
+		$(this).text('HIDE TEXT').next().fadeIn(300);
+	}, function() {
+		$(this).text('ADD TEXT').next().fadeOut(200);
+	});
+});
+
+
+ +
+

ADD TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+

ADD TEXT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + + diff --git a/dz-3/dz-3(2.1).html b/dz-3/dz-3(2.1).html new file mode 100644 index 0000000..6aa42e3 --- /dev/null +++ b/dz-3/dz-3(2.1).html @@ -0,0 +1,52 @@ + + + + + dz-3(2.1) + + + +
+
+ +
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...HIDE TEXT do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ + + + diff --git a/dz-3/dz-3(2.2).html b/dz-3/dz-3(2.2).html new file mode 100644 index 0000000..08c8929 --- /dev/null +++ b/dz-3/dz-3(2.2).html @@ -0,0 +1,101 @@ + + + + + dz-3(2.2) + + + + + + +
+
HEADER
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+	
+	article {
+		background: #ececec;
+		min-height: 300px;
+		min-width: 960px;
+		padding: 10px;
+	}
+
+
+
+ +
+ + + + diff --git a/dz-3/dz-3(bonus-1).html b/dz-3/dz-3(bonus-1).html new file mode 100644 index 0000000..a816e2e --- /dev/null +++ b/dz-3/dz-3(bonus-1).html @@ -0,0 +1,78 @@ + + + + + dz-3(bonus-1) + + + + +
+
+ +
+
Общие стили

+* {margin: 0; padding: 0;}
+body, html {width: 100%; height: 100%;}
+
+div {
+	float: left;
+	margin-left: 50px;
+	width: 78px;
+	height: 78px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 2px solid red;
+}
+
+
Стили для центрируемых блоков

+
+#box-1 {
+	position: relative;
+	top: 50%;
+	margin-top: -50px;
+}
+
+#box-2 {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 200px;
+}
+
+
+ + + diff --git a/dz-3/dz-3(bonus-2).html b/dz-3/dz-3(bonus-2).html new file mode 100644 index 0000000..0889094 --- /dev/null +++ b/dz-3/dz-3(bonus-2).html @@ -0,0 +1,84 @@ + + + + + dz-3(bonus-2) + + + + + + + +
+
+
+ ADD TEXT +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+ +
+#wrapper {
+	display: table;
+	width: 100px;
+	height: 100%;
+	margin: 0 auto;
+}
+
+#table-cell {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+div#inside {
+	width: 78px;
+	padding: 10px;
+	background: #ffffa2;
+	border: 2px solid red;
+}
+
+ + +