АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Пример 3.37. Позиционирование слоёв

Читайте также:
  1. I. 1.1. Пример разработки модели задачи технического контроля
  2. I. Сопоставление двух слоёв дермы
  3. II. Примеры
  4. IV. ТИПОВОЙ ПРИМЕР РАСЧЕТОВ.
  5. Plot(t,x),grid,title('Пример 3.1'),legend('X1','X2')
  6. X. примерный перечень вопросов к итоговой аттестации
  7. Абсолютное позиционирование
  8. Б2. Пример №2
  9. Берите пример с детей
  10. Буду на работе с драконом примерно до 21:00.
  11. Булевы функции. Способы задания. Примеры.
  12. В нашем примере каждый доллар первоначального депозита обеспечил 5 дол. средств на банковских счетах.

XHTML 1.0CSS 2.1CSS 3IE 7+IE 9+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Позиционирование слоёв </title> <style type="text/css" >. photo { width: 300px; height: 407px; position: relative; }.img,.comment,.tool { position: absolute; }.comment { background: url( images/comment_num.png ) no-repeat; width: 51px; height: 31px; /* Размеры слоя */ text-align: center; /* Выравнивание по центру */ right: 10px; top: 15px; /* Положение от правого верхнего угла */ }.tool { background: #000; /* Для IE */ background-color: rgba( 0,0,0,0.6 ); /* Чёрный полупрозрачный фон */ padding: 3px 0 0; bottom: 0; /* Положение от нижнего края */ width: 100%; /* Ширина слоя */ }.tool img { margin-left: 5px; } </style> </head> <body> <div class="photo" > <div class="img" ><img src="images/dog.jpg" alt="Щенок" /></div> <div class="comment" title="Количество комментариев" > 134 </div> <div class="tool" > <img src="images/comment_add.png" alt="Добавить комментарий" /> <img src="images/photo_author.png" alt="Информация об авторе" /> <img src="images/photo_star.png" alt="Добавить в избранное" /> </div> </div> </body></html>


 


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

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

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.004 сек.)