Skip to content

Адаптивная вёрстка #1

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
mopdobopot wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Адаптивная вёрстка #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1c8fbf
Резиновый макет
mopdobopot Nov 30, 2012
fb60581
Второй резиновый макет
mopdobopot Nov 30, 2012
115f612
Косметические правки
mopdobopot Nov 30, 2012
0e442ee
Третий резиновый макет
mopdobopot Nov 30, 2012
7573d9e
Четвёртый резиновый макет
mopdobopot Nov 30, 2012
50169ec
Косметические правки
mopdobopot Nov 30, 2012
8844444
Пятый резиновый вариант
mopdobopot Nov 30, 2012
3cb4d75
Шестой макет
mopdobopot Dec 1, 2012
2be174c
Седьмой макет
mopdobopot Dec 1, 2012
53746ce
Косметические правки
mopdobopot Dec 1, 2012
e699a3f
Чуть укоротил стили
mopdobopot Dec 2, 2012
957c649
Макет с использованием @media-query
mopdobopot Dec 6, 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
30 changes: 30 additions & 0 deletions 1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-1</title>
<link rel="stylesheet" href="styles.css">
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - ���������� ����� (1 �������)</span>
<div class="block type1"></div>
<div class="block type2"></div>
</body>
</html>
20 changes: 20 additions & 0 deletions 1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.block
{
min-width: 100px;
}
.block.type1
{
float: left;
width: 45%;
min-height: 200px;
margin-left: 5%;
background: #8AB8E6;
}
.block.type2
{
width: 45%;
min-height: 200px;
margin-left: 50%;
background: #FFB894;
}

32 changes: 32 additions & 0 deletions 2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-2</title>
<link rel="stylesheet" href="styles.css">
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - ���������� ����� (2 �������)</span>
<div class="container">
<div class="block type1"></div>
<div class="block type2"></div>
</div>
</body>
</html>
24 changes: 24 additions & 0 deletions 2/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.container
{
margin: auto;
min-height: 200px;
}
.block
{
position: absolute;
min-width: 100px;
min-height: 200px;
}
.block.type1
{
left: 5%;
right: 50%;
background: #8AB8E6;
}
.block.type2
{
right: 5%;
left: 50%;
background: #FFB894;
}

40 changes: 40 additions & 0 deletions 3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-3</title>
<link rel="stylesheet" href="styles.css">
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - ���������� ����� (3 �������)</span>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block footer"></div>
</div>
</body>
</html>
20 changes: 20 additions & 0 deletions 3/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.container
{
width: 60%;
margin: auto;
}
.block
{
float: left;
width: 31%;
min-width: 100px;
min-height: 80px;
margin: 1%;
background: #478FB2;
}
.block.footer
{
width: 97%;
margin-left: 1%;
}

32 changes: 32 additions & 0 deletions 4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-4</title>
<link rel="stylesheet" href="styles.css">
<script src="jquery.min.js"></script>
<script src="resize_monitor.js"></script>
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - ���������� ����� (4 �������)</span>
<div class="block type1"></div>
<div class="block type2"></div>
</body>
</html>
2 changes: 2 additions & 0 deletions 4/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions 4/resize_monitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
console.log(width);
if ( width < 600 )
$('.block').css('float', 'none')
else
$('.block').css('float', 'left');
});
});
17 changes: 17 additions & 0 deletions 4/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.block
{
float: left;
margin: auto;
width: 50%;
min-width: 300px;
min-height: 200px;
}
.block.type1
{
background: #8AB8E6;
}
.block.type2
{
background: #3D7A99;
}

35 changes: 35 additions & 0 deletions 5/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-5</title>
<link rel="stylesheet" href="styles.css">
<script src="jquery.min.js"></script>
<script src="resize_monitor.js"></script>
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - ���������� ����� (5 �������)</span>
<div class="container">
<div class="block side"></div>
<div class="block mid"></div>
<div class="block side"></div>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions 5/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions 5/resize_monitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
$(document).ready(function() {
var width = $(window).width();
/* ������-�� 2*(0.2*width) + 0.6*width �� ����� width,
� ��� ����� ��������� � ������ ���� �� ����� */
$('.block.side').css('width', 0.1*width);
$(window).resize(function() {
var rewidth = $(window).width();
$('.block.side').css('width', 0.1*rewidth);
});
});
19 changes: 19 additions & 0 deletions 5/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.container
{
width: 59%; /* ��� �������� 60%, ������ ���� ����������� ���� */
margin: auto;
}
.block
{
min-height: 200px;
float: left;
}
.block.side
{
background: #ccc;
}
.block.mid
{
width: 60%;
background: #999;
}
37 changes: 37 additions & 0 deletions 6/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<html>
<head>
<title>6-6</title>
<link rel="stylesheet" href="styles.css">
<script src="jquery.min.js"></script>
<script src="page_switcher.js"></script>
<style>
BODY {
background: #efefef;
}
.title {
font: bold 60px Calibri;
display: block;
text-align: center;
margin-top: 50px;
}
.subtitle {
font: normal 18px Calibri;
display: block;
text-align: center;
margin-bottom: 70px;
}
</style>
</head>
<body>
<span class="title">������� 6</span>
<span class="subtitle">���������� ������ - �������� ����� (6 �������)</span>
<div class="switchBlock">
<span><</span> <span>></span>
</div>
<br>
<div class="block first"></div>
<div class="block second"></div>
<div class="block third"></div>
</body>
</html>
2 changes: 2 additions & 0 deletions 6/jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

45 changes: 45 additions & 0 deletions 6/page_switcher.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
$(document).ready(function() {

var current = 'second';

function show(elem) {
$(elem).animate({ 'margin-left': '40%' }, 200);
$(elem).css('margin-left', '40%');
}
function hide(elem) {
$(elem).animate({ 'margin-left': '-20%' }, 200);
$(elem).css('margin-left', '-20%');
}

$('span').click(function() {
if ( $(this).html() === '&gt;' ) {
console.log('> pushed');
if ( current === 'first' ) {
current = 'second';
show('.block.second');
hide('.block.first');
}
else
if ( current === 'second' ) {
current = 'third';
show('.block.third');
hide('.block.second');
}
}
else
if ( $(this).html() === '&lt;' ) {
console.log('< pushed');
if ( current === 'third' ) {
current = 'second';
show('.block.second');
hide('.block.third');
}
else
if ( current === 'second' ) {
current = 'first';
show('.block.first');
hide('.block.second');
}
}
});
});
Loading