Пятница, 29.03.2024, 01:28
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 65
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 HTML тег div

HTML тег div

Пару лет назад "скелетом" для сайта всегда служила таблица (тег table). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания "скелета" будущего сайта. Под скелетом я понимаю общую структуру сайта:

LOGO

REKLAMA

 

Горизантальное меню

Левый

блок

 

 

Контакт

 

 

 

Правый

блок

Футер (низ)

Синтаксис тега <div>

<div class="Имя класса">

...

</div>

Данный тег является блочным элементом. Самым главным его атрибутом является class. С помощью него можно создавать блоки с нужными стилями CSS.

Пример 1. Использование блока div

<head>

<style type="text/css">

.primer {

width: 300px;

background: #aaa;

padding: 5px;

padding-right: 25px;

border: solid 1px orange;

float: right;

  }

</style>

</head>

<body>

<div class="primer">

Пример использования блока div

</div>

</body>

Преобразуется на странице в следующее:

Пример использования блока div

Это элементарный пример

использования тега <div>. Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css.

Теперь рассмотрим подробно все атрибуты тега div.

Атрибуты <div>

1) align="параметр" - задает выравнивание. Может принимать следующие значения:
center - выравнивание текста по центру
left - выравнивание текста по левому краю
right - выравнивание текста по правому краю
justify - выравнивание по левому и правому краю.

2) title="текст" - всплывающая подсказка к тегу. Почти никогда не используется.

3) class="имя" - определяет принадлежность к классу.

Практические примеры использования <div>

И на последок ещё пару практических примеров с тегом div.

Пример 2. Вывод контента по центру с использованием div

<head>

<style type="text/css">

.center {

text-align: center;

}

</style>

</head>

<body>

<div class="center">

Этот текст будет по центру

</div>

</body>

Преобразуется на странице в следующее:

Этот текст будет по центру

Теперь вместо тега <center> </center> можно писать <div class="primer2"> </div> и текст будет выведен по центру. Это соответствует требования стандарта HTML.

Пример 3. Красивая рамка с div

<head>

<style type="text/css">

.ramka {

background: #eeeee5;

border: 1px dashed #abab9a;

padding: 5px;

font: 8pt Tahoma;

color:#2c2c2c;

}

</style>

</head>

<body>

<div class="ramka">

Вывод текста в красивом блоке

</div>

</body>

Преобразуется на странице в следующее:

Вывод текста в красивом блоке


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

Ссылка на следующий урок:
Урок 10. Заголовочне теги html

← Перейти в каталог html уроков и советов

Copyright MyCorp © 2024
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz