CSS-এ সহজ একক-কলাম ওয়েবসাইট লেআউট

এই পাঠে আমরা সহজ একক-কলাম ওয়েবসাইট লেআউট তৈরি করার অনুশীলন করব। আসুন, উদাহরণস্বরূপ, এইরকম একটি লেআউট তৈরি করি:

বাস্তবায়ন শুরু করা যাক। প্রতিটি লেআউট সাধারণত wrapper নামক একটি সাধারণ ডিভ দিয়ে শুরু হয়, যাতে বাকি সম্পূর্ণ ওয়েবসাইট থাকে:

<div id="wrapper">
	
</div>

আমাদের ক্ষেত্রে, র‍্যাপারটি স্ক্রিনের কেন্দ্রে সারিবদ্ধ হবে:

#wrapper {
	width: 800px;
	margin: 50px auto;
}

এটিতে একটি বর্ডারও থাকবে:

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

এখন পৃষ্ঠার মূল কাঠামো তৈরি করি। এটি একটি মেনু এবং মূল বিষয়বস্তু - কন্টেন্ট নিয়ে গঠিত হবে:

<div id="wrapper">
	<div id="menu">
		
	</div>
	<div id="content">
		
	</div>
</div>

আমাদের ব্লকগুলিতে বিষয়বস্তু যোগ করি:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

এখন আমাদের ব্লকগুলিতে স্টাইল যোগ করা যেতে পারে। আসুন মেনুতে স্টাইল যোগ করি:

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

এবং এখন কন্টেন্টের উপাদানগুলিতে স্টাইল যোগ করি:

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

এখন আমরা সমস্ত কোড একত্রিত করতে পারি:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

পরামর্শ 1

উপর থেকে নিচে মার্জিন দেওয়া সবচেয়ে সুবিধাজনক। উদাহরণস্বরূপ, আমাদের একটি মেনু এবং কন্টেন্ট আছে, এবং তাদের মধ্যে - খালি জায়গা। স্পষ্টতই, এই স্থানটি মেনুর নীচের মার্জিন দ্বারা, কন্টেন্টের উপরের মার্জিন দ্বারা, বা তাদের একই সময়ের প্রভাব দ্বারা তৈরি হতে পারে। এই ক্ষেত্রে মেনুতে নীচের মার্জিন নির্ধারণ করা ভাল, এবং কন্টেন্ট থেকে h1-এর জন্য ডিফল্ট padding এবং margin সরিয়ে ফেলা ভাল।

পরামর্শ 2

সন্তানদের পিতামাতার মধ্যে মার্জিন তৈরি করা উচিত নয়। উদাহরণস্বরূপ, আমাদের একটি মেনু আছে। এই মেনুর নীচের মার্জিন তৈরি করা যেতে পারে হয় মেনু ডিভের margin দ্বারা, বা লিঙ্কগুলির margin দ্বারা। প্রথম বিকল্পটি বেছে নেওয়া ভাল, কারণ লিঙ্কগুলির পিতামাতার মাথার উপর দিয়ে কাজ করা উচিত নয়।

পরামর্শ 3

ধরুন দুটি উপাদানের মধ্যে একটি মার্জিন আছে এবং এই ক্ষেত্রে দৃশ্যত কোন পার্থক্য নেই, মার্জিনের জন্য কী বেছে নেওয়া উচিত - margin বা padding। এই ক্ষেত্রে margin বেছে নিন, কারণ এটিই উপাদানগুলির মধ্যে মার্জিন তৈরি করা উচিত।

CSS-এ সহজ একক-কলাম ওয়েবসাইট লেআউট

পরামর্শ 1

পরামর্শ 2

পরামর্শ 3

ব্যবহারিক অ্যাসাইনমেন্ট