<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link href="layout2kolom.css" rel="stylesheet"
type="text/css"/>
<title>Tutorial CSS Layout</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<a
href="http://localhost/web_css"><h1>Tutorial CSS
Layout</h1></a>
</div>
<div id="sidebar">
Menu
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div id="content">
<h2>Selamat Datang</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.Donec vitae semper arcu.
</p>
</div>
<div id="footer">
<p>Copyright dan & copy : 2010 by Cheyus </p>
</div>
</div>
</body>
</html>
(ini adalah scrip layout2kolom.html)
*{
font-size: 12px;
font-family: sans-serif;
}
body {
background: #efefef;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
a: hover{
text-decoration: underline;
color: #0000cc;
}
h1 {
font-size: 36px;
margin: 0;
}
h2 {
font-size: 24px;
}
#wrapper {
width: 950px;
margin: auto;
background: #fff;
}
#header {
height: 150px;
background: #cdf;
}
#sidebar {
float: left;
width: 200px;
padding: 5px;
}
#content {
float: left;
width: 700px;
padding: 5px 5px 5px 20px;
border-left: 1px solid #ccc;
}
#footer {
clear: both;
background: #bbb;
}
#footer p{
text-align: center;
padding: 20px;
color: #fff;
font-size: 10px;
font-weight: 900;
}
(layout.css)
Tidak ada komentar:
Posting Komentar