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>

Ҳоло биёед бо сарлавҳа (header) кор кунем. Чӣ тавр дар намуна дида мешавад, дар сарлавҳа номи сайт ва меню вуҷуд дорад. Ҳамзамон ин блокҳо аз канори чап дар як масофа қарор доранд. Дар чунин ҳолат, мантиқан ин аст, ки онҳоро бо як волидайн якҷоя карда, ин блокҳоро ҳамчун як бутун ҳаракат диҳем:

<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 макетро зеркашӣ кунед. Онро дар браузер кушоед ва саҳифаро бар асоси ин намуна такрор кунед.