Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Использование блоков на Web-страницеСтр 1 из 5Следующая ⇒
Использование блоков на Web-странице
Рисунок 1. Блочная модель Свойства CSS: ü margin ((-top, -bottom, -left, -right) – задает промежуток между содержимым (его границей) и краем поля; ü padding (-top, -bottom, -left, -right) – задает отступы (набивку), т.е. промежуток между содержимым и его границей. Пример: <HTML> <HEAD> <style type="text/css"> body {border: 2px solid red} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} p {margin-top: 10px; margin-left: 20px; border: 2px solid blue} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} p {margin-top: 10px; margin-left: 20px; padding-left: 15px; border: 2px solid blue} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Можно писать сокращенно для margin и padding, тогда идут расстояния в порядке: верх, право, низ, лево. Например, padding: 5px 10px 15px 5px.
Строковые и блочные элементы 1. <SPAN>... </SPAN> - обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста (может заменить элементы FONT, I, B, U, SUB, SUP и т.д. Пример: Тег <FONT COLOR="red">... </FONT> соответствует <SPAN STYLE="color: red">... </SPAN> - class = определяет принадлежность к классу - id = определяет принадлежность к идентификатору. 2. <DIV>... </DIV> - тег-контейнер, выделяет логический блок и позволяет применить атрибуты стиля, связанные с границей блока и отступами блока от границ старшего элемента и от границ блока до границ вложенного элемента. Блок всегда отделен от других элементов страницы пустой строкой. Атрибуты: - align = выравнивание: ü сenter - выравнивание текста по центру, ü left - выравнивание текста по левому краю, ü right - выравнивание текста по правому краю, ü justify - выравнивание по левому и правому краю. - title = всплывающая подсказка к тегу - class = определяет принадлежность к классу - id = определяет принадлежность к идентификатору.
Свойства блоков: - высота (height); - ширина (width); - граница (border); - отступ (margin); - набивка (padding); - произвольное размещение (float); - управление обтеканием (clear). Пример <HTML> <HEAD> <style type="text/css"> .B1 {border: 2px solid red;} .B2 {border: 2px solid blue;} </style> </HEAD> <BODY> <DIV class="B1"> Блок1 </DIV> <DIV class="B2"> Блок2 </DIV> </BODY> </HTML>
Пример <HTML> <HEAD> <style type="text/css"> .B1 {border: 2px solid red;} .B2 {border: 2px solid blue;} </style> </HEAD> <BODY> <DIV class="B1"> Блок1 <DIV class="B2"> Блок2 </DIV> </DIV> </BODY> </HTML>
Пример <HTML> <HEAD> <style type="text/css"> .B1 {border: 2px solid red;} .B2 {border: 2px solid blue; width: 50%;} </style> </HEAD> <BODY> <DIV class="B1"> Блок1 <DIV class="B2"> Блок2 </DIV> </DIV> </BODY> </HTML>
Позиционирование блоков с использованием CSS Позиционированием называется положение элемента в системе координат. 3 вида позиционирования блоков: 1) абсолютное позиционирование; 2) плавающие блоки; 3) относительное позиционирование.
Плавающие блоки Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Плавающие блоки в 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> Вложенные слои Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin. Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис.).
Благодаря использованию четырёх свойств left, right, top, bottom для управления положением внутреннего слоя, размеры родительского слоя знать не обязательно. Это расширяет сферу применения позиционирования, поэтому position довольно активно применяется при вёрстке различных элементов.
Фиксированное положение Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.
Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для тега BODY. Вложенные стили Вложенные стили используются следующим образом: внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля.
В этом примере теги <span> используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и размеры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке. <p> <span style="font-size:12pt"> Здесь <span style="font-size:16pt"> показано <span style="font-size:20pt"> вложение <span style="font-size:24pt"> стилей </span> друг </span> в </span> друга.</span></p>Пример. Вложенные теги <div> решают такие же задачи оформления, но, кроме того, создают перенос строки. <div style="font-size:12pt">Здесь <div style="font-size:16pt"> показано <div style="font-size:20pt"> вложение <div style="font-size:24pt"> стиля </div> друг </div> в </div> друга.</div>
CSS-макеты Рассмотрим основные типы CSS-макетов, применяемые в дизайне Web-страниц. Верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразится до тех пор, пока все ее содержимое не загрузится), код страницы удобочитаем. Для этого используются стилевое свойство float, которое управляет позиционированием перемещаемого блока, и стилевое свойство clear, которое управляет потоком после перемещаемых блоков. Стилевое свойство clear задает, какие границы элемента страницы не могут совпадать с предшествующим перемещаемым блоком свойством float. Свойство clear может принимать значения
· left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока; · right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока; · both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока; · none - ограничений на положение блока относительно перемещаемых блоков не накладывается. Пример.
1) Создаем папку и называем ее, sait. Создаем и помещаем в эту папку две страницы: index.html и style.css, а также папку images, куда будем помещать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.
3) Именно такие картинки, с такими названиями мы и складываем в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы. 4) У сайта может быть фиксированный либо резиновый дизайн. а) Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. 1. Создаем структуру главной страницы: <html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <div id="header"></div> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> <div id="reklama"> <div id="reklama_top"></div> <div id="reklama_text"></div> <div id="reklama_bottom"></div> </div> <div id="content"></div> <div id="footer"></div> </div> </body></html>2. Создаем файл style.css с таблицами стилей, в котором задаем положение, размер и фон наших блоков. Ø Блок main имеет ширину 800px, фоновый рисунок fon_bg.jpg, который повторяется по вертикали: #main{ width:800px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y;}Ø Блок header находится в нормальном потоке, имеет ширину 800px и высоту 155px (это размеры фонового рисунка header.jpg, который не повторяется ни по горизонтали, ни по вертикали): #header{ width:800px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat;}Ø Блоки menu1, menu2, menu3 находятся в нормальном потоке, имеют ширину 800px, а высоты 33px для menu1, 36px - для menu2 и 72px - для menu3 (это размеры соответствующих фоновых рисунков): #menu1{ width:800px; height:33px; background-image: url(images/menu1.jpg); background-repeat:no-repeat;}#menu2{ width:800px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat;}#menu3{ width:800px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat;}Ø Блоки reklama и content будут плавающими. Чтобы блок content прижимался к правой стороне блока reklama мы зададим обоим свойство float:left. Ширина блока reklama - 263px (по фоновому рисунку), а блока content - все остальное пространство, т.е. 507px.
Блок reklama, в свою очередь, состоит из трех блоков: Ø Последний блок - блок footer. Его ширина 800px, высота 28px, фоном является повторяющийся по горизонтали рисунок footer.jpg. Чтобы этот блок расположился ниже предыдущих, мы запретим его обтекание с обеих сторон свойством clear:both. #footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x;text-align:center; padding-top:5px;}3. Сейчас наша страница выглядит так: Она прижата к левому краю и имеет отступы сверху и слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами решается добавлением свойства margin:0px для body. body{ width:800px; padding-left:50%; margin:0px;} #main{ width:800px; margin-left:-400px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y;}4. Осталось наполнить страницу нужным текстом. Ø Начнем с блока header, в котором надо разместить название сайта и слоган. Для этого в блок header поместим 2 соответствующих блока headertext1 и headertext2, а в них необходимый текст: <div id="header"> <div id="headertext1">Web-технологии </div> <div id="headertext2">Устремись вперед!</div> </div>Ø Теперь зададим стили для новых блоков. Эти блоки плавающие, шириной около 1/3 от родительского блока (800px/3=270px) и прижаты к правому краю (свойство float:right). Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px. Наконец, зададим шрифт, его размер и цвет, а также отступы сверху: #headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF;}#headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #FAF46E;}Ø Теперь займемся блоками меню, их три: первые два содержат ссылки, третий - простой текст. Поступим так же, как с блоком header, т.е. создадим в каждом по блоку и уже в них поместим наши ссылки и текст. Так как ссылки на нашей странице оформлены по-разному, то ссылкам в этих блоках присвоим класс menu: <div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Главная</a> | <a href="#" class="menu">Заказ проекта</a> | <a href="#" class="menu">Отзывы</a> </div></div><div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок Web-мастера</a> | <a href="#" class="menu">Тест</a> </div></div><div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (3812) 12-12-12 </div></div>Ø Теперь зададим стили. Блокам надо задать отступы слева и сверху так, чтобы их содержимое располагалось по центру: #textmenu1{ padding-left:270px; padding-top:10px;}#textmenu2{ padding-left:300px; padding-top:10px;}#textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF;}Ø У ссылок надо убрать подчеркивание, задать цвет и размер. Чтобы ссылки не прижимались друг к другу, зададим им отступы слева и справа: a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px;}Ø Теперь займемся блоком reklama, он состоит из трех блоков, причем текст будет располагаться в первых двух. В них мы и добавим по блоку: <div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас узнать что-нибудь новое:</div> </div> <div id="reklama_text"> <div id="textreklamatext"> <a href="H.html" class="reklama"> Html</a> <a href="C.html" class="reklama"> CSS</a> <a href="J.html" class="reklama"> JavaScript</a> <a href="V.html" class="reklama"> VBScript</a> <a href="P.html" class="reklama"> Perl</a> <a href="P1.html" class="reklama"> PHP</a> </div> </div> <div id="reklama_bottom"></div> </div>Обратите внимание, ссылки в этом блоке отличаются от других, поэтому и имеют свой класс reklama. Ø Займемся стилями. Для блока textreklamatop надо задать отступы, цвет и размер текста: #textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold;}Ø Блоку textreklamatext нет необходимости задавать стиль, а вот ссылкам внутри него надо задать отступы слева и справа, цвет и размер. Ссылки являются строчными элементами, а у нас они должны располагаться одна под другой, для этого зададим им свойство display:block. Чтобы ссылки располагались свободно, зададим расстояние между строк свойством line-height. А для того, чтобы первая буква ссылок была зеленого цвета (как на картинке) воспользуемся псевдоклассом first-letter: a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px;}a.reklama:first-letter{ color:green; font:600;}Ø Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание: #content{ float:left; width:507px; padding:15px;}#footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;}Ø Теперь добавим сам текст: <div id="content"> <img src="images/html5.jpg" align="left"><P> Web-технологии есть <b>концепция работы с информацией. </B>Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц. <div style="clear:both"></div> <img src="images/css.jpg" align="right"> <p>Она отличается следующими особенностями: <ul type=circle><li>техническая основа Web-технологий – локальные и глобальные сети, часто Интернет; <li>применение особого типа тонких клиентов: web-браузеров (типы и история, современное состояние браузеров отдаются на самостоятельное изучение); <li>преимущественно текстовая и статично-графическая подача информации (ослабление этой тенденции связано с развитием технологий связи и ПО, экспансией медиаконтента).</Ul></div><div id="footer"> © 2013 Все права защищены</div>Ø Ссылки в тексте не имеют класса, это будут ссылки по умолчанию, т.е. те, которые будут использоваться на всех страницах сайта, если не указано иное. Поменяем для них только цвет: a{ color:#000000; font:600;}Ø Осталось задать шрифт и размер для всего сайта. Для этого добавим эти свойства в стили тега body: body{ width:800px; padding-left:50%; margin:0px; font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px;background-color:#fffacd;}Ø Последний нюанс: сделаем так, чтобы при наведении курсора мыши на ссылки, их цвет менялся на зеленый: a:hover{ color:green;font:600;}
б) Резиновый дизайн Блочная верстка резинового сайта подразумевает, что наша страница будет растягиваться на весь экран. 1. Сначала надо определить, какая часть страницы будет растягиваться. В нашем случае самым простым вариантом будет растягивание правого края. Для этого нам понадобятся еще картинки:
2. Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок header со всем его содержимым в блок header_bg, зададим последнему ширину 100%, а фоном сделаем картинку header_bg.jpg. Аналогично поступим с блоками menu1, menu2 и menu3: <html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head><body> <div id="main"> <div id="header_bg"> <div id="header"> <div id="headertext1">Web-технологии </div> <div id="headertext2">Устремись вперед!</div> </div> </div> <div id="menu1_bg"> <div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Главная</a> | <a href="#" class="menu">Заказ проекта </a> | <a href="#" class="menu">Отзывы</a> </div> </div> </div> <div id="menu2_bg"> <div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок Web-мастера</a> | <a href="#" class="menu">Тест</a> </div> </div> </div> <div id="menu3_bg"> <div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (3812) 12-12-12 </div> </div> </div>...... </div></body></html>3. Далее блоки reklama и content со всем их содержимым поместить в блок conteyner: <div id="main">...... <div id="conteyner"> <div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас узнать что-нибудь новое: </div> </div> <div id="reklama_text"> <div id="textreklamatext">... </div> </div> <div id="reklama_bottom"></div> </div> <div id="content">..... <div style="clear:both"></div>..... </div> </div> <div id="footer"> © 2013 Все права защищены </div> </div>4. Подкорректируем таблицу стилей. Ø Выравнивание по центру нам больше не нужно, значит из body и main надо убрать эти свойства. Кроме того, фон для нашей страницы нам также больше не нужен, а ширина страницы теперь будет равна 100%. Следовательно, останется следующее: body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px;}#main{ width:100%;}Ø Теперь добавим стили для наших новых блоков. Как мы и решили: шириной 100%, высотой, как у дочерних блоков и с соответствующей фоновой картинкой: #header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x;}#menu1_bg{ width:100%; height:33px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x;}#menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x;}#menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x;}Ø Блок conteyner мы создали, как объединяющий блоки reklama и content. Стиль этому блоку не нужен, а вот положение блока content мы определим с помощью абсолютного позиционирования: #content{ position:absolute; left:270px; top:298px; padding:15px;}Ø Расстояние сверху равно сумме высот блоков header, menu1, menu2 и menu3. Расстояние слева определяется шириной блока reklama. Наконец, в блоке footer поменяем ширину на 100%: #footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;} 5. Посередине страницы у нас идет зеленая линия, это граница наших картинок (при фиксированном дизайне она отделяла нашу страницу от фона). Как ее убрать? Есть два пути. Первый - переделать сами картинки. Второй – уменьшить ширину блока на 1рх. Ширина наших картинок 800px, так же, как и ширина соответствующих блоков. Уменьшим ширину блока на 1px. Тогда и наша фоновая картинка обрежется справа на тот же 1px. Этим мы и воспользуемся, т.е. поменяем везде 800px на 799px. Окончательно таблица стилей будет выглядеть так: body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px;}#main{ width:100%;}#header{ width:799px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat;}#menu1{ width:799px; height:35px; background-image: url(images/menu1.jpg); background-repeat:no-repeat;}#menu2{ width:799px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat;}#menu3{ width:799px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat;}#reklama{ float:left; width:263px;}#reklama_top{ width:263px; height:67px; background-image: url(images/reklama_top.jpg); background-repeat:no-repeat;}#reklama_text{ width:263px; background-image: url(images/reklama_bg.jpg); background-repeat: repeat-y;}#reklama_bottom{ width:263px; height:35px; background-image: url(images/reklama_bottom.jpg); background-repeat:no-repeat;}#content{ position:absolute; left:270px; top:298px; padding:15px;}#footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;}#headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF;}#headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #faf46e;}#textmenu1{ padding-left:270px; padding-top:10px;}#textmenu2{ padding-left:300px; padding-top:10px;}#textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF;}a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px;}#textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold;}a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px;}a.reklama:first-letter{ color:#02663d;}a{ color:#000000;}a:hover{ color:#02663d;}#header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x;}#menu1_bg{ width:100%; height:33px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x;}#menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x;}#menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x;}
Использование блоков на Web-странице
Рисунок 1. Блочная модель Свойства CSS: ü margin ((-top, -bottom, -left, -right) – задает промежуток между содержимым (его границей) и краем поля; ü padding (-top, -bottom, -left, -right) – задает отступы (набивку), т.е. промежуток между содержимым и его границей. Пример: <HTML> <HEAD> <style type="text/css"> body {border: 2px solid red} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} p {margin-top: 10px; margin-left: 20px; border: 2px solid blue} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Пример: <HTML> <HEAD> <style type="text/css"> body {margin-top: 0px; margin-left: 0px; border: 2px solid red} p {margin-top: 10px; margin-left: 20px; padding-left: 15px; border: 2px solid blue} </style> </HEAD> <BODY> <P> Это абзац </BODY> </HTML>
Можно писать сокращенно для margin и padding, тогда идут расстояния в порядке: верх, право, низ, лево. Например, padding: 5px 10px 15px 5px.
|
||||||||||||||||||||
|
|
Последнее изменение этой страницы: 2016-08-15; просмотров: 565; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.239.123 (0.161 с.) |
Блочная модель – это стандартизированная часть технологии, используемой в браузерах.
Создадим такой блок, указав для него свойство float со значением left . Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.
