BASIC STRUCTURE OF HTML PAGE
BASIC STRUCTURE OF HTML PAGE
How do you design a beautiful website with HTML and CSS, I tried to explain in this blog site. I hope you can learn HTML and CSS very easily from this site.
People who are learning new HTML. I just showed them the basic structure of a website with a table of HTML.
<!DOCTYPE html>
<html>
<head>
<title>Learn html</title>
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
height: 900px;
width: 900px;
border: 1px solid;
}
</style>
</head>
<body>
<table class="center">
<tr height="150">
<td width="150"></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5" ></td>
</tr>
<tr height="300">
<td colspan="3" width="700"></td>
<td colspan="2"></td>
</tr>
<tr height="250">
<td colspan="5"></td>
</tr>
<tr height="100">
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
How do you create a menu with HTML and CSS?
<!DOCTYPE html>
<html>
<head>
<title>Menue</title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
li{
display: inline-block;
float: left;
margin-right: 1px;
}
li a{
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue",Helvetica,Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
li:hover a {
background: #19c589;
}
li:hover ul li a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/* Hover state for dropdown links*/
li:hover ul li a:hover
{
background: #19c589;
color: #fff;
}
li ul {
display: none;
}
/* Make dropdown links vartical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 140px;
padding: 0 20 px;
}
ul li a:hover + .hidden, .hidden:hover
{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#"> PORTFOLIO </a>
<ul class='hidden'>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">ILLUSTRATOR</a></li>
<li><a href="#">VEDIO EDITING</a></li>
</ul>
</li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
No comments