IMG-LOGO
Trang Chủ Chủ Đề [Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS
× 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 4) [Share Code] Tạo website đầu tiên - HelloWorld - Lập trình HTML/CSS/JS 5) Big first letter - css 6) [Share Code] Tìm hiểu CSS - HTML - Lập trình HTML/CSS/JS 7) [Share Code] Hướng dẫn tìm hiểu tags căn bản trong HTML/CSS - Lập trình HTML/CSS/JS 8. [Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS 9) [Share Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

[Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS

by TRẦN VĂN ĐIỆP - 15:31 12/10/2020 1,135 Lượt Xem


#layout.html


<!DOCTYPE html>
<html>
<head>
	<title>Layout Tutorial</title>
	<meta charset="utf-8">

	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}

		.root {
			width: 100%;
			display: block;
			background-color: grey;
		}

		.header {
			width: 100%;
			background-color: yellow;
			min-height: 200px;
		}

		.container {
			width: 100%;
			min-height: 800px;
			background-color: white;
		}

		.footer {
			width: 100%;
			background-color: grey;
			min-height: 200px;
		}

		.left-main {
			width: 70%;
			float: left;
		}

		.right-menu {
			width: 30%;
			float: left;
			background-color: red;
			min-height: 800px;
			text-align: justify;
		}

		.topbar {
			width: 100%;
			background-color: grey;
			padding: 8px;
			min-height: 25px;
		}

		.topbar .topbar-left {
			float: left;
			width: 70%;
		}

		.topbar .topbar-right {
			float: left;
			width: 28%;
			text-align: right;
		}

		.topbar img {
			margin: 3px;
		}

		.topbar ul {
			list-style-type: none;
			display: flex;
			color: white;
			padding: 0px;
			margin: 2px;
		}

		.topbar ul li {
			float: left;
			margin-right: 20px;
		}

		.article {
			margin: 5px;
		}
	</style>
</head>
<body>
	<div class="root">
		<div class="header">
			<div class="topbar">
				<div class="topbar-left">
					<ul>
						<li>Ghi Chu</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
					</ul>
				</div>
				<div class="topbar-right">
					<img src="photos/photo1.jpg" style="width: 45px;">
					<img src="photos/photo1.jpg" style="width: 45px;">
					<img src="photos/photo1.jpg" style="width: 45px;">
				</div>
			</div>
		</div>
		<div class="container">
			<div class="left-main">Left main</div>
			<div class="right-menu">
				<div class="article">
					Left menu Left menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menu
				</div>
			</div>
		</div>
		<div class="footer">Footer</div>
	</div>
</body>
</html>


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