Membuat Website Sederhana Menggunakan CSS

Setelah kita mengetahui bagaimana cara membuat layout menggunakan css, terasa kurang menarik apabila kita tidak mengedit layout tersebut menjadi website sederhana.

langkahnya adalah kita membuat file css stylenya dulu, coding dapat anda lihat dibawah ini:

Coding :

* { margin: 0; } body { margin:5px auto; padding:0; font:0.72em/150% verdana; } #wrapper { margin:auto; width:980px;} #header { height:80px; margin:0px auto;background:#000;} #header-content{height:70px; margin:auto; background:#fff url(1.jpg);} #menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;} #logo { float:left; margin:10px 10px 10px 50px; height:50px;} #site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;} #search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;} #inner { float:left; margin:0px;} #footer { clear:both; height:60px; background:#FFCC99;} #footer p { text-align:center;} #sidebar { float:left; width:200px; height:400px; background-color:#FFCC99} #content { float:right; width:780px; height:400px; background:#FFF} #content-top { clear:both; margin:auto; width:780px; height:140px; background-image:url(sky.jpg)} #content-main { float:left; margin:auto; width:480px; height:240px;} #content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;} .style1 {font-size:x-small} #content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;} #content-right { float:right; margin:10px auto; width:260px; border: 2px solid green; background:#FFCC99} #content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;} #content-right ul{ padding: 10px 20px 20px 40px; list-style:square;} #leftmenu ul { width:200px; list-style-type:none; padding:0; margin:0;} #leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;} #leftmenu a { padding: 5px 0px 5px 15px; display:block; background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 } #leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}</a>

Untuk Code HTML nya anda bisa lihat dibawah ini:

Coding :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>aplikasi6</title> <link type="text/css" rel="stylesheet" href="layout2.css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-content"> <div id="menu-top"> Home | Link | Contact | RSS | About Us </div> <div id="logo"> <img src="um.jpg" width="50"/> </div> <div id="site-title"> <h2>TEKNIK ELEKTRO</h2> <--!Untuk lanjutannya anda dapat download full coding dibawah ini--> </a>

Screen Shoot File:

Anda Dapat Download Full Coding HTML Disini
Anda Dapat Download Full Coding CSS Disini

Wednesday, March 3, 2010

Membuat Website Sederhana Menggunakan CSS

0 comments:

About Me

Hubungi Saya

Post Blog

Iklan Vertikal

Rank Site

Tracking

Trafic Site

Blog Kunjungan

Followers

Recent Post

Recent Comments