IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ 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 - Tạo layout website HTML5/CSS

by GokiSoft.com - 15:52 06/06/2020 3,732 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;
}


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!