[Video] Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS - C2110I

Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS

#bullet.jpg

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: 0762103668
Price range: $$$

https://gokisoft.com/uploads/stores/49/2021/12/bullet.jpg

#help.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Compose Email - Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="help">
	<h2>E-Mail Editor Help</h2>
	<ul>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
	</ul>
	<a href="index.html"><span class="Close">Close</span></a>
</div>
</body>
</html>

#index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Compose Email - Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- <a href="help.html"> -->
	<span class="imgHelp">
		Help
	</span>
<!-- </a> -->
<div id="main">
	<h2>Compose e-mail page</h2>
	<form method="post" action="status.html">
		<div class="group">
			<label>To:</label>
			<input type="email" name="to" class="EmailEditor">
		</div>
		<div class="group">
			<label>From:</label>
			<input type="email" name="from" class="EmailEditor">
		</div>
		<div class="group">
			<label>Cc:</label>
			<input type="text" name="Cc" class="EmailEditor">
		</div>
		<div class="group">
			<label>Subject:</label>
			<input type="text" name="subject" class="EmailEditor">
		</div>
		<div class="group">
			<label>Message:</label>
			<textarea rows="5" class="EmailEditor"></textarea>
		</div>
		<div class="group">
			<label></label>
			<button type="submit">Send</button>
			<button type="reset">Cancel</button>
		</div>
	</form>
</div>

<div id="help">
	<h2>E-Mail Editor Help</h2>
	<ul>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
		<li>Vi du</li>
	</ul>
	<a href="index.html"><span class="Close">Close</span></a>
</div>
</body>
</html>

#status.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Success Page</title>
</head>
<body>
	<h1>Your message has been successfully sent.</h1>
</body>
</html>

#style.css

body {
	background-color: rgb(255,255,240);
}

textarea {
	scrollbar-3dlight-color: #C0C0C0;
	scrollbar-shadow-color: silver;
	scrollbar-arrow-color: black;
	scrollbar-face-color: gray;
}

.imgHelp {
	cursor: help;
	background-color: #DDFFEE;
	padding: 8px;
	font-weight: bold;
	position: absolute;
	right: 32%;
	color: blue;
}

.imgHelp:hover ~ #help {
	display: block;
}

.imgHelp:hover ~ #main {
	display: none;
}

.EmailEditor {
	background-color: #FFFFDD;
	border: solid #d2d4d2 2px;
}

#main {
	width: 400px;
	background-color: #DDFFEE;
	padding: 10px;
	margin: 0px auto;
}

#help {
	/*position: absolute;*/
	width: 500px;
	height: 420px;
	top: 10px;
	background-color: #cfc;
	padding: 10px;
	display: none;
	border: solid #E4E7E7 2px;
	color: #303030;
	margin: 0px auto;
}

.Close {
	text-align: right;
	color: blue;
	cursor: pointer;
	float: right;
}

ul {
	list-style-image: url(photos/bullet.jpg);
	list-style-position: inside;
	list-style-type: square;
}

.group {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
}

.group label {
	width: 25%;
}

.group input, .group textarea {
	width: 75%;
}

.group button {
	margin-right: 10px;
	padding: 3px 10px;
}

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

5

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