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 макетни юклаб олинг. Уни браузерда очинг ва саҳифани ушбу намуна асосида такрорланг.