By GokiSoft.com| 09:39 15/01/2021|
Học HTML5 - CSS3

[Share Code] Tìm hiểu layout - Lập trình HTML/CSS/JS BT2165

#index.html


<!DOCTYPE html>
<html>
<head>
	<title>Layout tutorial</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<!-- header: narvigation bar, ads, menu -->
			<div class="navbar">
				<img src="https://cdnweb.dantri.com.vn/bundle/static/assets/logotet-05.svg?v=0114152217">
				<ul>
					<li class="separator">THONG KE COVID-19 THE GIOI</li>
					<li class="separator">So ca nhiem: 1</li>
					<li class="separator">Tu vong: 0</li>
					<li>Binh phuc: 1</li>
				</ul>
				<input type="text" name="s" placeholder="Searching ...">
			</div>
			<div class="menu">
				<ul>
					<li>Video</li>
					<li>Su kien</li>
					<li>Xa hoi</li>
					<li>The gioi</li>
					<li>The thao</li>
					<li>Su kien</li>
					<li>Xa hoi</li>
					<li>The gioi</li>
					<li>The thao</li>
				</ul>
			</div>
			<div class="ads">
				<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1608611098/asbezpvx4yzt3gbqwtkz.jpg" style="width: 100%; max-height: 80px">
			</div>
		</div>
		<div class="main">
			<!-- noi dung -->
			<div class="main-content">
				<div class="row">
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/kim-3-1610672891901.jpg" style="width: 100%">
						<p>Triều Tiên duyệt binh rầm rộ, khoe vũ khí "mạnh nhất thế giới"</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
				</div>
				<div class="row">
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
					<div class="item">
						<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
						<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<!-- company information -->

		</div>
	</div>
</body>
</html>


#style.css


body {
	margin: 0px;
	padding: 0px;
	background-mau: grey;
}

.container {
	width: 100%;
	background-mau: green;
	height: 1000px;
	display: block;
}

.header {
	width: 100%;
	background-mau: yellow;
	display: block;
}

.main {
	width: 100%;
	background-mau: #79b0ad;
	height: 800px;
}

.footer {
	width: 100%;
	background-mau: orange;
	height: 300px;
}

.navbar {
	width: 80%;
	display: flex;
	margin: 0px auto;
}

.navbar img {
	height: 40px;
}

.navbar ul {
	display: flex;
	list-style-type: none;
	background-mau: #73966a;
	mau: white;
	padding: 5px;
}

.navbar ul li {
	margin-right: 10px;
	padding-right: 10px;
}

.separator {
	border-right: solid #e8e1e1 1px;
}

.navbar input {
	max-height: 20px;
	margin-left: 10px;
	margin-top: 16px;
}

.menu {
	background-mau: #1a7900;
}

.menu ul {
	list-style-type: none;
	display: flex;
	mau: white;
	width: 80%;
	margin: 0px auto;
}

.menu ul li {
	margin-right: 10px;
	padding: 10px;
	cursor: pointer;
	text-align: center;
}

.menu ul li:hover {
	background-mau: #104601;
}

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

.item {
	float: left;
	width: 25%;
	min-width: 25%;
	padding: 10px;
}

.main-content {
	width: 80%;
	margin: 0px auto;
}


Tags:

Liên kết rút gọn:

https://gokisoft.com/2165

Bình luận