Navigation Using HTML CSS
Navigation :- Navigation is the top most part of our website.
Here we know how to create navigation bar using HTML CSS.
<html>
<head>
<title>Navigation Using CSS</title>
<style>
ul {
list-style-type: none;
margin: 1px;
padding: 1px;
overflow: hidden;
border: 2px solid #e7e7e8;
background-color: red;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 2px solid #e7e7e8;
}
/* Add a border to all( but not the last) list items */
li:last-child {
border-right: none;
}
li a {
display: block;
color: blue;
text-align: left;
padding: 15px 17px;
text-decoration: none;
}
/* Links will change color when hovered over */
li a:hover {
background-color:whitesmoke;
}
.active {
background-color: #d61d1d;
}
</style>
</head>
<body>
<ul>
<li><a href="#" target="_blank">Link1</a></li>
<li><a href="#" target="_blank">Link2</a></li>
<li><a href="#" target="_blank">Link3</a></li>
<li style="float: right;"><a class="active" href="#" target="_blank">Contacts</a></li>
</ul>
</body>
</html>
Here we know how to create navigation bar using HTML CSS.
<html>
<head>
<title>Navigation Using CSS</title>
<style>
ul {
list-style-type: none;
margin: 1px;
padding: 1px;
overflow: hidden;
border: 2px solid #e7e7e8;
background-color: red;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 2px solid #e7e7e8;
}
/* Add a border to all( but not the last) list items */
li:last-child {
border-right: none;
}
li a {
display: block;
color: blue;
text-align: left;
padding: 15px 17px;
text-decoration: none;
}
/* Links will change color when hovered over */
li a:hover {
background-color:whitesmoke;
}
.active {
background-color: #d61d1d;
}
</style>
</head>
<body>
<ul>
<li><a href="#" target="_blank">Link1</a></li>
<li><a href="#" target="_blank">Link2</a></li>
<li><a href="#" target="_blank">Link3</a></li>
<li style="float: right;"><a class="active" href="#" target="_blank">Contacts</a></li>
</ul>
</body>
</html>
Comments
Post a Comment