Creating a Basic Navigation using HTML CSS
code
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">contact</a></li> </ul> </body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
-----
index.css
ul {
margin: 0;
padding: 0;
height: 45px;
line-height: 45px;
list-style: none;
background-color: #000;
}
ul li {
float: left;
/* border-right: 1px solid red; */
}
a {
/* display: block; */
font-size: 20px;
text-decoration: none;
/* background-color: blueviolet; */
color: #fff;
padding: 0 15px;
}
a:hover,
.active a {
background-color: #0c4b33;
}
Comments
Post a Comment