By GokiSoft.com| 15:52 06/06/2020|
Học HTML5 - CSS3

[Share Code] Hướng dẫn thiết kế Layout bằng HTML5/CSS - Tạo layout website HTML5/CSS

[Share Code] Hướng dẫn thiết kế Layout bằng HTML5/CSS


#index.html


<!DOCTYPE html>
<html>
<head>
	<title>Layout - Tutorial</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			header
		</div>
		<div class="main">
			<div class="menu-left">
				left
			</div>
			<div class="body">
				body
			</div>
			<div class="menu-right">
				right
			</div>
		</div>
		<div class="footer">
			footer
		</div>
	</div>
</body>
</html>


#style.css


.container {
	display: block;
	width: 100%;
}

.header {
	width: 100%;
	min-height: 250px;
	font-size: 30px;
	text-align: center;
	text-transform: uppercase;
	background-color: grey;
	/*position: fixed;*/
	z-index: 2;
}

.footer {
	width: 100%;
	min-height: 250px;
	font-size: 30px;
	text-align: center;
	text-transform: uppercase;
	background-color: grey;
	z-index: 2;
}

.main {
	width: 100%;
	display: flex;
	z-index: 2;
}

.menu-left {
	float: left;
	width: 20%;
	min-height: 1000px;
	text-transform: capitalize;
	background-color: yellow;
	font-size: 50px;
	z-index: 2;
}

.body {
	float: left;
	width: 60%;
	min-height: 1000px;
	text-transform: capitalize;
	font-size: 50px;
	z-index: 2;
}

.menu-right {
	float: left;
	width: 20%;
	min-height: 1000px;
	text-transform: capitalize;
	background-color: orange;
	font-size: 50px;
	z-index: 2;
}


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó