First of create a HTML page and also create a CSS for web page layout.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Page Layout - WEB TEMPLATE SOLUTION - IJONSOFT</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Start Header-->
<div class="header">
<div class="wrapper">
<h1><span>~LOGO~</span></h1>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<!--End Header-->
<!--Start Main Container-->
<div class="maincontainer">
<div class="contain">
<h3>
Hello!!</h3>
<p>
WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT hub - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!!
</p>
<p>
This is where you would explain about your company. WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT hub - IJONSOFT - 2013!! WelCome to our Web Templates Solution - IJONSOFT - 2013!!
</p>
</div>
</div>
<!--End Main Container-->
<!-- Start Footer-->
<div class="footer">
<div class="wrapper" >
© 2013 WEB TEMPLATE SOLUTION - IJONSOFT | <a href="#">Privacy Policy</a> | <a href="#">Turms Of Use</a>
</div>
</div>
<!-- End Footer-->
</body>
</html>
CSS
body, html
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font: 13px Arial, Helvetica, sans-serif;
}
.header
{
display: block;
width: 100%;
position: relative;
z-index: 4;
border-bottom: 1px ActiveBorder solid;
margin-bottom: 30px;
}
.header .wrapper
{
width: 900px;
margin: auto;
height: 52px;
}
.header h1
{
margin: 0;
padding: 0;
font-size: 34px;
float: left;
padding: 6px 0 0 0;
font-weight: normal;
background-color: greenyellow;
}
.header h1 span
{
color: #333;
}
.header ul
{
float: right;
padding: 0;
margin: -5px 0 0 0;
list-style: none;
position: relative;
z-index: 99;
}
.header ul li
{
color: #000;
font-size: 1px;
float: left;
padding: 15px 10px 0 10px;
border-top: 5px solid ActiveBorder;
}
.header ul li a
{
color: #000;
font-size: 14px;
text-decoration: none;
}
.maincontainer
{
display: block;
width: 100%;
position: relative;
height: 76%;
}
.maincontainer .contain
{
width: 900px;
margin: auto;
}
.contain h3
{
margin: 0;
font-size: 22px;
font-weight: bold;
padding: 6px 0 0 0;
font-weight: normal;
margin-bottom: 30px;
}
.contain p
{
margin: 0;
padding: 0;
font-size: 13px;
color: #333;
font-weight: normal;
margin-bottom: 20px;
text-align: justify;
}
.footer
{
width: 100%;
border-top: 1px ActiveBorder solid;
overflow: auto;
padding: 15px 0 0 0;
margin-top: 30px;
}
.footer .wrapper
{
width: 900px;
margin: auto;
height: 35px;
}
.footer .wrapper a
{
color: #000;
font-size: 13px;
text-decoration: none;
}
Web Page: After implemented css on this html page than you can look web page like below :-
 |
| Simple Web Page |
No comments:
Post a Comment