CSS Tutorial : Membuat Galery Gambar Menggunakan CSS dengan Mudah ][ Koplak Movie dan Informasi Terupdate Abad Ini, Belajar Tutorial Web Yang Kegampangan ][ Kegampangan Blog

CSS Tutorial : Membuat Galery Gambar Menggunakan CSS dengan Mudah

Category: Belajar, Css Tutorial, Web

jika dilihat dari apa yang telah dipelajari sepertinya gampang untuk membuat Galery Gambar. Paling Kita Hanya Menggunakan Border, Display, Margin, Padding, Height, Width dsb...

Gampang Deh...

Kode Program :

div.gam
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.gam img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.gam a:hover img
{
border:1px solid #0000ff;
}
div.pang
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

HTMLnya :
<div class="gam">
<a href="http://kegampangan.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjE2UreUlxjaIMzo5FKC-cMPKEQiqJopAhH6Enqj4LspbPHkmnrthwFnabl_IBcTuWAOPJmmQDZrM2_0SuUibfZkplMGNSlopQm494sTHkJ4UhHebyLxcW84dl5aFPpJ3FC516LWSC3ApD/s1600/css.png" width="110" />
</a>
<div class="pang">
CSS Pengenalan</div>
</div>
<div class="gam">
<a href="http://kegampangan.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirO6rtuIVU37NFXoqnnp3RKi4hTAy6J30Rp3Y6BGYrmROS8YLcWrXZcvMgNFIj2ZVP4wlWrpuuqYF0G_28O5Xk_KmVui0qvDrdVJ2s6ZA2Caw21TgKD9iYL9zkNI-vk7_FEWjaM1ZjD4Xv/s1600/cssa.gif" width="110" />
</a>
<div class="pang">
CSS Model Kotak</div>
</div>
<div class="gam">
<a href="http://kegampangan.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_9TaHUpHbW6o-8KfoMkeK1Ko9MujSU7o7e0BxIXT9nFQNtQJHDbEGW_WDWC9fpkosAXgk8P2aXF2F9JIj8I8vCjJ6izsB2BVe0GYMpC9XiXWWqcRfE-Me06BIgLNKsmYuKTbnyv5pECIy/s1600/css+box.jpg" width="110" />
</a>
<div class="pang">
CSS Penggayaan</div>
</div>
<div class="gam">
<a href="http://kegampangan.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgKh99Rs5Gdp5VwbXgXoTdoOixCQMCcyorgLSTe5C93hMXqOIhgKUxpsvU_Os8r5PxFkM_dH68KP8yg_mJslePbrvK3KPrkvEeZQ2zz-m1QurB98RTQmjxOwAU0djQ32ZUkWEoWbnTl1gr/s1600/css.jpg" width="110" />
</a>
<div class="pang">
CSS Lanjutan</div>
</div>