Bagi kamu semua yang ingin membuat layout website menggunakan css, ni saya kasih tau scriptnya dan cara membuatnya. Membuatnya tidak begitu susah dan cukup mudah, langsung saja yang pertama kamu harus buat file css nya dulu karena di file css tersebut kamu mengatur bagian-bagian pada web seperti footer, header, navigasi, menu dll.. Nah simpan script dibawah ini dengan nama style.css
#wrapper {
margin:auto; width:800px; height:auto; border:2px solid black;
}
#header {
height:180px; border:1px solid blue; background-color:red;
}
#inner {
float:left; width:800px; background-color:yellow;
}
#footer {
clear:both; height:80px; border:1px solid red; background-color:purple;
}
#sidebar {
float:left; width:200px; height:400px; border:1px solid orange;
}
#content {
float:left; width:596px; height:400px; border:1px solid orange; background-color:blue;
}
#content-right {
float:right; width:200px; height:400px; border: 1px dotted blue; background-color:green;
}
langkah kedua yang harus kita lakukan adalah membuat file htmlnya, simpan script dibawah dengan nama index.html
<html>
<head>
<title>Membuat Layout Web dengan CSS</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
Main Content
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
setelah semua sudah di copas dan disimpan, simpan kedua file tersebut di satu folder, misalkan folder layout_css. Untuk menjalankan double klik pada file index.html atau jika anda semua menggunakan webserver langsung panggil http://localhost/layout_css maka akan muncul seperti gambar dibawah
margin:auto; width:800px; height:auto; border:2px solid black;
}
#header {
height:180px; border:1px solid blue; background-color:red;
}
#inner {
float:left; width:800px; background-color:yellow;
}
#footer {
clear:both; height:80px; border:1px solid red; background-color:purple;
}
#sidebar {
float:left; width:200px; height:400px; border:1px solid orange;
}
#content {
float:left; width:596px; height:400px; border:1px solid orange; background-color:blue;
}
#content-right {
float:right; width:200px; height:400px; border: 1px dotted blue; background-color:green;
}
langkah kedua yang harus kita lakukan adalah membuat file htmlnya, simpan script dibawah dengan nama index.html
<html>
<head>
<title>Membuat Layout Web dengan CSS</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
Main Content
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
setelah semua sudah di copas dan disimpan, simpan kedua file tersebut di satu folder, misalkan folder layout_css. Untuk menjalankan double klik pada file index.html atau jika anda semua menggunakan webserver langsung panggil http://localhost/layout_css maka akan muncul seperti gambar dibawah
nah itu tadi sedikit pengetahuan cara membuat layout sederhana menggunakan css. O iya anda semua juga bisa ngoprek tu css biar sesuai dengan yang anda inginkan yang penting anda tahu mengenai css....
0 komentar:
Posting Komentar