By GokiSoft.com| 20:35 08/02/2022|
Học HTML5 - CSS3

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

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


#EmailEditor.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Email Editor</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<label class="imgHelp">Help</label>
<div id="main">
	<form method="post" action="Status.html">
		<h2>Compose E-Mail Message</h2>
		<div class="form-group">
			<label>To: </label>
			<input required type="email" name="to">
		</div>
		<div class="form-group">
			<label>From: </label>
			<input required type="email" name="from">
		</div>
		<div class="form-group">
			<label>Cc: </label>
			<input required type="email" name="cc">
		</div>
		<div class="form-group">
			<label>Subject: </label>
			<input required type="text" name="subject">
		</div>
		<div class="form-group">
			<label>Message: </label>
			<textarea required rows="10"></textarea>
		</div>
		<div class="form-group">
			<label>&nbsp;</label>
			<button type="submit">Send</button>
			<button type="reset">Cancel</button>
		</div>
	</form>
</div>
<div id="help">
	<h2>Help</h2>
</div>
</body>
</html>


#Status.html


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


#style.css


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

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

.EmailEditor {
	background-color: #FFFFDD;
}

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

#main h2 {
	text-align: center;
}

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

.form-group label {
	width: 20%;
	text-align: right;
	padding-right: 20px;
}

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

.form-group button {
	margin: 0px;
	margin-right: 10px;
}

#help {
	width: 400px;
	height: 300px;
	margin: 0px auto;
	background-color: #DDFFEE;
	padding: 10px;
	display: none;
}

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

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


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