To create a web page layout we need HTML, CSS. Here i will give you the common template code which is useful for every webpage. In this template we are not using any tables. Only div tags will be used to create a page template. Before writing the HTML code, Positioning is very important. By using CSS, we can give the div position style.
CSS Code:
File: styles.css
body{
margin: 0px;
padding: 0px;
display: block;
text-align: center;
}
.container{
width: 70em;
margin: auto;
}
.content{
text-align: left;
height: 500px;
}
.header{
height: 123px;
background-color: #f4f4f4;
}
.firstdiv{
height: 500px;
background-color: yellow;
width: 33%;
text-align: left;
}
.seconddiv{
height: 500px;
text-align: center;
background-color: orange;
width: 33%;
}
.thirddiv{
height: 500px;
background-color: pink;
width:33%;
text-align: right;
}
.left{
float:left;
}
.footer{
clear: both;
background-color: green;
height: 233px;
}
margin: 0px;
padding: 0px;
display: block;
text-align: center;
}
.container{
width: 70em;
margin: auto;
}
.content{
text-align: left;
height: 500px;
}
.header{
height: 123px;
background-color: #f4f4f4;
}
.firstdiv{
height: 500px;
background-color: yellow;
width: 33%;
text-align: left;
}
.seconddiv{
height: 500px;
text-align: center;
background-color: orange;
width: 33%;
}
.thirddiv{
height: 500px;
background-color: pink;
width:33%;
text-align: right;
}
.left{
float:left;
}
.footer{
clear: both;
background-color: green;
height: 233px;
}
File: index.html
<!DOCTYPE html>
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="header">
<h1 style="margin:0px;">Header content here</h1>
</div>
<div class="container">
<div class="content">
<div class="firstdiv left">
<h1>LeftDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="seconddiv left">
<h1>middleDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="thirddiv left">
<h1>RightDiv</h1>
<p>This is a sample page created by xxx.
</div>
</div>
</div>
<div class="footer">
<h1 style="margin:0px;">Footer Content Here</h1>
</div>
</body>
</html>
Output Page:
Want more layouts? keep watching my blog http://websitetemplatestutorial.blogspot.in/
No comments:
Post a Comment