Цель:
- Изучить возможности CSS по работе с блочными объектами;
- Изучить основные свойства блоков;
Практическая часть
- Создайте html-файл lab8.htm, содержащий блочний элемент DIV.
- Создайте css-файл и подключите его к html-документу так:
- Создайте класс k1, в котором определите размер блока 200х200
пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной
в 3 пикселя).
- Подключите класс k1 к блоку в html-документе (<div class=»k1:>…</div>). Обратите внимание на то, как изменится блок.
- Добавьте еще пять таких же блоков размером 200х200 пикселей. Блоки располагаются друг под другом. Да?
- Для того что бы блоки располагались друг за другом необходимо добавиться в класс k1 объявление . Обновите и посмотрите изменения при изменение размеров окна.
- Теперь блоки «липнут» друг к другу, между ними нет расстояния, что бы добавить наружный отступ слева добавляем объявление .
Сохраните, просмотрите изменения. - Создайте в отдельном файле горизонтальный светофор из трех блоков.
Ширину блоков сделайте динамичной, что бы они изменялась в зависимости
от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому
блоку свой цвет. Отступы для body уберите с помощью css.
- Задайте первому блоку объявление display:none, а второму visibility: hidden; В чем отличия этих двух объявлений?
- Создайте файл, а в нем три блока. В первом блоке сделайте рамку,
шириной с разным типом линии с разных сторон блока. Во втором блоке
задайте фоновое изображение (background-image). В третьем блоке, задайте
фон… Добавляйте строчки по одной и смотрите изменения в браузере после каждой строки.
- Расположите блоки одни над одним. Для этого установите каждому блоку
объявление position: absolute; и порядок расположения блоков сверху
вниз: объявление z-index: 5; (у тех блоков что ниже, значение индекса
должно быть меньше, например 10, 20 и 30). Что бы блоки начинались не в
одной точке, им необходимо задать свойства left и top. - Создадим скругленные углы… Создаем четыре вложеных друг в друга блока.
опишем для внешнего блока класс ugol и назначим этот класс блоку
опишем класс для правого верхнего угла
и самостоятельно для левого нижнего и правого нижнего углов. - Создать новый html файл в который поместить изображение ягоды.
- В css-файл подключенный к html-файлу запишите стиль для изменения
прозрачности любого изображения при наведении на него курсора мыши.
данный код будет работать только в браузере Mozilla. Для Internet Explorer строчки должны быть следующими:
- Используя только блоки, создайте поле для игры в крестики-нолики.
- Используя блоки, их вложенность, фон, выравнивание, свойство float,
шрифт Georgia создайте вот такую вот шапку. Углы вырежьте
самостоятельно.
Материалы для практической работы:
Справочник по css:
