CSS может быть использован для создания галереи изображений.
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Галерея изображений
Следующяя галерея изображений создается с CSS:
<html>
<head>
<meta charset="utf-8">
<style>
div.main{ width:745px; margin:auto; }
div.img {
border:1px solid #0000FF;
float:left;
height:auto;
margin:2px;
text-align:center;
width:180px;}
div.img img { border:1px solid #FFF; display:inline; margin:3px; }
div.img div.cont { height:155px; }
div.img a:hover img { border:1px solid #0000FF; }
div.desc { font-weight:normal; margin:2px; text-align:center; width:100%; }
</style>
</head>
<body>
<div class="main">
<div class="img"><div class="cont"><a href="/images/tiger1.png" target="_blank"><img width="107" alt="Tiger" src="/images/tiger1.png" /></a></div>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="img"><div class="cont"><a href="/images/tiger2.png" target="_blank"><img width="107" alt="Tiger" src="/images/tiger2.png" /></a></div>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="img"><div class="cont"><a href="/images/tiger3.png" target="_blank"><img width="107" alt="Tiger" src="/images/tiger3.png" /></a></div>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="img"><div class="cont"><a href="/images/tiger4.png" target="_blank"><img width="107" alt="Tiger" src="/images/tiger4.png" /></a></div>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</div>
</body>
</html>
Была ли эта информация полезной?
