Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
24 changes: 24 additions & 0 deletions 1_1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сдвиг по горизонтали #1</title>
<style>
body{
background-color: #3366CC;
}
#hor{
height: 100px;
width: 100px;
background-color: yellow;
margin-left: 45%
}
p{
text-align: center;
}
</style>
</head>
<body>
<div id=hor><p>1</p>
</div>
</body>
29 changes: 29 additions & 0 deletions 1_2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����� �� ����������� #1</title>
<style>
body{
background-color: #3366CC;
}
#blok{
height: 100px;
width: 100px;
background-color: green;
}
#ramka{
background-color: #3366CC;
padding-left:45%;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div id=ramka>
<div id=blok><p>2</p>
</div>
</div>
</body>
32 changes: 32 additions & 0 deletions 1_3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����� �� ����������� #3</title>
<style>
body{
background-color: #3366CC;
}
#blok
{
height: 100px;
width: 100px;
position: absolute;
left: 45%;
background-color: red;

}

p
{
text-align: center;
}
</style>
</head>
<body>

<div id=blok><p>3</p>
</div>
</body>

</body>
34 changes: 34 additions & 0 deletions 1_4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����� �� ����������� #4</title>
<style>
body{
background-color: #3366CC;
}
#parent
{
margin-left:45%;

}
#blok
{
position: relative;
height: 100px;
width: 100px;
background-color: brown;
}

p
{
text-align: center;
}
</style>
</head>
<body>
<div id=parent>
<div id=blok><p>4</p>
</div>
</div>
</body>
34 changes: 34 additions & 0 deletions 1_5.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сдвиг по горизонтали #6</title>
<style>
body{
background-color: #3366CC;
}
#parent
{
text-align:center;
}
#blok
{
height: 100px;
width: 100px;
position: relative;
display: inline-block;
background-color: orange;

}

p
{

text-align: center;
}
</style>
</head>
<body>
<div id=parent>
<div id=blok><p>5</p>
</div>
</body>
31 changes: 31 additions & 0 deletions 1_6.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����� �� ����������� #6</title>
<style type="text/css">
body{
background-color: #3366CC;
}

table
{
width: 100%;
height: 100px;
}
#blok
{
width: 100px;
height: 100px;
background-color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td align="center"><div id=blok><p>6</p></id></td>

</tr>
</table>
</body>
45 changes: 45 additions & 0 deletions 1_7.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>����� �� ����������� #8</title>
<style type="text/css">
body{
background-color: #3366CC;
}

table
{
width: 100%;
height: 100px;
}
#col1 {
width: 45%;
}
#col2 {
width: 100px;
background: #fc9;
text-align: right;
}
#col3 {
text-align: right;
}
#col1, #col2 {
vertical-align: top;
}
p
{
margin-top: 5px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td id="col1"></td>
<td id="col2"><p>7</p></td>
<td id="col3"></td>
</tr>
</table>
</body>
31 changes: 31 additions & 0 deletions 2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сдвиг по горизонтали, а ширина блока по содержимому #1</title>
<style>
body{
background-color: #3366CC;
}
#parent
{
text-align:center;
}
#blok
{
height: 100px;
width: auto;
position: relative;
display: inline-block;
background-color: pink;

}


</style>
</head>
<body>
<div id=parent>
<div id=blok><p>Ширина этого блока зависит от содержимого</p>
</div>
</body>
36 changes: 36 additions & 0 deletions 3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 �������</title>
<style type="text/css">

#col1{
background: #9fc;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%

}

#col2 {
position: absolute;
top: 0;
left: 300px;
width: 100%;
height: 100%;
background: #f9c;

}


</style>
</head>
<body>
<div id="parent">
<div id="col1">1</div>
<div id="col2">2</div>
</div>
</body>
36 changes: 36 additions & 0 deletions 4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 �������</title>
<style type="text/css">


#col1{
width: 100%;
background: #cf6;
position: absolute;
top: 0;
left: 0;
margin-rigth: 100px;
height: 100%
}

#col2 {
position: absolute;
top: 0;
right:0;
max-width: 300px;
min-width: 150px;
height: 100%;
background: #ccc;
}


</style>
</head>
<body>

<div id="col1">1</div>
<div id="col2">2</div>
</body>