Daily Video Blog with Anik || CSS Horizontal Bar
In this video,I explained the CSS Horizontal Bar. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. The code is as follows -
HTML File -
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="horizontal_bar.css">
</head>
<body>
<ul>
<li> <a href=""> Home </a> </li>
<li> <a href=""> About Us </a> </li>
<li> <a href=""> Contact Us </a> </li>
<li> <a href=""> Any Queries </a> </li>
</ul>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 20px;
}
li a:hover {
color: red;
background-color: lightgreen;
}
HTML File -
<html>
<head> <title> Horizontal Bar </title>
<link rel="stylesheet" href="horizontal_bar.css">
</head>
<body>
<ul>
<li> <a href=""> Home </a> </li>
<li> <a href=""> About Us </a> </li>
<li> <a href=""> Contact Us </a> </li>
<li> <a href=""> Any Queries </a> </li>
</ul>
</body>
</html>
CSS File -
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 15px 20px;
}
li a:hover {
color: red;
background-color: lightgreen;
}
Comments
Post a Comment