TUTORIAL MEMBUAT DESAIN WEBSITE 3 KOLOM DENGAN STYLE CSS
yang perlu kita siapkan untuk membuat desain seperti diatas hanya dua file saja, yaitu file index.html dan style.css. index digunakan untuk meload ke sebuah web browser dan style.css digunakan sebagai desain websitenya. keduanya dikoneksikan agar bisa terbaca pada sebuah web browser. berikut contoh script yang bisa anda gunakan untuk mencobanya.
<html>
<head>
<title>Layout Website 3 Kolom</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<p><img class="gmbr_logo" src="logo.png"></p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="sidebar_kiri">
</div>
<div id="center">
</div>
<div id="sidebar_kanan">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Buat pada notepad script dibawah ini dan simpan dengan nama style.css :
*{margin:0 auto; padding:0}
body{background:#c0c0c0;
font-family:verdana; font-size:10px; color:#4c4e55;
}
#container{width:1007px; height:1369px;
background:url('bg.jpg') no-repeat;
}
#header{height: 150px;
border: 1px solid #009900;
}
#logo{width:300px; float:left}
.gmbr_logo{margin:45px 0px 0px 50px;}
#menu{width:700px; float:right;}
#menu ul{margin:60px; float:right; list-style:none;}
#menu li{float:left;}
#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold;
font-family:arial; font-size:14px; color:#313132;
}
#menu a:hover {background:#FFCC00; text-decoration:underline;}
#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0;
padding:3px; border:1px solid #009900;
}
#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px;
border:1px solid #009900;
}
#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0;
padding: 3px; border: 1px solid #009900;
}
#footer{height:201px; border:1px solid #009900;
clear: both;
}
makasih banyak gan sangat bermanfaat informasinya, nice post..
ReplyDeletehttp://obatherbalampuh.com/
terimakasih atas petunjuknya mas, insyaAllah akan saya terapkan di website saya yang baru
ReplyDelete