HTML Navigation
From w3cyberlearnings
Contents |
By using the CSS and ul tag to create a navigation bar.
Example TRY-IT
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
ul.navigation_bar {
list-style: none;
}
ul.navigation_bar li {
float:left;
margin-left: 2px;
margin-right: 2px;
padding:0;
border:solid 2px #00F;
background-color: #2b81af;
display:inline;
}
ul.navigation_bar li a:link {
color:white;
}
ul.navigation_bar li a:hover {
background-color: #006600;
}
</style>
</head>
<body>
<div id="content">
<ul class="navigation_bar">
<li><a href="page1.php">Page 1</a></li>
<li><a href="page2.php">Page 2</a></li>
<li><a href="page3.php">Page 3</a></li>
<li><a href="page4.php">Page 4</a></li>
</ul>
</div>
</body>
</html>
Output
Related Link
- HTML - Tables
- HTML - Box Container
- HTML - Columns
- HTML - Navigation
- HTML - Layout
