CSS Tutorial : Cara Mudah Membuat Galery Gambar Menggunakan CSS

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://web-rpl.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLPOhPE77xME0slb9qtlktlrGWoNHPSFL3OvTfPjhAgcEG4z_WEwUXQteV2phCkQjSbScSCPStUPicAb8ZMm2AjzNY2EtHJ1Mm5pNGKZrGR-S9KckJdpJeG6KMV1DdpB5Ep9jkstNiYrm7/s1600/css.png" width="110" />
</a>
<div class="pang">
CSS Pengenalan</div>
</div>
<div class="gam">
<a href="http://web-rpl.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7tST2wX5CYnXqV6PNw2dDRA8CoIN6M-BbpOpJuB_lNdYg54n4NOI7weGxwIfUmxTTCa6CwAnGuavu9KqK61UAjaWEDRv_xPmAJQZ7vIGATCxCOrq4nycmUQT7WhnA8iJJeiHqwurAlxn/s1600/cssa.gif" width="110" />
</a>
<div class="pang">
CSS Model Kotak</div>
</div>
<div class="gam">
<a href="http://web-rpl.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSp5kQZhCF2Oblt1zlAb4_7ioQtyB-OeSRIumXjCndjSsGtrd7WZG6cF-ktFZYtMpWmlaoDEwAyWLobd44lV8V4Xe7b0pnvQoglSl7L8aEPNefM8xFkPuQ2F0VTTK_DK7GAeUjdH8Ehxl/s1600/css+box.jpg" width="110" />
</a>
<div class="pang">
CSS Penggayaan</div>
</div>
<div class="gam">
<a href="http://web-rpl.blogspot.com/">
<img height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8qndpD2DdH4r5m4bFyZWXUctWPjRlA-OTzLdl2uGLsnnOS-gVj0-bq5_eg_vhtwz2FYTv4Yrsqf_SFKOIbqwFCDEDoSmqs0ka3-DIyspHrg-Xa2sSUkTJkNuFJm4DN6FLZMas6Gg7VVm/s1600/css.jpg" width="110" />
</a>
<div class="pang">
CSS Lanjutan</div>
</div>

Hasilnya :

CSS Pengenalan

CSS Model Kotak

CSS Penggayaan

CSS Lanjutan

Mohon Maaf Sedikit...

Posted in: Css Tutorial