double arrow

Примеры задания слоев

Если необходимо, например, создать слой, располагающийся строго по центру, следует действовать следующим образом. Вначале указать ширину и высоту слоя с помощью параметров width и height. Размеры можно задавать в пикселях, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселях. Из-за этой особенности предлагаемый метод размещения по центру является наиболее универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через аргумент position: absolute. Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left) и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен параметр overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной.

<style type="text/css">
#centerLayer {
position: absolute; /* Абсолютное позиционирование */
width: 400px; /* Ширина слоя в пикселах */
height: 300px; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
margin-left: -200px; /* Отступ слева */
margin-top: -150px; /* Отступ сверху */
background: #fc0; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
padding: 10px; /* Поля вокруг текста */
overflow: auto; /* Добавление полосы прокрутки */
}
</style>
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

Пример наложения прозрачного слоя, эффект тени

<html>

<head>

<style type="text/css">

body {font-family: Verdana; font-size: 30pt; font-weight: bold;}

.d1 { position: absolute; color: silver; top: 10%; left: 10%; }

.d2 { position: absolute; color:orange; top: 9.6%; left: 9.6%; }

</style>

</head>

<body>

<div class="d1"> HTML</div>

<div class="d2"> HTML</div>

</body>

</html>

Позиционирование без таблицы

<html>

<head>

<style type="text/css">

body {font-family: Verdana; font-size: 100%; color: navy;}

.d1 { position: absolute; top: 5%; left: 5%; }

.d2 { position: absolute; top: 5%; left: 45%; }

.d3 { position: absolute; top: 5%; left: 85%; }

.d4 { position: absolute; top: 45%; left: 5%; }

.d5 { position: absolute; top: 45%; left: 45%; }

.d6 { position: absolute; top: 45%; left: 85%; }

.d7 { position: absolute; top: 85%; left: 5%; }

.d8 { position: absolute; top: 85%; left: 45%; }

.d9 { position: absolute; top: 85%; left: 85%; }

</style>

</head>

<body>

<div class="d1">Ячейка1</div>

<div class="d2">Ячейка2</div>

<div class="d3">Ячейка3</div>

<div class="d4">Ячейка4</div>

<div class="d5">Ячейка5</div>

<div class="d6">Ячейка6</div>

<div class="d7">Ячейка7</div>

<div class="d8">Ячейка8</div>

<div class="d9">Ячейка9</div>

</body>

</html>

Декоративное оформление страницы

<html>

<head>

<style type="text/css">

body {font-family: Verdana; font-size: 100%; font-weight: bold;}

.d1 { position: absolute;

font-size: 1000%;

color: #ffccff;

top: 10%;

left: 10%;

width: 70%;}

.d2 { position: absolute;

font-size:450%;

color: #66ff00;

top:150;

left: 20%;

width: 60%;}

.d3 { position: absolute;

font-size: 100%;

color: navy;

top: 10%;

left: 25%;

width: 35%;}

b { font-size: 100%; color: #0088bb}

i {color: #0088bb }

</style>

</head>

<body>

<div class="d1">MF</div>

<div class="d2">HTML</div>

<div class="d3">

<p>Данный <b>Математический </b> факультет - один из старейших факультетов университета и в то же время один из самых молодых по возрастному составу преподавателей и сотрудников. Математический факультет на сегодняшний день объединяет более 500 студентов и более 50 преподавателей и <b>сотрудников</b>. Подготовка специалистов ведется по <b>четырем</b> специальностям и более чем десяти специализациям.

</p>

</div>

</body>

</html>

<style type="text/css">

BODY {

margin: 0; /* Убираем отступы */

}

DIV.parent {

margin: 20%; /* Отступы вокруг элемента */

background: #fd0; /* Цвет фона */

padding: 10px; /* Поля вокруг текста */

}

DIV.child {

border: 3px solid #666; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin: 10px; /* Отступы вокруг */

}

</style>

</head>

<body>

<div class="parent">

<div class="child">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim

ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat.

</div>

</div>



Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



Сейчас читают про: