dalam tutorial ini saya akan memberikan source code membuat layout
simple dengan Css dan kalian dapat memodifikasinya :
<html>
<head>
<title> membuat layout web dengan css
</title>
<style>
#head-container
{
color: #000;
background: #8EB3DB;
}
#header
{
margin: 0 auto;
width: 860px;
padding: 20px;
background: #DAE6F3;
}
#header h1 { margin: 0; }
#navigation-container
{
float: left;
width: 100%;
color: #000;
background: #369FE0;
}
#navigation
{
margin: 0 auto;
width: 900px;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #257BB4; }
#content-container
{
float: left;
width: 100%;
color: #000;
background: #F7F9FC;
}
#content-container2
{
margin: 0 auto;
width: 900px;
}
#content-container3
{
float: left;
width: 900px;
background: #FFF url(two-fixed-background.gif) repeat-y 100% 0;
}
#content
{
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}
#content h2 { margin: 0; }
#right
{
float: right;
width: 240px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#right h3 { margin: 0; }
#footer-container
{
clear: left;
color: #fff;
background: #3399ff;
}
#footer
{
margin: 0 auto;
width: 900px;
text-align: right;
padding: 20px;
height: 1%;
}
</style>
</head>
<body>
<div id=”head-container”>
<div id=”header”>
<h1>
</h1>
</div>
</div>
<div id=”navigation-container”>
<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a
href=”#”>Services</a></li>
<li><a href=”#”>Contact
us</a></li>
</ul>
</div>
</div>
<div id=”content-container”>
<div id=”content-container2″>
<div id=”content-container3″>
<div id=”content”>
<h2>
This is Page heading
</h2>
<p>
This is paragraph 1
</p>
<p>
This is paragraph 2
</p>
<p>
This is paragraph 3
</p>
</div>
<div id=”right”>
<h3>
Right heading
</h3>
<p>
This is paragraph 1
</p>
</div>
</div>
</div>
<div id=”footer-container”>
<div id=”footer”>
Copyright © nama web kamu, 2010
</div>
</div>
</div>
</body>
</html>
EmoticonEmoticon