Цель работы. (Используя Htmlbook.ru)

Работа с СSS. Рецепты CSS

(Используя Htmlbook.ru)

 

Цель работы

 

Выполнить практические задания по:

- Вёрстке;

- добавлению картинок

- добавление рамки вокруг изображения

- форматирование изображений

- эффекты с изображениями

- размещению линий и рамок

- размещение отступов и полей

- работа со скруглениями и уголками

- работа со списками

- работа с ссылками

- работа с таблицами

Работа в лаборатории

 

Сделать практическую работу по следующим вопросам:

Как выровнять слой по центру веб-страницы?

Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?

Как разместить два слоя с заданной шириной рядом по горизонтали?

Как сделать слой полупрозрачным?

Как убрать полосы прокрутки?

 

Как добавить картинку на веб-страницу?

Почему изображение не показывается на сайте?

Почему изображения на странице видны только на моем компьютере и не отображаются на другом?

Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?

 

Как добавить рамку к изображению?

Как изменить цвет рамки вокруг изображения-ссылки?

Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

Как убрать рамку вокруг изображений-ссылок?

 

Как выровнять фотографию по центру веб-страницы?

Как добавить подпись под фотографией?

Как разместить несколько картинок рядом по горизонтали?

Как разместить слитно два изображения друг под другом?

Как сделать изображение на всю ширину окна браузера?

Как сделать обтекание картинки текстом?

Как сделать, чтобы фотография располагалась по правому краю окна браузера?

 

Как заменить текст изображением?

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Как установить изображение полупрозрачным?

 

Как добавить линию возле текста?

Как добавить рамку вокруг кнопки?

Как сделать горизонтальную пунктирную линию с рисунком?

Как сделать цветную горизонтальную линию?

 

Как изменить отступы на веб-странице?

Как изменить расстояние между абзацами текста?

Как мне для каждого абзаца добавить отступ первой строки?

Как убрать отступы вокруг формы?

Как убрать отступы и поля у всех элементов на странице?

Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

 

Как выделить строку с помощью блока с закруглениями?

Как добавить скругленные уголки у фотографии фиксированного размера?

Как сделать блок со скругленными уголками без рисунков?

Как сделать блок со скруглёнными уголками через CSS3?

Как сделать круглые изображения?

Как сделать рамку со скругленными уголками?

Как создать рамку со скругленными уголками без изображений?

 

Как изменить цвет текста в списке?

Как разместить элементы списка горизонтально?

Как сделать вложенный список?

Как сделать горизонтальное меню с наклоном?

Как убрать отступ сверху и снизу от списка?

Маркированный список

Как вместо символа маркера использовать картинку?

Как изменить отступ слева от маркеров списка?

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Как убрать маркеры в маркированном списке?

Как увеличить расстояние от маркера до текста?

 

Как добавить пунктирное подчеркивание к ссылкам?

Как добавить рисунок к внешним ссылкам?

Как заголовок сделать ссылкой?

Как изменить вид ссылки при наведении на нее курсора мыши?

Как изменить цвет ссылки и фона под ней?

Как на странице сделать ссылки разных цветов?

Как открыть ссылку в новом окне?

Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

Как сделать, чтобы слой целиком был ссылкой?

Как убрать подчеркивание у ссылок?

Как убрать пунктирную рамку вокруг ссылок?

Как установить цвет посещённой ссылки?

 

Как выделить другим цветом первую строку таблицы?

Как выровнять содержимое ячеек таблицы по верхнему краю?

Как сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши?

Как создать таблицу в HTML5 и указать её параметры через стили?

Как установить таблицу полупрозрачной, а часть ячеек нет?

Как установить ширину таблицы через стили?

Каким стилевым свойством заменить атрибут cellpadding тега <table>?

Каким стилевым свойством заменить атрибут cellspacing тега <table>?

 

Продемонстрировать преподавателю практическую часть, оформить протокол

Цель работы

1) Научиться форматировать текст с помощью применения тегов форматирования текста.

2) Научиться управлять цветом шрифта и фоном.

3) Научиться размещать рисунки и фотографи на WEB-странице

4) Научиться работать с гиперссылками

5) Научиться применять списки на WEB-странице

6) Научиться работать с таблицами на WEB-странице.