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 - Lập trình HTML/CSS/JS

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

by GokiSoft.com - 15:18 10/12/2020 2,389 Lượt Xem

#index.html


<!DOCTYPE html>
<html>
<head>
	<title>Gokisoft Page</title>

	<style type="text/css">
		body {
			margin: 0px !important;
			padding: 0px !important;
			background-color: #f2d999;
		}

		.contaner {
			width: 80%;
			background-color: #b6eef2;
			display: block;
			margin: 0px auto;
		}

		.header {
			width: 100%;
			background-color: #b7edc5;
			height: 250px;
			display: block;
		}
		.header .nav-bar {
			width: 100%;
			background-color: #b7ed00;
			height: 50px;
		}
		.header .nav-bar ul.left {
			list-style-type: none;
			display: flex;
			float: left;
			padding: 0px !important;
			margin: 0px !important;
		}
		.header .nav-bar ul.right {
			list-style-type: none;
			display: flex;
			float: right;
			padding: 0px !important;
			margin: 0px !important;
		}

		.header .nav-bar ul li {
			float: left;
			margin-right: 25px;
			cursor: pointer;
			padding: 15px 10px;
		}
		.header .nav-bar ul li:hover {
			background-color: grey;
		}

		.header .logo {
			width: 100%;
			background-color: #b70d00;
			height: 140px;
		}
		.header .menu {
			width: 100%;
			background-color: #270d00;
			height: 140px;
		}

		.main {
			width: 100%;
			background-color: #d0d4a5;
		}

		.footer {
			width: 100%;
			background-color: #ecc0ed;
			height: 250px;
		}

		.row {
			width: 100%;
			display: flex;
		}

		.row .item {
			width: 25%;
			padding: 20px;
			float: left;
		}
	</style>
</head>
<body>
	<div class="contaner">
		<div class="header">
			<!-- chung cua tat cac pages -->
			<div class="nav-bar">
				<ul class="left">
					<li>Ghi Chu</li>
					<li>Thiet Ke Web</li>
					<li>My CV</li>
					<li>My Class</li>
					<li>Lien He</li>
					<li>Hoc Vien Tich Cuc</li>
					<li>Thoat</li>
				</ul>
				<ul class="right">
					<li>Twitter</li>
					<li>Facebook</li>
					<li>Youtube</li>
				</ul>
			</div>
			<div class="logo">
				
			</div>
			<div class="menu">
				
			</div>
		</div>
		<div class="main">
			<!-- phan khac nhau giua cac page -->
			<div class="row">
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
				<div class="item">
					<img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" style="width: 100%">
				</div>
			</div>
		</div>
		<div class="footer">
			<!-- chung cua tat cac pages -->
			
		</div>
	</div>
</body>
</html>


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