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 [Video] Thiết kế layout website - Học html/css/js

[Video] Thiết kế layout website - Học html/css/js

by GokiSoft.com - 18:37 19/11/2021 1,186 Lượt Xem

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Layout Page</title>
	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}

		.cotainer {
			background-color: red;
			width: 100%;
			height: 1000px;
		}

		.menu {
			background-color: green;
			width: 100%;
			display: flex;
		}

		.main {
			background-color: blue;
			width: 100%;
			height: 900px;
			display: flex;
			font-size: 30px;
			color: white;
		}

		.main .menu-left {
			background-color: black;
			width: 25%;
			height: 900px;
			/*float: left;*/
		}

		.main .main-content {
			background-color: yellow;
			width: 50%;
			height: 900px;
			/*float: left;*/
		}

		.main .menu-right {
			background-color: pink;
			width: 25%;
			height: 900px;
			/*float: left;*/
		}

		.menu ul {
			list-style-type: none;
			display: flex;
			margin: 0px;
			padding: 0px;
		}

		.menu ul li {
			padding: 15px;
			font-size: 14px;
			text-transform: uppercase;
			cursor: pointer;
		}

		.menu ul li:hover {
			background-color: yellow;
		}

		.menu ul li:active {
			background-color: red;
		}

		.menu .right {
			position: absolute;
			right: 0px;
		}
	</style>
</head>
<body>
	<div class="cotainer">
		<div class="menu">
			<ul>
				<li>Trang Chu</li>
				<li>Lap Trinh C</li>
				<li>Frontend</li>
				<li>Backend</li>
				<li>Java</li>
				<li>Android</li>
				<li>C Sharp</li>
			</ul>
			<ul class="right">
				<li>Đăng Ký</li>
				<li>Đăng Nhập</li>
			</ul>
		</div>
		<div class="main">
			<div class="menu-left">
				Noi dung
			</div>
			<div class="main-content">
				Noi dung
			</div>
			<div class="menu-right">
				Noi dung
			</div>
		</div>
	</div>
</body>
</html>


Tags:

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