By GokiSoft.com| 16:30 17/01/2022|
Học HTML5 - CSS3

[Video] Tìm hiểu Responsive trong HTML/CSS - C2110I


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Responsive - Page</title>

	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}

		.row {
			width: 100%;
			text-align: center;
		}

		.item {
			float: left;
			width: calc(100%/6);
		}

		.border {
			margin: 5px;
			padding: 5px;
			border: solid orange 1px;
		}

		/*smartphone*/
		@media only screen and (max-width: 600px) {
			.item {
				float: left;
				width: calc(100%/2);
			}
		}

		@media only screen and (max-width: 1200px) and (min-width:  900px) {
			.item {
				float: left;
				width: calc(100%/4);
			}
		}

		@media only screen and (max-width: 900px) and (min-width:  600px) {
			.item {
				float: left;
				width: calc(100%/3);
			}
		}
	</style>
</head>
<body>
<div class="row">
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
	<div class="item">
		<div class="border">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
			<p>Bài tập số nguyên lớn trong C - Khóa học lập trình C</p>
		</div>
	</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.7294311302394!2d105.84768915087537!3d21.003480293947128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ad58455db2ab%3A0x9b3550bc22fd8bb!2zNTQgUC4gTMOqIFRoYW5oIE5naOG7iywgQsOhY2ggS2hvYSwgSGFpIELDoCBUcsawbmcsIEjDoCBO4buZaSwgVmlldG5hbQ!5e0!3m2!1sen!2s!4v1642406124908!5m2!1sen!2s" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>


Tags:

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

5

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