Создание стилей для меню сайта
| <! Меню> <ul class=”menu”> <li>Главная</li> <li><a href="catalog.html">Каталог</a></li> <li><a href="contacts.html">Контакты</a></li> </ul> | body { backgroundcolor: #f8f8f8; } .menu li { fontstyle: italic; fontsize: 20px; liststyletype: none; } .menu li a { color: #8B00FF; } |
Задание
В этом задании вы будете дорабатывать задание второго урока, придавая ему стили CSS.
1. Создать файл style.css, в котором будут храниться все стили вашей работы. Подключить этот файл ко всем страницам.
2. Установить фон на страницах.
3. Меню сайта:
a. Для всех ссылок меню задать определённый стиль. (Цвет текста, размер шрифта, начертание шрифта и т.д.)
b. Убрать маркеры списка.
i. *установите в качестве маркеров произвольные изображения
4. Странице “Контакты”:
a. Задать значения ширины и высоты для полей ввода.
b. Задать стили для текста, внутри полей input. (Цвет текста, размер шрифта и т.д.).
c. Следите за тем, чтобы на странице всё выглядело гармонично, не выбирайте слишком резких цветов.
5. *Для изображений, размещенных на странице задать рамку произвольным цветом.
6. *Приветствуются самостоятельные дополнения ваших работ в пределах пройденной темы.
Дополнительные материалы
1. Статья про добавление стилей на страницу
|
|
|
2. Интересная статься про селекторы
3. 30 CSSселекторов, о которых полезно помнить
4. Вложенность селекторов
5. Группировка и вложенность селекторов
Используемая литература
Для подготовки данного методического пособия были использованы следующие ресурсы:
1. http://htmlbook.ru/samcss/sposobydobavleniyastileynastranitsu
2. http://htmlbook.ru/samcss/dochernieselektory
3. https://learn.javascript.ru/cssselectors
4. https://learn.javascript.ru/cssunits
5. http://technologyweb.org/%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE
%D0%B2%D0%BA%D0%B0%D0%B8%D0%B2%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D
0%BD%D0%BE%D1%81%D1%82%D1%8C/
Дата добавления: 2021-06-02; просмотров: 49; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!