Belajar HTML: Galeri

CSS Galeri
«Sebelumnya
Tonton video tutorial ini
Next Chapter »

CSS dapat digunakan untuk membuat galeri foto.
Klematis
Tambahkan deskripsi gambar disini
Klematis
Tambahkan deskripsi gambar disini
Klematis
Tambahkan deskripsi gambar disini
Klematis
Tambahkan deskripsi gambar disini

Galeri

Berikut galeri foto dibuat dengan CSS:
contoh
<html>
<head>
<style>
div.img {
     margin: 5px;
     padding: 5px;
     border: 1px solid # 0000ff;
     height: auto;
     width: auto;
     float: kiri;
     text-align: center;
}

div.img img {
     display: inline;
     margin: 5px;
     border: 1px #ffffff padat;
}

div.img a: hover img {
     border: 1px solid # 0000ff;
}

div.desc {
     text-align: center;
     font-weight: normal;
     width: 120px;
     margin: 5px;
}
</ style>
</ head>
<body>

<div class = "img">
   <a target="_blank" href="klematis_big.htm">
     <img src = "klematis_small.jpg" alt = "Klematis" width = "110" height = "90">
   </a>
   <div class = "desc"> Tambahkan deskripsi gambar disini </ div>
</ div>
<div class = "img">
   <a target="_blank" href="klematis2_big.htm">
     <img src = "klematis2_small.jpg" alt = "Klematis" width = "110" height = "90">
   </a>
   <div class = "desc"> Tambahkan deskripsi gambar disini </ div>
</ div>
<div class = "img">
   <a target="_blank" href="klematis3_big.htm">
     <img src = "klematis3_small.jpg" alt = "Klematis" width = "110" height = "90">
   </a>
   <div class = "desc"> Tambahkan deskripsi gambar disini </ div>
</ div>
<div class = "img">
   <a target="_blank" href="klematis4_big.htm">
     <img src = "klematis4_small.jpg" alt = "Klematis" width = "110" height = "90">
   </a>
   <div class = "desc"> Tambahkan deskripsi gambar disini </ div>
</ div>

</ body>
</ html>

Belajar HTML

Minggu, 23 November 2014

Galeri

Tidak ada komentar:

Posting Komentar