HTML और CSS पर लेआउट का अभ्यास

आइए सामग्री भरकर लेआउट बनाने का अभ्यास करें। चलिए, उदाहरण के लिए, इस तरह का एक लेआउट बनाते हैं:

आइए पहले लेआउट की मूल संरचना बनाएं:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

आइए अब हेडर को समझते हैं। जैसा कि नमूने में दिख रहा है, हेडर में साइट का नाम और मेनू होगा। साथ ही, ये ब्लॉक बाएं किनारे से समान दूरी पर हैं। ऐसे में उन्हें एक सामान्य पैरेंट में समूहित करना तार्किक है, इन ब्लॉकों को एक साथ एक इकाई के रूप में ले जाते हुए:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

आइए हेडर ब्लॉकों की सामग्री जोड़ें:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
</div>

आइए अब हेडर ब्लॉकों की स्टाइल लिखें। साथ ही, हेडर की ऊंचाई सेट न करें - इसे अपनी सामग्री से विस्तारित होने दें:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

कंटेनर में तीन कॉलम बनाने वाला कोड लिखें। साथ ही, कंटेंट की ऊंचाई सेट न करें - इसे इसकी सामग्री से बनने दें:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

आइए अब हमारे लेआउट की बाकी स्टाइल लिखें और हमारे कार्य का समाधान प्राप्त करें:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			<h1>Our blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

व्यावहारिक कार्य

निम्नलिखित लिंक से 1.zip लेआउट डाउनलोड करें। इसे ब्राउज़र में खोलें और नमूने के अनुसार पेज दोहराएं।

निम्नलिखित लिंक से 2.zip लेआउट डाउनलोड करें। इसे ब्राउज़र में खोलें और नमूने के अनुसार पेज दोहराएं।