Day -3 Design Homepage
Creating Sidebar Menu and Content
1. Open your LayoutDesign.html with your favorite text editor
2. Save as your LayoutDesign.html with name Homepage.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116<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:20%;
min-height:300px;
}
.Sidebar_Menu{
width:100%;
}
.Sidebar_Menu ul{
list-style-type: none;
}
.Sidebar_Menu ul li{
}
.Sidebar_Menu ul li a{
text-decoration:none;
}
.Right_layout{
float:right;
width:70%;
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">
<div class="Sidebar_Menu">
<ul>
<li> <a href="#">First Menu</a></li>
<li> <a href="#">Second Menu</a></li>
<li> <a href="#">Third Menu</a></li>
<li><a href="#"> Fourth Menu</a></li>
</ul>
</div>
</div>
<div class="Right_layout">
<div>
<h2> Title Blog </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</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 homepage html file
Post A Comment:
0 comments: