[Share Code] Thiết kế layout trang web baomoi.com

#style.css

Name: Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
Address: Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

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

.container {
	width: 100%;
	display: block;
}

.header {
	width: 100%;
	display: block;
}

.header .nav {
	width: 100%;
	display: flex;
}

.header .nav .search {
	width: 450px;
	height: 30px;
	border: solid 1px #e2e0e0;
	margin-left: 30px;
	display: flex;
}

.header .nav input {
	border: none;
	width: 100%;
	background-color: white;
}

.header .nav button {
	border: none;
	background-color: white;
}

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

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

.header .menu li {
	color: white;
	font-weight: normal;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 22px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-right: 1px solid rgba(255,255,255,.2);
	cursor: pointer;
}

.header .menu li:hover {
	background-color: #2b94a5;
}

.main {
	width: 100%;
}

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

.row .item {
	width: 25%;
	float: left;
	padding: 5px;
}

.footer {
	width: 100%;
}

.container-center {
	width: 80%;
	margin: 0px auto;
}

#baomoi.html

<!DOCTYPE html>
<html>
<head>
	<title>Báo Mới - Tin tức nóng nhất, tin tức mới nhất cập nhật liên tục 24H - BAOMOI.COM</title>
	<meta charset="utf-8">
	<link rel="icon" type="image/png" href="https://baomoi-static.zadn.vn/favicons/favicon-32x32.png" sizes="32x32" />
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="container-center">
			<div class="nav">
				<img src="https://baomoi-static.zadn.vn/web/styles/img/BM_2020.png" style="height: 50px;">
				<div class="search">
					<input type="text" name="s">
					<button><img src="https://www.flaticon.com/svg/vstatic/svg/709/709592.svg?token=exp=1613653747~hmac=d500ef06f9bb40f3f9737474b54ad996" style="height: 25px"></button>
				</div>
			</div>
			</div>
			<div class="menu">
				<div class="container-center">
				<ul>
					<li>Nóng</li>
					<li>Mới</li>
					<li>Video</li>
					<li>Chủ Đề</li>
					<li>#Phòng chống COVID-19</li>
					<li>#Tết tân sửu 2021</li>
				</ul>
			</div>
			</div>
		</div>
		<div class="main">
			<div class="container-center">
			<div class="row">
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
				<div class="item">
					<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_18_114_37972887/3c4bdaca1889f1d7a898.jpg" style="width: 100%">
					<p>Bộ Chính trị đồng ý chủ trương mua vaccine COVID-19 cho dân</p>
				</div>
			</div>
		</div>
		</div>
		<div class="footer">
			<div class="container-center">
			Footer
		</div>
		</div>
	</div>
</body>
</html>

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

5

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

[Share Code] Thiết kế layout trang web baomoi.com

#style.css

#baomoi.html

Tags:

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

5