HTML we CSS maketler boýunça amaliýe

Maketleri döretmekde we olary mazmun bilen doldurmakda amaliýe edeliň. Geliň, meselem, şeýle bir maket dözdüreliň:

Ilki bilen maketiň esasy gurluşyny dözdüreliň:

<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>

Indi bolsa header bilen işleşeliň. Nusgadan görşüň ýaly, headerde sahypanyň ady we menýu boljak. Şol bir wagtyň özünde bu bloklar çep gapydan deň aralykda durýar. Şeýle ýagdaýda olary umumym ata bilen birleşdirmek, bu bloklary bir bitewi hökmünde hereket etdirmek mazmunlydyr:

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

Header bloklaryna mazmun goşalyň:

<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>

Indi bolsa header bloklarynyň stilini ýazalyň. Bu ýerde headeriň beýikligini kesgitlemeýäris — onuň öz mazmuny bilen giňelýändigine goýberyň:

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;
}

Konteýnerde üç sütun döredýän kody ýazalyň. Bu ýerde mazmunyň beýikligini kesgitlemeýäris — onuň öz mazmuny bilen emele gelýändigine goýberyň:

.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;
}

Indi bolsa maketimiziň galan stillerini ýazyp, meselemiziň çözgüdini alyp geleýliň:

<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;
}

Amaliýe wezipeler

Aşakdaky çykgydan 1.zip maketini ýükläp alyň. Ony brauzerde açyň we bujy nusga boýunça sahypany gaýtalaň.

Aşakdaky çykgydan 2.zip maketini ýükläp alyň. Ony brauzerde açyň we bujy nusga boýunça sahypany gaýtalaň.