How to make a simple webpage layout using CSS
 |
| How to make a simple webpage layout using CSS |
In this tutorial, I show you how to make a simple webpage layout using CSS.This webpage layout include Header, Menu bar, Left sidebar,Right sidebar and Footer area.
Steps to make a webpage layout
- Create new file, copy the follwing code and save it as webpage.html.
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#container{width:1000px;height:1100px;background-color:black;margin:0 auto;padding:0;}
#header{
width: 1000px;
height: 150px;
background-color: yellow;
font-weight: bold;}
#banner{width:1000px;height:50px;background-color:black;
padding-top:10px;margin:0px;border:1px red;}
#content{width:1000px;height:800px;background-color:green;}
#content1{width:200px;height:800px;background-color:red;float:left;}
#content2{width:800px;height:800px;background-color:blue;float:right;}
#footer{width:1000px;height:100px;background-color:red;}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="banner">
</div>
<div id="content">
<div id="content1">
</div>
<div id="content2">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
 |
| Layout screenshot -1 |
 | |
|
{[['
']]}
']]}
No comments