By GokiSoft.com| 15:18 10/12/2020|
Học HTML5 - CSS3

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

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


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó