IMG-LOGO
Trang Chủ Chủ Đề [Share Code] Hướng dẫn thiết kế Layout bằng HTML5/CSS - Tạo layout website HTML5/CSS
× 1) [Share Code] Tìm hiểu khái niệm domain (dns) + hosting/server + thẻ căn bản html + css - Lession 1 2) [Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript 3. [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 - Tạo layout website HTML5/CSS

by TRẦN VĂN ĐIỆP - 15:52 06/06/2020 1,417 Lượt Xem

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


Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Danh Sách Bài Học

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!