Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

Выходит с 17 июля 2008 г. цена договорная

Опрос

gismeteo.ru
Погода на Яндексе
pogoda.ru
meteonova.ru
по телевизору
за окном
в газете
а че его смотреть?
в другом месте
по счетчику гейгера



Календарь
«    Октябрь 2009    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031 

Архив новостей
Ноябрь 2020 (2)
Июль 2020 (2)
Июнь 2020 (3)
Май 2020 (1)
Март 2020 (1)
Сентябрь 2019 (1)

Информация
Тег DIV - прямоугольный блок
Web » css
автор: dimon, опубликовано: 13 октября 2009

Считается что, верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой:
- более быструю загрузку страницы сайта, т.к. содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться)
- более удобочитаемый код страницы.

Но и блочная верстка не идеальна, есть и недостатки:
- нельзя получить представление данных как это делает таблица.

Самый оптимальный вариант сочетать табличную верстку с верской блоками DIV.

Рассмотрим тег DIV более подробно:
<!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=windows-1251">
  <title>Тег DIV</title>
  <style type="text/css">
   .block1 {
    width: 200px;
    background: #cсcсcс;
    padding: 5px;
    padding-right: 20px;
    border: solid 1px black;
    float: left;
   }
   .block2 {
    width: 200px;
    background: #fаcс00;
    padding: 5px;
    border: solid 1px black;
    float: left;
    position: relative;
    top: 40px;
    left: -70px;
   }
  </style>
  </head>
<body>

  <div class="block1">Text1 Text1 Text1 Text1 Text1 Text1 Text1</div>
  <div class="block2">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>

</body>
</html>


вот так это будет выглядить на страничке:

Text1 Text1 Text1 Text1 Text1 Text1 Text1Text1 Text1 Text1 Text1 Text1 Text1 Text1

Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2











параметры:

width - ширина

background - цвет фона

padding - растояние от текста до границы блока

padding-right - растояние от текста до границы блока справа

border - граница

float - управляет позиционированием перемещаемого блока:
- left - элемент страницы принудительно выравнивается по левому краю;
- right - элемент страницы принудительно выравнивается по правому краю;
- none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

position - способ позиционирования элемента относительно окна браузера или других объектов на веб-странице:
- absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
- fixed - по своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
- relative - положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

top - см. position

left - см. position

 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Чтобы Вам были доступны все функции Вам необходимо либо зарегистрироваться, либо зайти на сайт под своим именем.

Другие новости по теме:

  • Простенький трёхколонный резиновый макет на div-ах
  • Как заставить min-height работать
  • DIV закругленные углы блока
  • DIV прямоугольные блоки - положение друг относительно друга
  • Opera Mobile 8.65 для Windows Mobile


  • Комментарии:



     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Android, Arduino, backup, CentOS, cmd, css, div, DLE, DLE хаки, domoticz, dzvents, event, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2018 by dimon - all right reserved!
    Тираж:           экземпляров.   Дизайн, верстка by dimon