By GokiSoft.com| 20:00 16/09/2022|
Học HTML5 - CSS3

[Source Code] Tìm hiểu JS Onload & jQuery & Responsive trong HTML/CSS/JS - C2206L

#layout.html


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

	<style type="text/css">
		.row {
			width: 100%;
		}

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

		@media only screen and (max-width: 992px) {
			.item {
				width: calc(100%/3);
			}
		}

		/* Extra small devices (phones, 600px and down) */
		@media only screen and (max-width: 600px) {
			.item {
				width: calc(100%/2);
			}

			iframe {
				display: none;
			}
		}
	</style>
</head>
<body>
<div class="row">
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
	<div class="item">
		<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
	</div>
</div>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.729556123589!2d105.84769451542113!3d21.003475286012108!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135ad58455db2ab%3A0x9b3550bc22fd8bb!2zNTQgUC4gTMOqIFRoYW5oIE5naOG7iywgQsOhY2ggS2hvYSwgSGFpIELDoCBUcsawbmcsIEjDoCBO4buZaSwgVmlldG5hbQ!5e0!3m2!1sen!2s!4v1663332805509!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>


#readme.txt


Nội dung kiến thức học:
	- JS
	- jQuery
	- Responsive: PC & Mobile


#res.html


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

	<style type="text/css">
		body {
			background-color: black;
		}

		@media screen and (max-width: 860px) {
		  body {
		    background-color: red;
		  }
		}

		@media screen and (max-width: 680px) {
		  body {
		    background-color: blue;
		  }
		}


		@media screen and (min-width: 860px) and (max-width: 1200px) {
		  body {
		    background-color: yellow;
		  }
		}
	</style>
</head>
<body>

</body>
</html>


#script.js


function init() {
	var msgTag = document.getElementById('msg_id')
	msgTag.value = "Xin chao ABC"
}


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS & jQuery & Responsive in HTML/CSS/JS</title>
</head>
<body onload="init()">
	<input type="text" name="msg" id="msg_id" placeholder="Enter testing ...">

	<script type="text/javascript" src="script.js"></script>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS & jQuery & Responsive in HTML/CSS/JS</title>
</head>
<body>
	<input type="text" name="msg" id="msg_id" placeholder="Enter testing ..." class="abc">
	<input type="text" name="name" id="name_id" placeholder="Enter name ..." class="abc">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			//Xu ly sau khi website build thanh cong
			// var msgTag = document.getElementById('msg_id')
			// msgTag.value = "Xin chao ABC"

			//selector la gi?
			//id: msg_id
			$('#msg_id').val('Xin Chao ABC')
			//class name: abc
			$('.abc').val('KKKKKKK')
			//tag name: input
			$('input').val('ZZZ')
			//thong qua 1 thuoc tinh bat ky
			$('[placeholder="Enter testing ..."]').val('vvvvvvvvv')

			$('#name_id').click(function() {
				console.log('okokokok > ' + $(this).val())
			})
		})
	</script>
</body>
</html>


Tags:



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

5

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

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

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