ডিসপ্লে ব্লক | সি এস এস বাংলা টিউটোরিয়াল

ডিসপ্লে ব্লক (display:block)

সি এস এস এর মাধ্যমে HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য ডিসপ্লে ব্লক ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় ভার্টিক্যাল নেভিগেশন বারে, তথা সাইডবার নেভিগেশন বারে। HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য Declaration করতে হয় display:block; এর অনুরূপ।






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

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
li{display:block;
background:#C06;
color:#FFC;
padding:10px;
width:140px;
border:#600 solid 1px;}
a{color:#FCC;
font-size:24px;}
</style>

</head>
<body >
<ul>
<li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li>
<li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li>
<li><a href="http://www.tutohost.com" target="_blank">PHP</a></li>
<li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li>
</ul>
</body>
</html>

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


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

কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত