[Video] Hướng dẫn thiết kế layout website HTML/CSS - Khóa học lập trình HTML/CSS - C2110L

#index.html

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: $$$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Thiet Ke Layout Trong HTML/CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="header">
		<div class="navbar">
			<div class="justify-content">
				<img src="https://vtc.vn/Content/pc/theme/images/logo.png?v=1148">
				<button>Moi Nhat</button>
				<button>Xem Nhieu</button>
				<label class="border-right">Hotline: 0967.025.996</label>
				<label class="border-right">RSS</label>
				<label>Thứ năm, 10/2/2022, 19:06 (GMT+7)</label>
				<input type="text" name="s" placeholder="Tim kiem tren VTC News">
				<a href="#dang-nhap">Dang Nhap</a>
			</div>
		</div>
		<div class="menubar">
			<div class="justify-content">
				<ul>
					<li>
						<!-- https://getbootstrap.com/ -->
						<!-- https://icons.getbootstrap.com/ -->
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
						  <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
						  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
						</svg>
					</li>
					<li>Thoi Su</li>
					<li>Video</li>
					<li>Kinh Te</li>
					<li>The Thao</li>
					<li>The Gioi</li>
					<li>Giao Duc</li>
					<li>Phap Luat</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="main-content">
		<div class="justify-content">
			<!-- section 1 -->
			<div class="row">
				<div class="p50">
					<img src="https://image.vtc.vn/resize/weQsCg2i6U3qRqHN3b7EJjQzVXEqRWqn0/upload/2022/02/10/vnexpress-pc-covid-dsc01143b-7882-1632928375-19253076.jpeg" style="width: 100%">
					<h2>Ứng dụng PC-COVID thêm tính năng cảnh báo người dùng tiếp xúc F0</h2>
					<p>19:28 10/02/2022</p>
					<p>Ứng dụng phòng chống dịch PC-COVID vừa được kích hoạt thêm tính năng tự động cảnh báo nguy cơ người dùng tiếp xúc F0.</p>
				</div>
				<div class="p50">
					<div class="row">
						<div class="p40">
							<img src="https://image.vtc.vn/resize/weQsCg2i6U3qRqHN3b7EJjQzVXEqRWqn0/upload/2022/02/10/vnexpress-pc-covid-dsc01143b-7882-1632928375-19253076.jpeg" style="width: 100%">
						</div>
						<div class="p60">
							<h3>Ứng dụng PC-COVID thêm tính năng cảnh báo người dùng tiếp xúc F0</h3>
							<p>Ứng dụng phòng chống dịch PC-COVID vừa được kích hoạt thêm tính năng tự động cảnh báo nguy cơ người dùng tiếp xúc F0.</p>
						</div>
					</div>
					<div class="row">
						<div class="p40">
							<img src="https://image.vtc.vn/resize/weQsCg2i6U3qRqHN3b7EJjQzVXEqRWqn0/upload/2022/02/10/vnexpress-pc-covid-dsc01143b-7882-1632928375-19253076.jpeg" style="width: 100%">
						</div>
						<div class="p60">
							<h3>Ứng dụng PC-COVID thêm tính năng cảnh báo người dùng tiếp xúc F0</h3>
							<p>Ứng dụng phòng chống dịch PC-COVID vừa được kích hoạt thêm tính năng tự động cảnh báo nguy cơ người dùng tiếp xúc F0.</p>
						</div>
					</div>
					<div class="row">
						<div class="p40">
							<img src="https://image.vtc.vn/resize/weQsCg2i6U3qRqHN3b7EJjQzVXEqRWqn0/upload/2022/02/10/vnexpress-pc-covid-dsc01143b-7882-1632928375-19253076.jpeg" style="width: 100%">
						</div>
						<div class="p60">
							<h3>Ứng dụng PC-COVID thêm tính năng cảnh báo người dùng tiếp xúc F0</h3>
							<p>Ứng dụng phòng chống dịch PC-COVID vừa được kích hoạt thêm tính năng tự động cảnh báo nguy cơ người dùng tiếp xúc F0.</p>
						</div>
					</div>
				</div>
			</div>
			<!-- section 1 end -->
		</div>
	</div>
	<div class="footer">
		<div class="menubar">
			<div class="justify-content">
				<ul>
					<li>Tin Moi Trong Ngay</li>
					<li>Tin Tuc Phap Luat</li>
					<li>Tin Nhanh 24h</li>
					<li>An Ninh 24h</li>
					<li>VTC Now</li>
					<li>Gia Vang</li>
					<li>Lich Thi Dau Bong Da</li>
				</ul>
			</div>
		</div>
		<div class="justify-content">
			<div class="p40">
				<img src="https://vtc.vn/Content/pc/theme/images/logo-footer.png">
				<p>Cơ quan chủ quản: Đài Truyền hình KTS VTC</p>
				<p><img src="https://vtc.vn/Content/pc/theme/images/protected.png"></p>
				<p><img src="https://vtc.vn/Content/pc/theme/images/ggplay.png"></p>
				<p><img src="https://vtc.vn/Content/pc/images/logo-vov.png"></p>
			</div>
			<div class="p60 border-left">
				BÁO ĐIỆN TỬ VTC NEWS. GIẤY PHÉP CẤP LẠI SỐ 268/GP-BTTTT NGÀY 11/07/2013.
				<br/>
				Tổng biên tập: Ngô Văn Hải
				<br/>
				Phó tổng biên tập: Dương Quang Tùng, Trần Anh Thư
				<br/>
				Hotline: 0855.911.911 | Email: toasoan@vtc.gov.vn
				<br/>
				<br/>
				TRỤ SỞ CHÍNH
				<br/>
				Tầng 12A, Tòa nhà 18 Tam Trinh, Hai Bà Trưng, Hà Nội.
				<br/>
				Điện thoại: 024.3632 1588
				<br/>
				Fax: 024.3632 1582
				<br/>
				<br/>
				VĂN PHÒNG ĐẠI DIỆN KHU VỰC PHÍA NAM
				<br/>
				Lầu 10, tòa nhà VOV, số 7, đường Nguyễn Thị Minh Khai, phường Bến Nghé, Quận 1, TP.HCM.
				<br/>
				Điện thoại: 028.3811 1705
				<br/>
				Hotline: 094.884.8186
				<br/>
				Email: vpphianam@vtc.gov.vn
			</div>
		</div>
	</div>
</div>
</body>
</html>

#style.css

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

.container, .header, .main-content, .footer, .navbar, .menubar {
	width: 100% !important;
}

.justify-content {
	width: 70%;
	margin: 0px auto;
}

.navbar img {
	height: 70px;
	float: left;
}

.navbar button {
	background-color: transparent;
	font-size: 18px;
	border: solid #e3e3e3 2px;
	margin-top: 10px;
	margin-left: 20px;
	padding: 10px;
	margin-right: 10px;
}

.navbar input {
	background-color: #e5e5e5;
	font-size: 18px;
	border: solid #e3e3e3 2px;
	margin-top: 10px;
	margin-left: 20px;
	padding: 10px;
	margin-right: 10px;
}

.navbar label {
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 5px;
	padding: 6px;
	margin-right: 5px;
    padding-right: 20px;
	cursor: pointer;
}

.navbar a {
	font-size: 14px;
	font-weight: bold;
	margin-top: 20px;
	margin-left: 5px;
	padding: 6px;
	margin-right: 5px;
    padding-right: 20px;
	cursor: pointer;
	float: right;
	text-decoration: none;
	color: black;
}

.border-right {
	border-right: solid #e3e3e3 2px;
}

.menubar ul {
	list-style-type: none;
	display: flex;
	margin: 0px;
	padding: 0px;
	color: white !important;
	text-transform: uppercase;
}

.menubar ul li {
	padding: 10px;
	cursor: pointer;
}

.menubar ul li:hover {
	background-color: #801217;
}

.p40 {
	text-align: center;
	width: 40%;
	padding: 20px;
	float: left;
}

.p60 {
	/*width: 60%;*/
	float: left;
	padding: 20px;
}

.border-left {
	border-left: solid #e3e3e3 2px;
}

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

.p50 {
	width: 50%;
}

/* Tao khung thiet ke -> de nhin -> se xoa sau khi lam xong * START */
.header {
	/*height: 300px;*/
	/*border: solid red 2px;*/
	/*margin-bottom: 5px;*/
}

.navbar {
	height: 70px;
	/*border: solid green 2px;*/
	/*margin-bottom: 5px;*/
}

.menubar {
	/*height: 140px;*/
	background-color: #a3161d;
	/*border: solid black 2px;*/
	margin-bottom: 5px;
}

.main-content {
	/*height: 800px;*/
	/*border: solid green 2px;*/
	/*margin-bottom: 5px;*/
}

.footer {
	/*height: 300px;*/
	/*border: solid black 2px;*/
}
/* Tao khung thiet ke -> de nhin -> se xoa sau khi lam xong * END */

[Video] Hướng dẫn thiết kế layout website HTML/CSS - Khóa học lập trình HTML/CSS - C2110L

#index.html

#style.css

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 đó