सीएसएस में सरल सिंगल-कॉलम वेबसाइट लेआउट

इस पाठ में हम सरल सिंगल-कॉलम वेबसाइट लेआउट बनाने का अभ्यास करेंगे। आइए, उदाहरण के लिए, इस तरह का लेआउट बनाएं:

कार्यान्वयन शुरू करते हैं। प्रत्येक लेआउट आमतौर पर 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 चुनें, क्योंकि यह एलिमेंट्स के बीच मार्जिन बनाने के लिए होता है।

सीएसएस में सरल सिंगल-कॉलम वेबसाइट लेआउट

सलाह 1

सलाह 2

सलाह 3

व्यावहारिक असाइनमेंट