কম্পিউটার

CSS এর সাথে কেন্দ্রীভূত লিঙ্ক/লোগো সহ একটি নেভিগেশন বার কীভাবে তৈরি করবেন?


কেন্দ্রিক লিঙ্ক/লোগো সহ একটি নেভিগেশন বার তৈরি করার কোডটি অনুসরণ করা হয়েছে -

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
   margin:0px;
   margin-top:60px;
   padding: 0px;
}
nav{
   position: fixed;
   top:0;
   width: 100%;
   background-color: rgb(251, 255, 196);
   overflow: auto;
   height: auto;
}
.left-links{
   display: inline-block;
   position: absolute;
   left: 0;
}
.right-links{
   display: inline-block;
   position: absolute;
   right: 0;
}
.center-links{
   display: inline-block;
   margin-left: 50%;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(0, 0, 0);
   text-decoration: none;
   font-size: 17px;
   font-weight: bolder;
}
.links:hover {
   border-bottom: 2px solid purple;
}
.selected{
   border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>
<div class="center-links">
<a class="links selected" href="#"> Home</a>
</div>
<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট-

তৈরি করবে

CSS এর সাথে কেন্দ্রীভূত লিঙ্ক/লোগো সহ একটি নেভিগেশন বার কীভাবে তৈরি করবেন?


  1. কিভাবে CSS দিয়ে পেজিনেশন তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি পিল নেভিগেশন মেনু তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি স্কিল বার তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি অন স্ক্রোল ফিক্সড নেভিগেশন বার তৈরি করবেন?