Skip to content

DZ_6 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aeremeeva wants to merge 2 commits into
base: master
Choose a base branch
from
Open

DZ_6 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfcff60
DZ_6
aeremeeva Dec 4, 2012
a62908a
добавила СSS3
aeremeeva Dec 5, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions 1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Адаптивная верстка</title>
</head>
<body>
<style type="text/css">
.vid
{
width:100%;
border:1px solid red;
background-color:orange;
}
</style>
<div class="vid">
Как и почему мурлыкают кошки и почему это исключительно привилегия кошачьих, в действительности никто точно не знает. Однако на этот счет есть некоторые соображения. Считают, что мурлыканье кошек есть результат генерирования электрических импульсов в головном мозгу, которые передаются через центральную нервную систему, приводя к сокращению определенных мышц, расположенных около голосовых связок, они сокращаются и резонируют. Затем вибрация передается на тело, но слышимые звуки исходят из носовой полости и рта. А почему кошки мурлыкают - это уже совсем другая история. Вот несколько теорий: Это поддерживает эффективность кровообращения и, таким образом, сохраняет здоровье кошки. Тихое мурлыканье - это требование, а громкая - благодарность за то, что животное получило то, что хотело, обычно пищу. Это сигнал, которым мать успокаивает своих котят, и звуки, которыми котята дают понять матери, что все в порядке. Доминирующий кот будет мурлыкать, чтобы показать подчиненному, что он не собирается нападать. Кошки мурлыкают, когда боятся или могут быть подвергнуты нападению, говоря тем самым, что они маленькие и беззащитные существа, которых нельзя обижать. Больные или раненые кошки мурлыкают, чтобы поддержать себя и показать другим, какие они несчастные. Мурлыканье - свидетельство благодарности, счастья, удовлетворения кошки. С такой трактовкой согласится большинство кошек. Помурлыкай, и твой хозяин, скорее всего, отдаст все, что ты хочешь, даже если это последняя креветка на столе, - кошки не такие уж и глупые.
</div>
</body>
</html>
51 changes: 51 additions & 0 deletions 2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Адаптивная верстка</title>
</head>
<body>
<style type="text/css">
.wrapper
{
width:100%;
max-width:800px;
min-width:300px;
margin: 0 auto;
}
.verhn
{
height:100%;
min-width:300px;
background-color:orange;
}
.lev
{
width:50%;
min-width:300px;
height:100%;
background-color:#DB8589;
float:left;
}
.prav
{
width:50%;
min-width:300px;
height:100%;
background-color:#E5E100;
float:right;
}
</style>
<div class="wrapper">
<div class="verhn">
Как и почему мурлыкают кошки и почему это исключительно привилегия кошачьих, в действительности никто точно не знает. Однако на этот счет есть некоторые соображения. Считают, что мурлыканье кошек есть результат генерирования электрических импульсов в головном мозгу, которые передаются через центральную нервную систему, приводя к сокращению определенных мышц, расположенных около голосовых связок, они сокращаются и резонируют. Затем вибрация передается на тело, но слышимые звуки исходят из носовой полости и рта. А почему кошки мурлыкают - это уже совсем другая история. Вот несколько теорий: Это поддерживает эффективность кровообращения и, таким образом, сохраняет здоровье кошки. Тихое мурлыканье - это требование, а громкая - благодарность за то, что животное получило то, что хотело, обычно пищу. Это сигнал, которым мать успокаивает своих котят, и звуки, которыми котята дают понять матери, что все в порядке. Доминирующий кот будет мурлыкать, чтобы показать подчиненному, что он не собирается нападать. Кошки мурлыкают, когда боятся или могут быть подвергнуты нападению, говоря тем самым, что они маленькие и беззащитные существа, которых нельзя обижать. Больные или раненые кошки мурлыкают, чтобы поддержать себя и показать другим, какие они несчастные. Мурлыканье - свидетельство благодарности, счастья, удовлетворения кошки. С такой трактовкой согласится большинство кошек. Помурлыкай, и твой хозяин, скорее всего, отдаст все, что ты хочешь, даже если это последняя креветка на столе, - кошки не такие уж и глупые.
</div>
<div class="lev">
Как и почему мурлыкают кошки и почему это исключительно привилегия кошачьих, в действительности никто точно не знает. Однако на этот счет есть некоторые соображения. Считают, что мурлыканье кошек есть результат генерирования электрических импульсов в головном мозгу, которые передаются через центральную нервную систему, приводя к сокращению определенных мышц, расположенных около голосовых связок, они сокращаются и резонируют. Затем вибрация передается на тело, но слышимые звуки исходят из носовой полости и рта. А почему кошки мурлыкают - это уже совсем другая история. Вот несколько теорий: Это поддерживает эффективность кровообращения и, таким образом, сохраняет здоровье кошки. Тихое мурлыканье - это требование, а громкая - благодарность за то, что животное получило то, что хотело, обычно пищу. Это сигнал, которым мать успокаивает своих котят, и звуки, которыми котята дают понять матери, что все в порядке. Доминирующий кот будет мурлыкать, чтобы показать подчиненному, что он не собирается нападать. Кошки мурлыкают, когда боятся или могут быть подвергнуты нападению, говоря тем самым, что они маленькие и беззащитные существа, которых нельзя обижать.
</div>
<div class="prav">
Как и почему мурлыкают кошки и почему это исключительно привилегия кошачьих, в действительности никто точно не знает. Однако на этот счет есть некоторые соображения. Считают, что мурлыканье кошек есть результат генерирования электрических импульсов в головном мозгу, которые передаются через центральную нервную систему, приводя к сокращению определенных мышц, расположенных около голосовых связок, они сокращаются и резонируют. Затем вибрация передается на тело, но слышимые звуки исходят из носовой полости и рта. А почему кошки мурлыкают - это уже совсем другая история. Вот несколько теорий: Это поддерживает эффективность кровообращения и, таким образом, сохраняет здоровье кошки. Тихое мурлыканье - это требование, а громкая - благодарность за то, что животное получило то, что хотело, обычно пищу. Это сигнал, которым мать успокаивает своих котят, и звуки, которыми котята дают понять матери, что все в порядке. Доминирующий кот будет мурлыкать, чтобы показать подчиненному, что он не собирается нападать. Кошки мурлыкают, когда боятся или могут быть подвергнуты нападению, говоря тем самым, что они маленькие и беззащитные существа, которых нельзя обижать.
</div>
</div>
</body>
</html>
121 changes: 121 additions & 0 deletions 3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Адаптивная верстка</title>
</head>
<body>
<style>
@media only screen
and (min-width: 1200px)
{
.wrapper
{
width:1200px;
margin: 0 auto;
}
.wrapperO
{
width:900px;
float:left;
}
.w
{
height:200px;
width:600px;
background-color:#E5E100;
float:right;
}
.q
{
height:200px;
width:300px;
background-color:orange;
}
.e
{
height:200px;
width:300px;
background-color:#DB8589;
float:right;
}
}
@media only screen
and (min-width: 900px)
and (max-width: 1199px)
{
.wrapper
{
width:900px;
margin: 0 auto;
}
.wrapperO
{
width:900px;
margin: 0 auto;
}
.q
{
height:200px;
width:300px;
background-color:orange;
}
.w
{
height:200px;
width:600px;
background-color:#E5E100;
float:right;
}
.e
{
height:200px;
width:100%;
background-color:#DB8589;
}
}
@media only screen
and (max-width: 899px)
{
.wrapper
{
width:100%;
margin: 0 auto;
}
.wrapperO
{
width:100%;
margin: 0 auto;
}
.w
{
height:200px;
width:100%;
background-color:#E5E100;
}
.q
{
height:200px;
width:100%;
background-color:orange;
}
.e
{
height:200px;
width:100%;
background-color:#DB8589;
}
}
</style>
<div class="wrapper">
<div class="wrapperO">
<div class="w">
</div>
<div class="q">
</div>
</div>
<div class="e">
</div>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions 3_CSS_3_flexbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Адаптивная верстка</title>
</head>
<body>
<style>
@media only screen
and (min-width: 1200px)
{
#rod { display: flex; flex-flow: row; }
#A { width: 300px; height: 300px;}
#B { width: 600px; height: 300px;}
#C { width: 300px; height: 300px;}
}

@media only screen
and (min-width: 900px)
and (max-width: 1199px)
#rod { display: flex; flex-flow: row; width: 900px; flex: auto}
#rod > B { width: 300px; order: 1; }
#rod > A { width: 600px; order: 2; }
#A { height: 300px; }
#B { height: 300px; }
#C { height: 300px; }

@media only screen
and (max-width: 899px)
{
#rod { display: flex; flex-flow: column; }
#A { height: 300px; }
#B { height: 300px; }
#C { height: 300px; }
}
</style>
<div id="rod">
<div id="A">
Левый
</div>
<div id="B">
Центральный
</div>
<div id="C">
Правый
</div>
</div>
</div>
</body>
</html>
57 changes: 57 additions & 0 deletions 3_CSS_3_grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Адаптивная верстка</title>
</head>
<body>
<style type="text/css">
@media only screen
and (min-width: 1200px)
{
#grid
{
display: grid; grid-definition-columns: 1200px; grid-definition-rows: 200px
}
#A { grid-column-position: 1; grid-row-position: 1; }
#B { grid-column-position: 2 grid-row-position: 1; }
#C { grid-column-position: 3; grid-row-position: 1; }
{
@media only screen
and (min-width: 900px)
and (max-width: 1199px)
{
#grid
{
display: grid; grid-definition-columns: 900px; grid-definition-rows: 400px
}
#A { grid-column-position: 1; grid-row-position: 1; }
#B { grid-column-position: 2 grid-row-position: 1; }
#C { grid-column-position: 1; grid-row-position: 2; grid-column-span: 2;}
}
@media only screen
and (max-width: 899px)
{
#grid
{
display: grid; grid-definition-columns: 600px; grid-definition-rows: 600px
}
#A { grid-column-position: 1; grid-row-position: 1; }
#B { grid-column-position: 1 grid-row-position: 2; }
#C { grid-column-position: 1; grid-row-position: 3; }
}
</style>
<div id="grid">
<div id="A">
Левый
</div>
<div id="B">
Центральный
</div>
<div id="C">
Правый
</div>
</div>
</div>
</body>
</html>
Loading