নেভিগেশন বারে ul,li উপাদানের ডিজাইন
যেহেতু নেভিগেশন বারে আনঅর্ডার লিস্ট ব্যবহার করা হয়। আন অর্ডার লিস্ট তৈরি করলে প্রতিটি লাইনের শুরুতে একটা বৃত্তাকার সিম্বল যুক্ত হয়, যা নেভিগেশন বারে প্রয়োজন নেই।নেভিগেশন বারের সাধারণ গঠন <div id="navigation"><ul><li><a></a></li><li><a></a></li></ul></div> তাই এই বৃত্তাকার সিম্বল দূর করার জন্য স্ট্যাইল শীটে লেখতে হবে, #navigation ul {list-style-type:none;}। যদি হরিজন্টাল নেভিগেশন বার তৈরি করতে হয় তাহলে স্ট্যাইল শীটে লেখতে হবে,#navigation ul li {float:left; }।
অনুশীলন প্রজেক্ট
<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;}
#navigation ul {
list-style-type:none;}
#navigation ul li {
float:left;
background:url(images/border.png) no-repeat;
background-position:right;}
</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত