By GokiSoft.com| 23:38 02/01/2022|
Học HTML5 - CSS3

[Video] Hướng dẫn thiết kế Layout - C2110I


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Tin Tuc - Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="header">
		<div class="logo margin-left margin-right">
			<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png" class="logo-img">
			<input type="text" name="s" placeholder="Nhap noi dung tim kiem" class="logo-search">

			<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-headset logo-icon" viewBox="0 0 16 16">
			  <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"/>
			</svg>
			<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-people-fill logo-icon" viewBox="0 0 16 16">
			  <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
			  <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
			  <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
			</svg>
		</div>
		<div class="menu">
			<ul class="margin-left margin-right">
				<li>Nong</li>
				<li>Moi</li>
				<li>Video</li>
				<li>Chu De</li>
				<li>Phong Chong Covid-19</li>
				<li>Nang luong tich cu</li>
			</ul>
		</div>
	</div>
	<div class="main">
		<div class="main-content margin-left">
			<div class="item-top" style="padding: 10px;">
				<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
				<p style="font-size: 20px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
			</div>
			<!-- bootstrap: grib -> row: 12 cells -->
			<div class="row">
				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>

				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>

				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>
			</div>
			<div class="row">
				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>

				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>
				
				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>
			</div>
			<div class="row">
				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>

				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>
				
				<div class="col-4">
					<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
					<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
				</div>
			</div>
		</div>
		<div class="menu-right margin-right">
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
			<div class="item">
				<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
				<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
			</div>
		</div>
	</div>
	<div class="footer">
		<marquee class="margin-left margin-right">
			<h2>Welcome to learn HTML/CSS</h2>
		</marquee>
	</div>
</div>
</body>
</html>


#style.css


body {
	padding: 0px;
	margin: 0px;
}

.container, .header, .logo, .menu, .main, .footer {
	width: 100%;
}

.main .main-content {
	width: 55%;
	float: left;
}

.main .menu-right {
	width: 25%;
	float: left;
}

.logo {
	display: flex;
}

.logo .logo-img {
	height: 70px;
}

.logo .logo-search {
	width: 500px;
	height: 30px;
	font-size: 16px;
	padding: 5px 5px;
	margin-top: 12px;
	margin-left: 15px;
}

.logo .logo-icon {
	padding: 5px 5px;
	margin-top: 12px;
	margin-left: 15px;
}

.menu {
	background-color: #2fa1b3;
}

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

.menu ul li {
	padding: 15px;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
}

.menu ul li:hover {
	background-color: #fadba2;
	color: red;
}

.margin-left {
	margin-left: 10% !important;
}

.margin-right {
	margin-right: 10% !important;
}

.item {
	display: flex;
}

.item img {
	width: 100px;
	padding: 10px;
}

.item label {
	padding: 10px;
}

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

.row .col-4 {
	width: calc(100%/3);
	padding: 10px;
}

.row .col-4:hover {
	background-color: #edeceb;
}
/* highlight design layout */
/*.header {
	background-color: grey;
	height: 300px;
}

.logo {
	background-color: red;
	height: 200px;
}

.menu {
	background-color: blue;
	height: 100px;
}*/

/*.main {
	background-color: black;
	height: 800px;
}*/

/*.main .main-content {
	background-color: red;
	height: 800px;
}

.main .menu-right {
	background-color: grey;
	height: 800px;
}*/
/*
.footer {
	background-color: green;
	height: 200px;
}*/
/* end */


#readme.txt


u뚀


Tags:

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

5

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