উদাহরণ
নিচের কোডটি CSS ব্যবহার করে একটি রেসপন্সিভ হেডার তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} nav { overflow: hidden; background-color: #330b7c; padding: 10px; } .links { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; float: left; color:white; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } nav .logo { font-size: 25px; font-weight: bold; } nav .links:hover { background-color: rgb(214, 238, 77); color: rgb(42, 10, 94); } nav .selected { background-color: dodgerblue; color: white; } .rightSection { float: right; } @media screen and (max-width: 870px) { nav .links { float: none; display: block; text-align: left; } .rightSection { float: none; } } </style> </head> <body> <nav> <a class="links logo" href="#">Company Logo/Image</a> <div class="rightSection"> <a class="selected links" href="h">Home</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">About Us</a> <a class="links" href="#">More Info</a> <a class="links" href="#">Register</a> </nav> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
স্ক্রিন রিসাইজ করলে নেভিগেশন মেনু নিচের মতো রিসাইজ হবে:
