By GokiSoft.com| 08:55 15/01/2021|
Học HTML5 - CSS3

[Share Code] Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS - Class C2010G

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

#email.html


<!DOCTYPE html>
<html>
<head>
	<title>Email Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a href="help.html"><label class="imgHelp">HELP</label></a>
	<div id="main">
		<form method="post" action="status.html">
			<h2>Compose E-Mail Message</h2>
			<div class="group">
				<label>To:</label>
				<input required="true" type="email" name="to" class="EmailEditor">
			</div>
			<div class="group">
				<label>From:</label>
				<input required="true" type="email" name="from" class="EmailEditor">
			</div>
			<div class="group">
				<label>Cc:</label>
				<input required="true" type="email" name="cc" class="EmailEditor">
			</div>
			<div class="group">
				<label>Subject:</label>
				<input required="true" type="text" name="subject" class="EmailEditor">
			</div>
			<div class="group">
				<label>Message:</label>
				<textarea required="true" name="message" rows="5" class="EmailEditor"></textarea>
			</div>
			<div class="group">
				<!-- label => Tac dung tao layout -->
				<label></label>
				<!-- <a href="status.html"><button>Send</button></a> -->
				<button>Send</button>
				<button>Cancel</button>
			</div>
		</form>
	</div>
</body>
</html>


#help.html


<!DOCTYPE html>
<html>
<head>
	<title>Help Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="help">
		<h2>E-Mail Editor Help</h2>
		<ul>
			<li>To & Cc</li>
			<li>Subject</li>
			<li>Message</li>
		</ul>
		<a href="email.html"><label class="close">Close</label></a>
	</div>
</body>
</html>


#status.html


<!DOCTYPE html>
<html>
<head>
	<title>Help Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Your message has been successfully sent</h1>
</body>
</html>


#style.css


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

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

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

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

.group input, textarea {
	width: 80%;
	float: left;
}

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

.EmailEditor {
	background-color: #FFFFDD;
	border: solid #a59e9e 1px;
}

.imgHelp {
	background-color: #DDFFEE;
	padding: 5px;
	color: blue;
	font-weight: bold;
	cursor: pointer;
	float: right;
	margin-right: 35%;
}
#help {
	width: 500px;
	height: 420px;
	background-color: #cfc;
	margin: 0px auto;
	color: #303030;
	padding: 10px;
}

.close {
	background-color: #DDFFEE;
	float: right;
	font-weight: bold;
	cursor: pointer;
}

ul {
	list-style-image: url('photos/bullet.jpg');
}

ul li {
	margin-bottom: 10px;
}


#bullet.jpg


https://res.cloudinary.com/wegoup/image/upload/v1610675719/cxbegh3f85wcticmwwlm.jpg


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