This is an example of making a layout. In this tutorial we will use <div>
Name: index.html
<html>
<head>
<title>CREATE YOUR OWN LAYOUT USING DIV</title>
<link rel="stylesheet" type="text/css" href="my_design.css"><!-- link to my_design.css-->
</head>
<body>
<div id="myHeader"> <!-- This div is your header title -->
<h1 id="line">HTML, CSS, PHP tutorial</h1>
</div>
<div id="myMenu"><!-- This is your Menu -->
<a>HTML</a></br>
<a>CSS</a></br>
<a>PHP</a>
<div id="inner">
Inner information here
</div>
</div>
<div id="myFooter"><!-- lower part-->
<p>Here is your footer</p>
</div>
</body>
</html>
This code below is for the css of the page
CSS FILE: my_design.css
#myHeader{
background-color: green;
width: 600px;
padding: 1px;
color: white;
}
#line{
text-align: center;
}
#myMenu{
background-color: yellowgreen;
width: 80px;
height: 150px;
text-align: center;
color: white;
}
#myFooter{
background-color: green;
width: 600px;
height: 50px;
text-align: center;
padding: 1px;
color: white;
}
#inner{
color: green;
margin-left: 80px;
margin-top: -60px;
background-color: rgba(0,0,0,0.2);
width: 522px;
height: 150px;
text-align: left;
}
If this code helps you, please comment thank you :)
No comments:
Post a Comment