Skip to content

Dz6 #7

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
trixartem wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Dz6 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 Малая кровь.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>
<style type="text/css">
.b-center {
background-color:#666;
position:absolute;
right:0px;
left:0px;
top:0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class='b-center'>Left</div>
</body>
</html>
38 changes: 38 additions & 0 deletions Панель.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!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>
<style type="text/css">
.b-body{
width:970px;
}
.b-left{
background-color:#000;
min-height:300px;
display:inline-block;
width:320px;
}
.b-center {
background-color:#666;
min-height:300px;
display:inline-block;
width:320px;
}
.b-right {
background-color:#99C;
min-height:300px;
display:inline-block;
width:320px;
}
</style>
</head>

<body>
<div class="b-body">
<div class='b-left'>left</div>
<div class='b-center'>center</div>
<div class='b-right'>right</div>
</div>
</body>
</html>
57 changes: 57 additions & 0 deletions Переключение макетов.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>
<style type="text/css">
.b-left{
background-color:#000;
min-height:300px;
color:#FFF;

}
.b-center {
background-color:#666;
min-height:600px;
}
.b-right {
background-color:#99C;
min-height:300px;
}
@media screen and (min-width:480px){
.b-body{
max-width:768px;
margin:0 auto;

}

.b-center {
float:left;
width:30%;


}
.b-left {
min-width:240px;
float:left;
width:70%;


}
.b-right {
min-width:240px;
float:right;
width:70%;

}
}
</style>
</head>

<body>
<div class="b-body">
<div class='b-center'>Left</div>
<div class='b-left'>right-top</div>
<div class='b-right'>right-bottom</div>
</body>
</html>
126 changes: 126 additions & 0 deletions Перенос блоков.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var width = $(window).width();
if (width <= 767) {
var height_center_block = $('.b-center').height();
$('.b-left').css({'margin-top' : height_center_block});
}
else {
$('.b-left').css({'margin-top' : '0px'});
}
$(window).resize(function (){
var width = $(window).width();
if (width <= 767) {
var height_center_block = $('.b-center').height();
$('.b-left').css({'margin-top' : height_center_block});
}
else {
$('.b-left').css({'margin-top' : '0px'});
}
});

});

</script>
<style type="text/css">
.b-left{
background-color:#000;
min-height:300px;
}
.b-center {
background-color:#666;
min-height:300px;
}
.b-right {
background-color:#99C;
min-height:300px;
}
@media screen and (min-width:1000px){
.b-body{
width:100%;
overflow:visible;
}
.b-left {
display:inline-block;
margin-left:-4px;
width:250px;


}
.b-center {
display:inline-block;
margin-left:-4px;
min-width:250px;
width:50%;


}
.b-right {
display:inline-block;
margin-left:-4px;
width:250px;

}
}
@media screen and (min-width:768px) and (max-width:999px){
.b-left {
float:left;
min-width:250px;
width:auto;

}
.b-center {
min-width:300px;
width:auto;


}
.b-right {
min-width:250px;
width:auto;

}
}
@media screen and (max-width:767px){
.b-body{

}
.b-left {
min-width:150px;
width:100%;
margin-top:300px;

}
.b-center {
top:0;
position:absolute;
min-width:150;
width:100%;
}
.b-right {
clear:both;
min-width:150px;
width:100%;
}
}

</style>
</head>

<body>
<div class="b-body">
<div class='b-left'>left</div>
<div class='b-center'>center</div>
<div class='b-right'>right</div>
</div>



</body>
</html>
68 changes: 68 additions & 0 deletions Резиновый.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!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>
<style type="text/css">
.b-left{
background-color:#000;
min-height:300px;
color:#FFF;

}
.b-center {
background-color:#666;
min-height:300px;
}
.b-right {
background-color:#99C;
min-height:300px;
}
@media screen and (min-width:480px){
.b-body{
max-width:768px;
overflow:visible;
}
.b-left {
min-width:240px;
float:left;
width:50%;




}
.b-center {
width:100%;


}
.b-right {
min-width:240px;
float:left;
width:50%;

}
}
</style>
</head>

<body>
<div class="b-body">
<div class='b-center'>Top</div>
<div class='b-left'>asdf adsf asdf asdf asdf asdfa sdfa sd
fasd fasdf asdf
asdfa
sd fasd
f asd
f asdf asdf asdfa asdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sd
asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf
asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf
asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf
asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf
asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf asdfa sdfa sdasdf adsf asdf asdf asdf
</div>
<div class='b-right'>right</div>
</div>
</body>
</html>