HTML-верстка: инструменты и приемы профессиональной front-end разработки

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


назад вперед
Cars
Добавьте описание изображения
Cars
Добавьте описание изображения
Cars
Добавьте описание изображения
Cars
Добавьте описание изображения

Фотогалерея

Фотогалерея создана с помощью 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 href="audi-big.html"><img src="image/audi-big.jpg" alt="Cars" width="120" height="90" /></a>
<div class="desc">Добавьте описание изображения</div>
</div>
<div class="img">
<a href="bentley-big.html"><img src="image/bentley-big.jpg" alt="Cars" width="120" height="90" /></a>
<div class="desc">Добавьте описание изображения</div>
</div>
<div class="img">
<a href="bmw-big.html"><img src="image/bmw-big.jpg" alt="Cars" width="120" height="90" /></a>
<div class="desc">Добавьте описание изображения</div>
</div>
<div class="img">
<a href="nissan-big.html"><img src="image/nissan-big.jpg" alt="Cars" width="120" height="90" /></a>
<div class="desc">Добавьте описание изображения</div>
</div>

</body>
</html>

 

Посмотреть

Отличие галереи, приведенной на этой странице от галереи в примерах в том, что в этой галерее большие изображения выделены светло-зеленой рамкой. Впрочем, если вы внимательно изучали все до этого места, то вам будет просто самим добавить рамку того цвета, который вам нравится.

Что еще можно было бы сделать? Сделать ссылками не только изображения, но и подписи к ним. На страницах с большими изображениями можно было бы прописать обратные ссылки не только тексту "В галерею", но и самим изображениям. А можно было бы изображениям прописать ссылки на следующее большое изображение, а последнему изображению ссылку на возврат к превьюшкам. Так что у вас есть простор для фантазии.



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта