In this tutorial you will learn how to styling the header
1. Open your favorite text editor
2. Create new file and named it as Homepage.html
3. Type this code
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132<html>
<title>
My Web Design Toturial
</title>
<head>
<style>
body{
/*reset margin & padding */
margin:0;
padding:0;
}
#Main_Holder{
margin:0 auto;
width:980px;
}
.header{
width:100%;
height:80px;
background:#000000;
color:#FFF;
font-size:12px;
}
.header .left {
width:100px;
float:left;
margin-top:10px;
}
.header .right {
width:300px;
float:right;
margin-top:20px;
text-align:right;
margin-right:10px;
}
.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">
<div class="left">
<div ><img src="images/logo.png" /></div>
</div>
<div class="right">
<div> <input type="text" value="search" /> <input type="submit" value="Search"> </div>
</div>
</div>
<div class="clearfix"></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 HelloWorld html file
Download Source
Post A Comment:
0 comments: