নেভিগেশন বারে a উপাদানের ডিজাইন
যেহেতেু নেভিগেশন বার কতগুলো লিংক এর সমষ্টি, তাই এর ডিজাইন পদ্ধতিও মূলত এংকর ট্যাগ নির্ভর।সাধারণত কোন টেক্সট দ্বারা লিংক করলে টেক্সটটির নিচে একটা আন্ডার লাইন আসে।নেভিগেশন বারের মেনুতে সেটার প্রয়োজন নেই। তাই এই আন্ডার লাইনকে দূর করার জন্য স্ট্যাইল শীটে লেখতে হবে,#navigation ul li a {text-decoration:none; } এছাড়া padding, color, font-weight, text-align,ইত্যাদি প্রোপার্টি নির্ধারণ করে মেনুর ডিজাইন তৈরি করা হয়।
অনুশীলন প্রজেক্ট
<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;}
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;}
</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত