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;
}
Tidak ada komentar:
Posting Komentar