7.2. Визначаємо css| прозорість зображення
Розглянемо наступний код:
|
<img| src="a_11|.jpg" width="250|" height="153|" alt="|" hspace="21|" vspace="15|" style="opacity:0.25;filter:alpha(opacity=25|)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img| src="a_12|.jpg" width="250|" height="153|" alt="|" hspace="21|" vspace="15|" style="opacity:0.25;filter:alpha(opacity=25|)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img| src="a_13|.jpg" width="250|" height="153|" alt="Открыть| в новому вікні" hspace="21|" vspace="15|" border="0"style="opacity:0.25;filter:alpha(opacity=25|)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a> <img| src="a_14|.jpg" width="250|" height="153|" alt="|" hspace="21|" vspace="15|" style="opacity:0.25;filter:alpha(opacity=25|)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> |
Проведіть покажчиком миші по картинках внизу:
7.3. Css| розмір зображення, фон і рамка зображення.
Розглянемо наступний приклад:
|
<head|> <style| type="text/css"> img|.primer {width:450px|; height:397px|; padding:10px|; background:#eeeeee|; border:1px| solid| #cccccc|} </style> </head> <body|> <p><img| src="audi_big|.jpg" class="primer|" /></p> </body> |
Результат:
Позначайте реальний розмір зображення, щоб не спотворювати початкову якість.
Опис значень атрибутів
-
width| – ширина картинки.
-
height| – висота картинки.
-
background| – фон картинки.
-
padding| – поля картинки.
-
border| – рамка картинки.
8. Обтікання елементів web-сторінки в CSS|
CSS| атрибут float| визначає обтікання одних елементів іншими.
Приклад CSS| обтікання з параметром float:left|:
|
<title>CSS| обтекание</title> <style| type="text/css"> div|.flowers img| {float:left|; margin:26px|; border:1px| solid| #000000|} div|.flowers a:hover| img| {margin:26px|; border:1px| solid| #ffffff|} </style> </head> <body|> <div| class="flowers"|> <а href="#"><img| src=|"../images/bee.jpg" alt="|" width="160|" height="160|" border="0|" /></a> <а href="#"><img| src=|"../images/flower4.jpg" alt="|" width="160|" height="160|" border="0|" /></a> <а href="#"><img| src=|"../images/flower5.jpg" alt="|" width="160|" height="160|" border="0|" /></a> <а href="#"><img| src=|"../images/flower.jpg" alt="|" width="160|" height="160|" border="0|" /></a> <а href="#"><img| src=|"../images/flower3.jpg" alt="|" width="160|" height="160|" border="0|" /></a> <а href="#"><img| src="../images/bee2.jpg" alt="" width="160" height="160" border="0" /></a> </div> <div style="clear:left"> </div> </body> |
Як результат обтікання зображень, ми маємо галерею:
Атрибути і значення
-
div|.flowers img| – визначає властивості зображення img| в блоці <Div| class="flowers"|> </div>.
-
float:left| – визначає обтікання зліва направо.
-
margin|: – визначає відступ по всьому периметру зображення.
-
border:1px| solid| #000000| – визначає властивості межі елементу.
-
<div| style="clear:left"|> </div> – зупиняє обтікання з лівого боку, тобто обтікання не розповсюджуватиметься на даний блок і на наступні елементи.
Приклад CSS| обтікання з параметром float:right|:
|
<title>CSS| обтекание</title> <style| type="text/css"> div|.flowers_2 img| {float:right|; margin:26px|; border:1px| solid| #000000|} div|.flowers_2 a:hover| img| {margin:26px|; border:1px| solid| #ffffff|} </style> </head> <body|> <div| class="flowers_2"|> <H1| align="center">Цветы</h1> <а href="#"><img| src=|"../images/flower4.jpg" width="160|" height="160|" border="0|" /> </a> <а href="#"><img| src=|"../images/flower5.jpg" width="160|" height="160|" border="0|" /> </a> <а href="#"><img| src=|"../images/flower.jpg" width="160|" height="160|" border="0|" /> </a> <а href="#"><img| src=|"../images/flower3.jpg" width="160|" height="160|" border="0|" /> </a> <h1| align="center|" style="clear:both">Цветы| </h1> <а href="#"><img| src=|"../images/bee.jpg" width="160|" height="160|" border="0|" /> </a> <а href="#"><img| src=|"../images/bee2.jpg" width="160" height="160" border="0" /> </a> </div> </body> |
Атрибути і значення
-
clear:both| – відміняє обтікання як зліва, так і справа.
-
align="|" – визначає горизонтальне вирівнювання.
Завдання.
-
Розглянути усі приклади приведені у лабораторній роботі.
-
Виконати приклади з пунктів 5,6,7,8.
-
До сайту, стореного у лабораторній роботі №12 додати зміни:
-
додати горизонтальне меню;
-
прозорий фон для блока;
-
прозоре фонове зображення;
-
список з маркерами у вигляді зображення;
-
сторінку «Галерея» та додати ефект підсвічення зображення при наведенні курсору (п.7)
-
Оформити звіт: тема, мета, виконаті приклади (код+скріншот), скріншоти сторінок сайту з внесеними змінами.