Creating Sidebar Menu and Content

Share it:

 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
3. Type this code into your Layout Design html file



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





Share it:

B-Publisher

Web design tutorial Day 3

Post A Comment:

0 comments:

Also Read

Basic Unity C# : Variable - Day 1

Seperti umumnya bahasa pemrograman lainnya, Unity C# menggunakan juga mempunyai type type data antara lain seperti vari

Unknown