Day 2 - Creating Layout : Header and Footer
1. Open your LayoutDesign.html with your favorite text editor
2. Type this code into your Layout Design html file
<html>
<title>
My Web Design Toturial
</title>
<head>
<style>
body{
/*reset margin & padding */
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
#Main_Holder{
width:100%;
}
.header{
width:100%;
height:80px;
background:#000000;
color:#FFF;
font-size:12px;
}
.Left_layout{
float:left;
width:50%;
min-height:300px;
}
.Right_layout{
float:right;
width:50%;
min-height:300px;
}
.Footer{
width:100%;
height:40px;
background:#09F;
color:#FFF;
font-size:12px;
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div id="Main_Holder">
<div class="header">
My Header
</div>
<div class="Left_layout">
Left Layout
</div>
<div class="Right_layout">
Right Layout
</div>
<div class="clearfix"> </div>
<div class="Footer">
MyFooter
</div>
</div>
</body>
</html>
4. Save again your html file.
5. Open your browser and browse your LayoutDesign html file
Post A Comment:
0 comments: