Senin, 29 Maret 2010

Contoh Web dengan CSS sederhana

Mau tampilan web seperti dibawah ini?

Langsung aja ya,
Ini codenya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modul 3 Soal 1</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

#wrapper {
border: 1px solid #000000;
margin: auto;
text-align: left;
width: 900px;
}

#header {
width: 898px;
height: 100px;
border: 1px fuchsia solid;
}

#maincontent {
width: 898px;
border: 1px gray solid;
}

#sidebar {
float: left;
clear: left;
width: 248px;
height: 500px;
border: 1px solid maroon;
}

#rightbar {
float: left;
width: 648px;
}

#top {
width: 648px;
height: 150px;
border: 1px solid green;
}

#content {
float: left;
height: 340px;
width: 60%;
border: 1px solid blue;
}

#right {
float: right;
height: 280px;
width: 39%;
border: 1px solid olive;
}

#footer {
width: 898px;
height: 100px;
border: 1px solid blue;
clear: both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="maincontent">
<div id="sidebar">
Sidebar
</div>
<div id="rightbar">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

Silahkan di copy paste,
Dan selamat mencoba, Semoga berhasil :)

1 komentar:

Write here, about you and your blog.
 
Copyright 2009 THE TRUST All rights reserved.
Blogger Templates created by Deluxe Templates
Wordpress Theme by EZwpthemes