A simple html page template
This example is a ridiculously simple web page layout template which contains the 3 basic building blocks of a web page: the header, the main content area, and the footer. The rest are up to your imagination and creativity to make it a more fancy web page.
[code language=”css”]
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>A simple html template</title>
<meta name="Keywords" content="A simple html template" />
<meta name="Description" content="A simple html template" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
#pageheader
{
width:100%;
height:100px;
background-color:black;
text-align:center;
font-size:18pt;
color:white;
}
#mainContent
{
margin-left:10%;
margin-right:10%;
width:80%
font-size:18pt;
overflow:hidden;
}
#left-col
{
float:left;
width:10%;
background-color:yellow;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#main-col
{
float:left;
width:70%;
height:600px;
text-align:center;
font-size:18pt;
background-color:#eee;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#right-col
{
float:left;
width:20%;
background-color:yellow;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#pagefooter
{
width:100%;
height:120px;
background-color:black;
text-align:center;
font-size:18pt;
color:white;
}
</style>
</head>
<body>
<div id="pageheader">
This is the page header, where you could put your logo, navigation menu, search bar, login and login links.
</div>
<div id="mainContent">
<div id="left-col">
This is the left col, where you could put a side menu.
</div>
<div id="main-col">
This is the main col, where you put the main contents.
</div>
<div id="right-col">
This is the right col, where you could put some side contents, widgets, plugins, advertisements.
</div>
</div>
<div id="pagefooter">
This is the footer.
</div>
</body>
</html>
[/code]
Search within Codexpedia
Search the entire web