Awesome! টিউনস
সকল Awesome! টিউনস

CSS এর মাধ্যমে লেআউট তৈরী করবেন যেভাবে শিখে নিন

953 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ সিএসএস
প্রকাশিত
Level 2

13 টিউনস 9 টিউমেন্টস 1 ফলোয়ার

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body {font-family: Arial, Helvetica, sans-serif;}

/* Style the header */
header {background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white;}

/* Create two columns/boxes that floats next to each other */
nav {float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px;}

/* Style the list inside the menu */
nav ul {list-style-type: none; padding: 0;}

article {float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */}

/* Clear floats after the columns */
section:after {content: "" display: table; clear: both;}

/* Style the footer */
footer {background-color: #777; padding: 10px; text-align: center; color: white;}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {nav, article {width: 100%; height: auto;}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header> <h2>Cities</h2>
</header>

<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>Oval is the most imprtant city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it.</p> </article>
</section>

<footer> <p>Footer</p>
</footer>

</body>
</html>

তো উপরে দেখা যাচ্ছে আমাদের সিএসএস লেআউট এর কোডটি। এখন আমরা এর বিভিন্ন বিষয় নিয়ে আলোচনা করব। তো আমরা ডকটাইপ, টাইটেল, মেটা ট্যাগের ব্যবহার জানি তাই এটি আর আলোচনা করছি না। তারপর আছে স্টাইল নামক একটা ট্যাগ এটি ব্যবহার করা হয় পেইজকে সুন্দর ভাবে সাজানোর জন্য।

তারপর বক্স এর সাইজ, ফন্ট এর সাইজ, কালার কী হবে তা দেখানো হয়েছে। এভাবেই সবগুলো লেআউটের ব্যবহার করা হয়েছে। আপনাদের সবচেয়ে বেশি যেটা মনে রাখতে হবে তা হলো হেডার ব্যবহার, কালার আর ফুটারের সঠিক ব্যবহার, বিভিন্ন অংশের সাইজের ব্যবহার। আশা করি আপনারা এখন বুঝতে পারছেন। আসলে প্রাকটিস এর মাধ্যমেই এগুলো আয়ত্তে আসবে। আর কোনো সমস্যা হলে আমি তো আছি আপনাদের সাথে।

ধন্যবাদ সবাইকে।

Level 2

আমি মাহাদী হাসান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 9 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

নতুন কিছু শিখতে ভীষণ আগ্রহী

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস