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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<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: