একটি ওয়েব পেজ সুন্দর করে ডিজাইন করার জন্য ওয়েব পেজ লেআউটের গুরত্ত অপরিসীম। ওয়েব পেজকে বিভিন্ন ভাগে বিভক্ত করে ডিজাইন করার পদ্ধতিই হল ওয়েব পেজ লেআউট। একটি সুন্দর ও আকর্ষণীয় ওয়েব পেজ ডিজাইন করার জন্য লেআউট সম্পর্কে ভালভাবে জানা থাকা অবশ্যই প্রয়োজন।
বর্তমানে ওয়েব পেজ গুলো সাধারণত header, menu, content, footer ইত্যাদি এরকম বিভিন্ন অংশে বিভক্ত করা হয়। এরকম বহুল ব্যাবহৃত একটি লেআউট নিচে দেখুন।
ওপরে দেখান ওয়েব পেজ লেআউটটির জন্য কোড গুলো নিচে দেখুন।
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Website Layout</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } .header { background-color: #66FFCC; padding: 20px; text-align: center; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; } .column { float: left; padding: 10px; } .column.side { background-color:#99CCFF; width: 25%; } .column.middle { width: 50%; } .row:after { content: ""; display: table; clear: both; } /* রেস্পন্সিভ কোড */ @media (max-width: 600px) { .column.side, .column.middle { width: 100%; } } .footer { background-color: #66FFCC; padding: 10px; text-align: center; } </style> </head> <body> <div class="header"> <h1>Header</h1> </div> <div class="topnav"> <a href="#">Link <a href="#">Link <a href="#">Link </div> <div class="row"> <div class="column side"> <h2>Content</h2> </div> <div class="column middle"> <h2>Main Content</h2> </div> <div class="column side"> <h2>Content</h2> </div> </div> <div class="footer"> <h2>Footer</h2> </div> </body> </html>