A simple CSS layout as in this picture: header, sidebar, content, footer
<html>
<head>
<title>A Simple CSS lyaout demo, Jiansen Lu</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">This is Header</div>
<div id="mainContent">
<div id="sidebar">This is sidebar</div>
<div id="content">This is content</div>
</div>
<div id="footer">This is footer<span style="display:none">
</span></div>
</div>
</body>
</html>
layout.css
/* CSS Document */
#header, #mainContent, #footer{
/*defaut all margin 0, The browser calculates a margin*/
margin:0 auto;
width:760px
}
#header {
height:100px;
background:#9c6;
/* header and main content distance 5 px */
margin-bottom:5px;
}
#mainContent {
position:relative;
height:400px;
}
#sidebar {
position:absolute;
top:0;
left:0;
width:200px;
height:398px;
background:#cf9;
}
#content {
margin-left:202px;
width:558;
height:398px;
background:#ffa;
}
#footer {
height:60px;
background:#9c6;
}
Video for this demo:
No comments:
Post a Comment