Praktika su HTML ir CSS maketais

Pasipraktikuokime kurdami maketus, užpildydami juos turiniu. Pavyzdžiui, sukurkime tokį maketą:

Pirmiausia sukurkime pagrindinę maketo struktūrą:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			kairė
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			dešinė
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

Dabar panagrinėkime headerį. Kaip matyti pavyzdyje, headeryje bus svetainės pavadinimas ir meniu. Be to, šie blokai yra vienodame atstume nuo kairiojo krašto. Logiška tokiu atveju sujungti juos bendru tėviniu elementu, stumiant šiuos blokus kaip vieną visumą:

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

Pridėkime headerio blokų turinį:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">namai</a>
				<a href="#" class="active">blogas</a>
				<a href="#">nuotraukos</a>
				<a href="#">apie mus</a>
				<a href="#">kontaktai</a>
			</nav>
		</div>
	</header>
</div>

Dabar parašykime headerio blokų stilius. Kartu nenustatykime headerio aukščio - tegu jis išsiplečia savo turiniu:

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

Parašykime kodą, kuris sukuria tris stulpelius konteineryje. Kartu nenustatykime turinio aukščio - tegu jis formuojasi pagal savo turinį:

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

Dabar parašykime likusius mūsų maketo stilius ir gaukime mūsų uždavinio sprendimą:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">namai</a>
				<a href="#" class="active">blogas</a>
				<a href="#">nuotraukos</a>
				<a href="#">apie mus</a>
				<a href="#">kontaktai</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			kairė
		</aside>
		<main>
			<h1>Mūsų blogas</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			dešinė
		</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;
}

Praktiniai užduotys

Pagal šią nuorodą 1.zip atsisiųskite maketą. Atidarykite jį naršyklėje ir pakartokite puslapį pagal šį pavyzdį.

Pagal šią nuorodą 2.zip atsisiųskite maketą. Atidarykite jį naršyklėje ir pakartokite puslapį pagal šį pavyzdį.