HTML-ისა და CSS-ის მაკეტებზე პრაქტიკა

ვივარჯიშოთ მაკეტების შექმნაში, მათი კონტენტით შევსებით. მოდით, მაგალითად, გავაკეთოთ ასეთი მაკეტი:

დავიწყოთ მაკეტის ძირითადი სტრუქტურის შექმნით:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			მარცხენა
		</aside>
		<main>
			...
		</main>
		<aside class="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="#">მთავარი</a>
				<a href="#" class="active">ბლოგი</a>
				<a href="#">სურათები</a>
				<a href="#">ჩვენს შესახებ</a>
				<a href="#">კონტაქტი</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="#">მთავარი</a>
				<a href="#" class="active">ბლოგი</a>
				<a href="#">სურათები</a>
				<a href="#">ჩვენს შესახებ</a>
				<a href="#">კონტაქტი</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			მარცხენა
		</aside>
		<main>
			<h1>ჩვენი ბლოგი</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="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 ჩამოტვირთეთ მაკეტი. გახსენით ის ბრაუზერში და გაიმეორეთ გვერდი ამ ნიმუშის მიხედვით.