Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...
| <html><head> | |
| <title>Menu Dengan Gambar</title> | |
| <style type="text/css"> | |
| <!-- | |
| * {margin: 0; padding: 0;} | |
| div { | |
| margin: 20px; | |
| } | |
| ul { | |
| list-style-type: none; | |
| width: 500px; | |
| } | |
| h3 { | |
| font: bold 20px/1.5 Helvetica, Verdana, sans-serif; | |
| } | |
| li img { | |
| float: left; | |
| margin: 0 15px 0 0; | |
| } | |
| li p { | |
| font: 200 12px/1.5 Georgia, Times New Roman, serif; | |
| } | |
| li { | |
| padding: 10px; | |
| overflow: auto; | |
| } | |
| li:hover { | |
| background: #eee; | |
| cursor: pointer; | |
| } | |
| --> | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <ul> | |
| <li> | |
| <img src="1.jpg"> | |
| <h3>Headline</h3> | |
| <p>Lorem ipsum dolor sit amet...</p> | |
| </li> | |
| <li> | |
| <img src="2.jpg"> | |
| <h3>Headline</h3> | |
| <p>Lorem ipsum dolor sit amet...</p> | |
| </li> | |
| <li> | |
| <img src="3.jpg"> | |
| <h3>Headline</h3> | |
| <p>Lorem ipsum dolor sit amet...</p> | |
| </li> | |
| <li> | |
| <img src="4.jpg"> | |
| <h3>Headline</h3> | |
| <p>Lorem ipsum dolor sit amet...</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
kalau copasnya benar gambarnya bakal begini nih
OKE.........
0 comments:
Post a Comment