Thực hành trên bố cục HTML và CSS

Chúng ta hãy thực hành tạo bố cục và điền nội dung vào chúng. Ví dụ, hãy tạo một bố cục như thế này:

Đầu tiên, hãy tạo cấu trúc chính của bố cục:

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

Bây giờ hãy phân tích phần đầu trang. Có thể thấy trong mẫu, phần đầu trang sẽ có tên trang web và menu. Đồng thời, các khối này nằm cách đều so với mép trái. Trong trường hợp này, cách hợp lý là nhóm chúng chung một phần tử cha, di chuyển các khối này như một khối thống nhất:

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

Thêm nội dung cho các khối phần đầu trang:

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

Bây giờ hãy viết kiểu cho các khối phần đầu trang. Trong khi đó, đừng đặt chiều cao cho phần đầu trang - hãy để nó được mở rộng theo nội dung của nó:

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

Viết mã tạo ba cột trong container. Trong khi đó, đừng đặt chiều cao cho nội dung - hãy để nó được định hình bởi nội dung của nó:

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

Bây giờ hãy viết các kiểu còn lại cho bố cục của chúng ta và nhận được giải pháp cho nhiệm vụ của chúng ta:

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

Bài tập thực hành

Tải bố cục theo liên kết sau 1.zip. Mở nó trong trình duyệt và tạo lại trang theo mẫu này.

Tải bố cục theo liên kết sau 2.zip. Mở nó trong trình duyệt và tạo lại trang theo mẫu này.