[Video] Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS - C2108G3

Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS

#style.css

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

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

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

.content {
	width: 90%;
	margin-left: 5%;
	display: flex;
}

.header .banner img{
	height: 120px;
}

.header .menu {
	background-color: #b81d3d;
}

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

.header .menu ul li {
	padding: 15px;
	color: white;
	cursor: pointer;
}

.header .menu ul li:hover {
	background-color: #f0aa4f;
}

.main-content {
	width: 75%;
}

.menu-right {
	width: 25%;
}

.item {
	width: 100%;
	display: flex;
	padding: 15px;
	margin-bottom: 30px;
}

.item .main-thumbnail {
	background-color: #58edaa;
	width: 400px;
	height: 200px;
	position: relative;
}

.item .main-thumbnail .title1 {
	font-size: 20px;
	position: absolute;
	background-color: grey;
	top: 20px;
	padding: 5px;
	left: 20px;
	color: white;
}

.item .main-thumbnail .title2 {
	font-size: 15px;
	position: absolute;
	background-color: grey;
	padding: 5px;
	left: 20px;
	top: 70px;
	color: white;
}

.item .main-thumbnail .avatar {
	position: absolute;
	bottom: -40px;
	width: 80px;
	height: 80px;
	left: 30px;
	border-radius: 50%;
}

.item .main-thumbnail .category {
	position: absolute;
	bottom: -30px;
	width: 80px;
	/*height: 80px;*/
	right: 30px;
}

.item .title {
	padding-left: 15px;
}

#index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Web Hoc Excel - Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="header">
		<div class="banner">
			<div class="content">
				<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png">
			</div>
		</div>
		<div class="menu">
			<div class="content">
				<ul>
					<li>Trang Chu</li>
					<li>Series Bai Viet</li>
					<li>Tai Nguyen</li>
					<li>Khoa Hoc</li>
					<li>Cong Cu</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="main">
		<div class="content">
			<div class="main-content">
				<div class="item">
					<div class="thumbnail main-thumbnail">
						<label class="title1">Noi dung 1</label>
						<label class="title2">Noi dung 2</label>

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="avatar">

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="category">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						<p>
							Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						</p>
						<p>
							<a href="#read">Doc Them</a>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail main-thumbnail">
						<label class="title1">Noi dung 1</label>
						<label class="title2">Noi dung 2</label>

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="avatar">

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="category">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						<p>
							Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						</p>
						<p>
							<a href="#read">Doc Them</a>
						</p>
					</div>
				</div>
				<div class="item">
					<div class="thumbnail main-thumbnail">
						<label class="title1">Noi dung 1</label>
						<label class="title2">Noi dung 2</label>

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="avatar">

						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" class="category">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						<p>
							Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
						</p>
						<p>
							<a href="#read">Doc Them</a>
						</p>
					</div>
				</div>
			</div>
			<div class="menu-right">
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
				<div class="item">
					<div class="thumbnail">
						<img src="https://photo-baomoi.zadn.vn/w300_r3x2/2021_12_31_119_41367017/cf76a4e20ca0e5febcb1.jpg" style="max-width: 100%">
					</div>
					<div class="title">
						Điểm mới đáng chú ý của những luật có hiệu lực từ tháng 1/2022
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

[Video] Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS - C2108G3

#style.css

#index.html

Tags:

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

5

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

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