Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Абсолютное позиционирование блоков
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно его блока-контейнера или относительно корневого элемента html c помощью свойства position: absolute.
Для режима характерны следующие особенности:
Пример. Разместим 4 блока в углах документа:
<HTML> <HEAD><TITLE>Абсолютное позиционирование</TITLE> <STYLE type="text/css"> #box1 { position: absolute; top: 50px; left: 50px; background: orange; border: solid 2px black; width: 60; height:60; }
#box2 { position: absolute; top: 50px; right: 50px; background: yellow; border: solid 2px black; width: 60; height:60; }
#box3 { position: absolute; bottom: 50px; right: 50px; background: blue; border: solid 2px black; width: 60; height:60; }
#box4 { position: absolute; bottom: 50px; left: 50px; background: green; border: solid 2px black; width: 60; height:60; } </STYLE> </HEAD> <BODY> <DIV id="box1">Блок 1 </DIV> <DIV id="box2">Блок 2 </DIV> <DIV id="box3">Блок 3 </DIV> <DIV id="box4">Блок 4 </DIV> </BODY> </HTML>
Пример:
<HTML> <HEAD> <TITLE>Абсолютное позиционирование</TITLE> <STYLE type="text/css"> body { margin: 0; } #content {position: absolute;} #content { top: 30px; /* Расстояние от верхнего края */
left: 50px; /* Расстояние от левого края */ width: 400px; height: 100px; border: 2px solid black; background-color: #ccc; } </STYLE> </HEAD> <BODY> <div id="content"> <h2>HTML</h2> <P> <B>HTML</B> (от англ.<I> HyperText Markup Language </I> — «язык разметки гипертекста») — стандартный язык разметки документов воВсемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируетсябраузерами и отображается в виде документа в удобной для человека форме. <P> HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML. </div> <P> Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. <P>Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на данный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.
</BODY> </HTML>
Пример Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты.
<P> <B>HTML</B> (от англ.<I> HyperText Markup Language </I> — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. <P> HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML. </div></BODY></HTML>Слой header выводится в потоке как обычно, а для слоёв sidebar и соntent установлено абсолютное позиционирование. Плавающие блоки Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Плавающие блоки в CSS определяются свойством float . Свойство float Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения: · left — блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха. · right — блок перемещается вправо. Остальное содержимое документа будет выводиться вдоль левой стороны блока, начиная с самого верха. · none — блок не перемещается (значение по умолчанию). Пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Поместим эти комментарии внутрь плавающего блока, а сам блок разместим рядом с нужным местом в статье.
<HTML> <HEAD> <TITLE>Плавающие блоки</TITLE> <STYLE type="text/css"> .comment { background-color: #CCCCFF; border: 1px solid; padding: 5px; width: 250px; float: left } </STYLE> </HEAD> <BODY> <DIV class="comment"> <b>Текст внутри плавающего блока</b><br> <br> Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными, так и строчными буквами, т.е. команда body эквивалентна команде BODY или Body. Если браузер не поддерживает команду, он ее просто игнорирует.
</DIV> <P><b>Текст, который будет обтекать блок</b></P> <p> Основное достоинство WWW состоит в создании гипертекстовых документов, и если Вас зинтересовал какой-либо пункт в таком документе, то достаточно "ткнуть" в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами передачи и поиска информации - "многосредность". HTML расшифровывается как Hyper Text Markup Language, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым Web-документы отображаются браузерами. </BODY> </HTML> Пример Плавающие блоки float можно использовать для вывода колонок в документе. Для этого определяются необходимые колонки в HTML-коде тегами <div> (выведем три колонки шириной по 33%):
<HTML> <HEAD><TITLE>Плавающие блоки</TITLE> <STYLE type="text/css"> #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%;} </STYLE> </HEAD> <BODY> <div id="column1"> <p>Это текст первой колонки... </p> </div> <div id="column2"> <p>Это текст второй колонки... </p> </div> <div id="column3"> <p>Это текст третьей колонки... </p> </div></BODY> </HTML>
|
|||||||
|
|
Последнее изменение этой страницы: 2016-08-15; просмотров: 454; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.147.65.65 (0.025 с.) |
Создадим такой блок, указав для него свойство float со значением left . Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.
