নেভিগেশন বারের div উপাদানের ডিজাইন| সি এস এস বাংলা টিউটোরিয়াল

নেভিগেশন বারের div উপাদানের ডিজাইন

নেভিগেশন বার এখন শুধুমাত্র লিংক প্রকাশের জন্য ব্যবহার হয় না। এটা ওয়েব সাইটের সৌন্দর্যকে অনেকাংশে বর্ধিত করে।নেভিগেশন বারের সাধারণ গঠন <div id="navigation"><ul><li><a></a></li><li><a></a></li></ul></div> এর অনুরূপ। প্রথমেই এজন্য css দ্বারা  div এর আইডি সিলেক্টর # navigation এর মাধ্যমে সম্পূর্ণ নেভিগেশন বারের width, height, font-family, font-size, background ইত্যাদি নির্ধারণ করে দেয়া হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
*{margin:auto; padding:auto;}
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
</style>

</head>
<body >
<div id="navigation">
<ul>
<li><a href="#"> HOME</a></li>
<li ><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">FORAM</a></li></ul>
</div>
</body>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট টিউটোহোস্ট ২০১০-২০১২