<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="first">
До сих пор мы особо не заботились о размерах элементов,
с которыми работали.
В этом уроке мы посмотрим, как легко можно
высоту и ширину элемента.
</div>
<div id="second">
До сих пор мы особо не заботились о размерах элементов,
с которыми работали.
В этом уроке мы посмотрим, как легко можно
высоту и ширину элемента.
</div>
<p>
У элемента есть четыре стороны: right, left, top и bottom.
Поля margin это расстояние от каждой стороны с до
соседних элементов (или краёв документа).
См. также диаграмму в Уроке 9. В качестве первого примера
мы разберёмся, как определить поля самогó документа,
т. е. элемента body. На иллюстрации показано,
какие поля нам нужны.
У элемента есть четыре стороны: right, left, top и bottom.
Поля margin это расстояние от каждой стороны с до
соседних элементов (или краёв документа).
См. также диаграмму в Уроке 9. В качестве первого примера
мы разберёмся, как определить поля самогó документа,
т. е. элемента body. На иллюстрации показано,
какие поля нам нужны.
У элемента есть четыре стороны: right, left, top и bottom.
Поля margin это расстояние от каждой стороны с до
соседних элементов (или краёв документа).
См. также диаграмму в Уроке 9. В качестве первого примера
мы разберёмся, как определить поля самогó документа,
т. е. элемента body. На иллюстрации показано,
какие поля нам нужны.
У элемента есть четыре стороны: right, left, top и bottom.
Поля margin это расстояние от каждой стороны с до
соседних элементов (или краёв документа).
См. также диаграмму в Уроке 9. В качестве первого примера
мы разберёмся, как определить поля самогó документа,
т. е. элемента body. На иллюстрации показано,
какие поля нам нужны.
</p>
<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>
<div id="column4">
</div>
</body>
</html>
body
{
background-color: #AAFFAA;
margin: 100px 40px 10px 70px;
border: 10px ridge gold;
}
p
{
background-color: #11FFAA;
margin: 80px 50px 50px 50px;
padding: 20px 20px 20px 80px;
border: 20px outset red;
}
#first
{
float:left;
height: 200px;
width: 300px;
border: 1px solid black;
background: orange;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
#second
{
float:right;
height: 200px;
width: 300px;
border: 1px solid black;
background: orange;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
#column1
{
float:left;
width: 25%;
background: orange;
height: 100px;
border: 1px solid black;
}
#column2
{
float:left;
width: 24%;
background: orange;
height: 100px;
border: 1px solid black;
}
#column3
{
float:right;
width: 24%;
background: orange;
height: 100px;
border: 1px solid black;
}
#column4
{
float:right;
width: 25%;
background: orange;
height: 100px;
border: 1px solid black;
}
|
