УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 25 Галерея Изображений


« Назад Далее »

CSS можно использовать для создания галереи изображений.

Klematis
Добавьте здесь описание картинки
Klematis
Добавьте здесь описание картинки
Klematis
Добавьте здесь описание картинки
Klematis
Добавьте здесь описание картинки

Галерея Изображений

Следующая галерея изображений создана с помощью CSS:

Пример

<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="css/klematis_big.htm"><img src="images/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>

</div>
<div class="img">
<a target="_blank" href="css/klematis2_big.htm"><img src="images/klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>

</div>
<div class="img">
<a target="_blank" href="css/klematis3_big.htm"><img src="images/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>

</div>
<div class="img">
<a target="_blank" href="css/klematis4_big.htm"><img src="images/klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>

</div>

</body>
</html>

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает




« Назад Далее »



© 2011 - 2022 Уроки CSS