I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.
Screenshot:
Coding:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Sanjay’ HTML5 World</title>
<meta charset=”utf-8″ />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”service.htm”>Services</a></li>
<li><a href=”contact.htm”>Contact</a></li>
<li><a href=”about.htm”>About</a></li>
</ul>
</body>
</html>
<html lang=”en”>
<head>
<title>Sanjay’ HTML5 World</title>
<meta charset=”utf-8″ />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”service.htm”>Services</a></li>
<li><a href=”contact.htm”>Contact</a></li>
<li><a href=”about.htm”>About</a></li>
</ul>
</body>
</html>
Related Posts:
HTML 5 introduction
How to make a BMI Calculator using Pure Javascript
Simple Link Hover Effect using CSS Tutorial
JavaScript Constant (const) Tutorial
Lets enjoy power of PHP Function
Launch Bootstrap Modal on page load
How To find out Visitors IP ADDRESS using PHP
Working tips and tricks to obtain free web traffic
Install Bootstrap SASS, compass on Windows and Linux (Ubuntu)
HTML FORM tutorial with CSS based Example