Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

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 :)
Write here, about you and your blog.
 
Copyright 2009 THE TRUST All rights reserved.
Blogger Templates created by Deluxe Templates
Wordpress Theme by EZwpthemes