Tutorial membuat css gambar
Tutorial membuat css gambar . Malam blogger pada kesempatan kali ini saya ingin berbagi mengenai css membuat gallery gambar.
bicara mengenai css memang sangat sulit saya juga baru belajar ngeblog dan ingin mempelajari mengenai css.
CSS dapat digunakan untuk membuat sebuah galeri gambar
contoh css untuk gallery gambar dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="file:///C|/Users/famoes/Downloads/images.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200" border="0"> </a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
</body>
</html>
hasilnya akan seperti ini.
Anda bisa membuatnya dan memodifikasinya sendiri.
semoga bermanfaat dan membantu. Tutorial membuat css gambar
bicara mengenai css memang sangat sulit saya juga baru belajar ngeblog dan ingin mempelajari mengenai css.
CSS dapat digunakan untuk membuat sebuah galeri gambar
contoh css untuk gallery gambar dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="file:///C|/Users/famoes/Downloads/images.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200" border="0"> </a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">description </div>
</div>
</body>
</html>
hasilnya akan seperti ini.
Anda bisa membuatnya dan memodifikasinya sendiri.
semoga bermanfaat dan membantu. Tutorial membuat css gambar