key Войти Валюта:
calendar 14.06.2016
heart 712
question Комментариев: 0

Благодаря блокам вы можете создавать веб-страницы, не используя при этом таблицы. Основными свойствами блоков считаются высота и длина. Данные параметры могут задаваться как в процентах, так и в пикселях.

Наиболее популярным блочным элементом принято считать <div>, который используется для выделения частей веб-документа и последующего их изменения. Что касается позиционирования, то оно бывает трех типов:

  • Абсолютное позиционирование.

  • Перемещаемый объект.

  • Абсолютное позиционирование.

Первый тип позиционирования подходит именно для веб-страниц. Уточним, что за абсолютное позиционирование отвечает свойство position с заданным свойством absolute, тогда как смещение блоков возможно за счет свойств top, left, right и bottom. Например, пропишем в таблице стилей такие параметры как высота, длина, фон и т.д., а также добавим идентификаторы <div class="block1">Блок 1</div> и <div class="block2">Блок 2</div>:

<html>

<head>

<meta charset="utf-8">

<title>Блоки</title>

<style>

 .block1 {

  width: 200px;

  background: #fe4164;

  padding: 5px;

  padding-right: 20px;

  float: left;

 }

 .block2 {

  width: 200px;

  background: #cd5c5c;

  padding: 5px;

  float: left;

  position: relative;

  top: 30px;

  left: -60px;

 }

</style>

</head>

<body>

<div class="block1">Блок 1</div>

<div class="block2">Блок 2</div>

</body>

</html>

Блоки в браузере:

Теперь добавим на страницу четыре блока, добавив для каждого из них ID:

<html>

<head>

<meta charset="utf-8">

<title>Блоки в CSS</title>

<style>

#logo {

width: 618px;

height: 800px;

position: absolute;

top:0px;

left:0px;

border: 1px solid blue;

}

#leftmenu {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:0px;

border: 1px solid blue;

}

#rightnews {

width: 90px;

height: 200px;

position: absolute;

top:50px;

left:528px;

border: 1px solid blue;

}

#center {

width: 396px;

height: 200px;

position: absolute;

top: 50px;

left:110px;

border: 1px solid blue;

}

</style>

</head>

<body>

<div id="logo">Логотип компании</div>

<div id="leftmenu">Меню</div>

<div id="rightnews">Новости компании</div>

<div id="center">Основной блок</div>

</body>

</html>

Блоки в браузере:

soc-1
Tweet
© СХОСТ. All Rights Reserved.