Оформление фона веб-страницы

2019-08-13

523

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 23

Полезные примеры:

body {

background-image:url('http://www.mysite.ua/mydir/Fon_picture.png'); }

Задание 21. Дополнить эту страницу как в ней записано.

<html><head><style type='text/css'>#imgcont{height:1000px;width:900px;}#text{color:grey;width:250px;height:280px;}#imgsquare{color:grey;position:fixed;top:50px;right:100px;border-style:solid;border-width:1px;width:250px;height:280px;}</style><body><div id='imgcont'><p id='text'>1. Вставьте в данный элемент картинку по вашему выборус помощью свойства <b>background-image</b>. Изображение при этом не должно повторятся.</p></div><div id='imgsquare'>2. Перенесите паучка в данную рамку с помощью свойства <b>background-position</b>. При этом при прокрутке страницы изображение паука должно оставаться в рамке.</div><p> Текст-наполнитель,это текст-наполнитель.</p><p> Текст-наполнитель,это текст-наполнитель.</p><p> Текст-наполнитель,это текст-наполнитель.</p><p> Текст-наполнитель,это текст-наполнитель.</p></body></html>

Просмотреть в браузере откорректированную страницу. Сделать скриншот для отчета.

Оформление ссылок

Задание 22 . Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>a:link {text-decoration:none;color:green;}a:visited {text-decoration:none;color:green;}a:hover {text-decoration:underline;color:red;font-size:1.1em;}a:active {text-decoration:none;color:red;font-size:1.1em;}</style></head><body><a href='http://www.gup.ru'> gup.ru </a><p> Попробуйте навести курсор мыши на ссылку выше. </p></body></html>

Сделать скриншот для отчета.

Списки

Задание 23. Для этой страницы создайте маленькую картинку (например, marker.gif) и разместите ее в доступном для страницы месте. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>ul.lis1 {list-style-type:square;}ol.lis2 {list-style-type:upper-roman;}ul.lis3 {list-style-image:url('marker.gif');}</style> </head><body><p> Значимые места в России: </p><ul class='lis1'><li>Москва</li><li>Санкт-Петербург</li><li>Новосибирск </li></ul><i> Маркер списка имеет вид квадрата (по умолчанию имеет вид круга). </i><p> Города России, отсортированные по численности: </p><ol class='lis2'><li>Москва</li><li>Санкт-Петербург </li><li>Нижний Новгород</li></ol><i> Элементы списка нумеруются римскими цифрами (по умолчанию арабскими). </i><p>Наиболее известные web-сервера:</p><ul class='lis3'><li>Apache</li><li>Microsoft</li><li>Google</li></ul><p><b>Обратите внимание:</b> маркер этого списка является изображением.</body></html>

Сделать скриншот для отчета.

Таблицы

Задание 24. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>table, th, td{border-style:solid;border-width:1px;border-collapse:collapse;padding:2px;}th {height:28px;background-color:#f892dc;color:white;border-color:black;}.ts1 {background-color:#ffeffb;}</style></head><body><h4> Самые высокие небоскребы по континентам: </h4><table><tr><th> Континент </th><th>Название</th><th>Город</th><th>Высота, м</th></tr><tr><td>Австралия и Океания </td><td>Q1 </td><td>Голд-Кост</td><td>323</td><tr class='ts1'><td>Азия </td><td>Дубайская башня </td><td>Дубай</td><td>828</td></tr><tr><td>Африка</td><td>Карлтон Сентр Офис Тауэр</td><td>Йоханнесбург</td><td>223</td></tr><tr class='ts1'><td >Европа</td><td>Башня 'Москва'</td><td>Москва</td><td>302</td></tr><tr><td>Северная Америка</td><td>Сирс Тауэр</td><td>Чикаго</td><td>443</td></tr><tr class='ts1'><td>Южная Америка</td><td>Парке Сентраль Торре Эсте</td><td>Каракас</td><td>225</td></tr></table></body></html>

Сделать скриншот для отчета.

Задание 25. Создать веб-страницу с правилами CSS, которые отформатируют таблицу согласно следующим требованиям:

Ширина таблицы равна 700 пикселей. Высота первой строки равна 70 пикселей. Границы таблицы и ячеек соединены. Таблица имеет вид:

Текст ячейки выровнен по верхнему краю	Текст ячейки выровнен по центру	Текст ячейки выровнен по нижнему краю	Текст ячейки выровнен по центру
Толщина границы этой ячейки равна 2 пикселя	Толщина границы этой ячейки равна 3 пикселя	Толщина границы этой ячейки равна 4 пикселя	Толщина границы этой ячейки равна 1 пиксель
Текст ячейки выровнен по левому краю	Текст ячейки выровнен по правому краю	Текст ячейки выровнен по центру

Просмотреть страниц в браузере, сделать скриншот для отчета.

Псевдоклассы

Псевдоклассы - это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а также положения этого элемента (тега) в общем потоке документа, что позволяет добавить в страницы дополнительную динамику и логику. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.

Псевдо-класс :first-child позволяет выбрать элемент, который является первым потомком в его родительском элементе.

Задание 26. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>p:first-child {color: red;}</style></head><body><p> Это первый абзац, поэтому он будет оформлен. </p><p> Это второй абзац он не будет оформлен. </p><p> Это третий абзац он тоже не будет оформлен. </p></body></html>

Сделать скриншот для отчета.

Псевдо-класс :first-letter позволяет оформить первую букву указанного элемента.

Задание 27. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>p:first-letter {font-size:1.8em;color:green;font-family:'MS Trebuchet';border:3px solid blue;padding:2px; } p {font-family:'MS Trebuchet';}</style></head><body><p>На золотом крыльце сидели</p><p>Царь, царевич, король, королевич</p></body></html>

Сделать скриншот для отчета.

Псевдо-класс :focus позволяет выбрать активные input элементы формы.

Задание 28. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>:focus {background-color:yellow; } </style></head><body><form>Введите Ваше имя: <input type='text' /></form><p><b>Обратите внимание:</b> щелкните в текстовое поле, чтобы сделать его активным.</p></body></html>

Сделать скриншот для отчета.

Псевдо-класс :first-line позволяет оформить первую строчку указанного элемента.

Задание 29. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>p:first-line {font-size:1.2em;font-weight:bold;color:green;} </style></head><body><p>Мост — искусственное сооружение, возведенное через реку, озеро, пролив или любое другое водное препятствие. Мост, возведенный через дорогу, называют путепроводом, мост через овраг или ущелье — виадуком.</p><p>Мост является одним из древнейших инженерных изобретений человечества.</p></body></html>

Сделать скриншот для отчета.

С помощью псевдо-классов :before и :after Вы можете вставлять произвольное содержимое до и после указанных элементов.

Задание 30. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>p:before{content:'CSS - ';font-weight:bold;} p:after{content:' HTML документы.';} </style></head><body><p>позволяет оформлять</p></body></html>

Сделать скриншот для отчета.

Задание 31. Для удобства просмотра результатов работы создать корневую веб-страницу работы, откуда сделать ссылки на все 30 веб-страниц выполнения данной работы. Страницу оформить названием лабораторной работы, своим фото, фамилией и группой.

2019-08-13

523

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 23

Обсуждение в статье: Оформление фона веб-страницы

Обсуждений еще не было, будьте первым... ↓↓↓