6 yıl önce · 02d31714f7
--- a/Day21-30/code/new/vue/vue.demo.html
+++ b/Day21-30/code/new/vue/vue.demo.html
--- a/Day21-30/code/new/web1901/audio/test-audio.mp3
+++ b/Day21-30/code/new/web1901/audio/test-audio.mp3
--- a/Day21-30/code/new/web1901/audio/test-audio.ogg
+++ b/Day21-30/code/new/web1901/audio/test-audio.ogg
--- a/Day21-30/code/new/web1901/css/style.css
+++ b/Day21-30/code/new/web1901/css/style.css
@@ -0,0 +1,56 @@
 
				+/* 通配符选择器 */
			
 
				+* {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+}
			
 
				+/* 标签选择器 */
			
 
				+h1 {
			
 
				+	width: 960px;
			
 
				+	height: 40px;
			
 
				+	margin: 5px auto;
			
 
				+}
			
 
				+/* 类选择器 */
			
 
				+.a {
			
 
				+	background-color: red;
			
 
				+}
			
 
				+.b {
			
 
				+	background-color: orange;
			
 
				+}
			
 
				+.c {
			
 
				+	background-color: yellow;
			
 
				+}
			
 
				+.d {
			
 
				+	background-color: green;
			
 
				+}
			
 
				+.e {
			
 
				+	background-color: cyan;
			
 
				+}
			
 
				+.f {
			
 
				+	background-color: blue;
			
 
				+}
			
 
				+.g {
			
 
				+	background-color: purple;
			
 
				+}
			
 
				+.h {
			
 
				+	color: blue;
			
 
				+	text-align: center;
			
 
				+	width: 100px;
			
 
				+	height: 38px;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+.big {
			
 
				+	font-size: 32px;
			
 
				+}
			
 
				+.normal {
			
 
				+	font-size: 18px;
			
 
				+}
			
 
				+.small {
			
 
				+	font-size: 12px;
			
 
				+}
			
 
				+/* ID选择器 */
			
 
				+#header, #footer {
			
 
				+	width: 800px;
			
 
				+	height: 120px;
			
 
				+	border: 1px solid red;
			
 
				+	margin: 10px auto;
			
 
				+}
			
--- a/Day21-30/code/new/web1901/css_practice_1.html
+++ b/Day21-30/code/new/web1901/css_practice_1.html
@@ -0,0 +1,81 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>Boxes</title>
			
 
				+		<style>
			
 
				+			* {
			
 
				+				/* border: 1px solid black; */
			
 
				+				font-family: "Courier New";
			
 
				+				margin: 0;
			
 
				+				padding: 0;
			
 
				+			}
			
 
				+			body {
			
 
				+				background-color: rgba(192, 192, 192, 0.3);
			
 
				+			}
			
 
				+			#page {
			
 
				+				width: 880px;
			
 
				+				border: 4px double black;
			
 
				+				background-color: white;
			
 
				+				margin: 10px auto;
			
 
				+				padding: 20px 50px;
			
 
				+			}
			
 
				+			#logo {
			
 
				+				width: 100%;
			
 
				+				text-align: center;
			
 
				+			}
			
 
				+			#navigation {
			
 
				+				width: 600px;
			
 
				+				height: 60px;
			
 
				+				margin: 10px auto;
			
 
				+				border-top: 2px solid black;
			
 
				+				border-bottom: 1px solid black;
			
 
				+			}
			
 
				+			#navigation>li {
			
 
				+				float: left;
			
 
				+				width: 120px;
			
 
				+				height: 40px;
			
 
				+				list-style-type:none;
			
 
				+				text-align: center;
			
 
				+				line-height: 40px;
			
 
				+				padding-top: 10px;
			
 
				+			}
			
 
				+			#navigation>li>a {
			
 
				+				text-decoration: none;
			
 
				+				letter-spacing: 0.15em;
			
 
				+				color: black;
			
 
				+			}
			
 
				+			#navigation>li:first-child>a{
			
 
				+				color: red;
			
 
				+			}
			
 
				+			#navigation>li>a:hover {
			
 
				+				color: red;
			
 
				+			}
			
 
				+			#navigation~p {
			
 
				+				width: 600px;
			
 
				+				margin: 20px auto;
			
 
				+				text-align: center;
			
 
				+				line-height: 20px;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="page">
			
 
				+			<div id="logo">
			
 
				+				<img src="images/logo.gif" alt="The Analog Specialists" />
			
 
				+			</div>
			
 
				+			<ul id="navigation">
			
 
				+				<li><a href="#" class="on">Home</a></li>
			
 
				+				<li><a href="#">For Sale</a></li>
			
 
				+				<li><a href="#">Repairs</a></li>
			
 
				+				<li><a href="#">About</a></li>
			
 
				+				<li><a href="#">Contact</a></li>
			
 
				+			</ul>
			
 
				+			<p>
			
 
				+				<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
			
 
				+			</p>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/css_practice_1.result.html
+++ b/Day21-30/code/new/web1901/css_practice_1.result.html
@@ -0,0 +1,74 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>Boxes</title>
			
 
				+		<style type="text/css">
			
 
				+			body {
			
 
				+				font-size: 80%;
			
 
				+				font-family: "Courier New", Courier, monospace;
			
 
				+				letter-spacing: 0.15em;	
			
 
				+				background-color: #efefef;
			
 
				+			}
			
 
				+			#page {
			
 
				+				max-width: 940px;
			
 
				+				min-width: 720px;
			
 
				+				margin: 10px auto 10px auto;
			
 
				+				padding: 20px;
			
 
				+				border: 4px double #000;
			
 
				+				background-color: #ffffff;
			
 
				+			}
			
 
				+			#logo {
			
 
				+				width: 150px;
			
 
				+				margin: 10px auto 25px auto;
			
 
				+			}
			
 
				+			ul {
			
 
				+				width: 570px;
			
 
				+				padding: 15px;
			
 
				+				margin: 0px auto 0px auto;
			
 
				+				border-top: 2px solid #000;
			
 
				+				border-bottom: 1px solid #000;
			
 
				+				text-align: center;
			
 
				+			}
			
 
				+			li {
			
 
				+				display: inline;
			
 
				+				margin: 0px 3px;
			
 
				+			}
			
 
				+			p {
			
 
				+				text-align: center;
			
 
				+				width: 600px; 
			
 
				+				margin: 20px auto 20px auto; 
			
 
				+				font-weight: normal;
			
 
				+			}
			
 
				+			a {
			
 
				+				color: #000000;
			
 
				+				text-transform: uppercase;
			
 
				+				text-decoration: none;
			
 
				+				padding: 6px 18px 5px 18px;
			
 
				+			}
			
 
				+			a:hover, a.on {
			
 
				+				color: #cc3333;
			
 
				+				background-color: #ffffff;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="page">
			
 
				+			<div id="logo">
			
 
				+				<img src="images/logo.gif" alt="The Analog Specialists" />
			
 
				+			</div>
			
 
				+			<ul id="navigation">
			
 
				+				<li><a href="#" class="on">Home</a></li>
			
 
				+				<li><a href="#">For Sale</a></li>
			
 
				+				<li><a href="#">Repairs</a></li>
			
 
				+				<li><a href="#">About</a></li>
			
 
				+				<li><a href="#">Contact</a></li>
			
 
				+			</ul>
			
 
				+			<p>
			
 
				+				<img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
			
 
				+			</p>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/css_practice_2.html
+++ b/Day21-30/code/new/web1901/css_practice_2.html
@@ -0,0 +1,101 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>Lists, Tables and Forms</title>
			
 
				+		<style>
			
 
				+			.books>li {
			
 
				+				list-style-image: url(images/icon-plus.png);
			
 
				+			}
			
 
				+			.schedule {
			
 
				+				border-spacing: 0;
			
 
				+			}
			
 
				+			.header {
			
 
				+				background-color: rgb(126, 164, 204);
			
 
				+			}
			
 
				+			.header>th:first-child {
			
 
				+				border-top-left-radius: 5px;
			
 
				+			}
			
 
				+			.header>th:last-child {
			
 
				+				border-top-right-radius: 5px;
			
 
				+			}
			
 
				+			.schedule td, .schedule th {
			
 
				+				border: 1px solid lightgray;
			
 
				+			}
			
 
				+			.header th {
			
 
				+				border-bottom: 2px solid rgb(68, 104, 142);
			
 
				+			}
			
 
				+			label {
			
 
				+				display: inline-block;
			
 
				+				width: 160px;
			
 
				+				text-align: right;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<h1>Poetry Workshops</h1>
			
 
				+		<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
			
 
				+		<p>Please note that the following events are free to members:</p>
			
 
				+		<ul class="books">
			
 
				+			<li>A Poetic Perspective</li>
			
 
				+			<li>Walt Whitman at War</li>
			
 
				+			<li>Found Poems and Outsider Poetry</li>
			
 
				+		</ul>
			
 
				+		<table class="schedule">
			
 
				+			<tr class="header">
			
 
				+				<th></th>
			
 
				+				<th>New York</th>
			
 
				+				<th>Chicago</th>
			
 
				+				<th>San Francisco</th>
			
 
				+			</tr>
			
 
				+			<tr class="odd">
			
 
				+				<th>A Poetic Perspective</th>
			
 
				+				<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
			
 
				+			</tr>
			
 
				+			<tr class="even">
			
 
				+				<th>Walt Whitman at War</th>
			
 
				+				<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
			
 
				+				<td>Sat, 5 May 2012<br />11am - 1pm</td>
			
 
				+				<td>Sat, 19 May 2012<br />11am - 1pm</td>
			
 
				+			</tr>
			
 
				+			<tr class="odd">
			
 
				+				<th>Found Poems &amp; Outsider Poetry</th>
			
 
				+				<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
			
 
				+			</tr>
			
 
				+			<tr class="even">
			
 
				+				<th>Natural Death: An Exploration</th>
			
 
				+				<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
			
 
				+				<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
			
 
				+				<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
			
 
				+			</tr>
			
 
				+		</table>
			
 
				+		<form action="" method="post">
			
 
				+			<fieldset>
			
 
				+				<legend>Register your interest</legend>
			
 
				+				<p>
			
 
				+					<label for="name">Your name:</label>
			
 
				+					<input type="text" name="name" id="name"><br>
			
 
				+					<label for="email">Your email:</label>
			
 
				+					<input type="text" name="email" id="email">
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					<label for="location">Your closest center:</label>
			
 
				+					<select name="location" id="location">
			
 
				+						<option value="ny">New York</option>
			
 
				+						<option value="il">Chicago</option>
			
 
				+						<option value="ca">San Francisco</option>
			
 
				+					</select>
			
 
				+				</p>
			
 
				+				<label>Are you a member?</label>
			
 
				+				<input type="radio" name="member" value="yes"> Yes
			
 
				+				<input type="radio" name="member" value="no"> No
			
 
				+			</fieldset>
			
 
				+			<div>
			
 
				+				<input type="submit" value="Register" />
			
 
				+			</div>
			
 
				+		</form>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/css_practice_2.result.html
+++ b/Day21-30/code/new/web1901/css_practice_2.result.html
@@ -0,0 +1,175 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>Lists, Tables and Forms</title>
			
 
				+		<style type="text/css">
			
 
				+			body {
			
 
				+				font-family: Arial, Verdana, sans-serif;
			
 
				+				font-size: 90%;
			
 
				+				color: #666;
			
 
				+				background-color: #f8f8f8;
			
 
				+			}
			
 
				+			li {
			
 
				+				list-style-image: url("images/icon-plus.png");
			
 
				+				line-height: 1.6em;
			
 
				+			}
			
 
				+			table {
			
 
				+				border-spacing: 0px;
			
 
				+			}
			
 
				+			th, td {
			
 
				+				padding: 5px 30px 5px 10px;
			
 
				+				border-spacing: 0px;
			
 
				+				font-size: 90%;
			
 
				+				margin: 0px;
			
 
				+			}
			
 
				+			th, td {
			
 
				+				text-align: left;
			
 
				+				background-color: #e0e9f0;
			
 
				+				border-top: 1px solid #f1f8fe;
			
 
				+				border-bottom: 1px solid #cbd2d8;
			
 
				+				border-right: 1px solid #cbd2d8;
			
 
				+			}
			
 
				+			tr.head th {
			
 
				+				color: #fff;
			
 
				+				background-color: #90b4d6;
			
 
				+				border-bottom: 2px solid #547ca0;
			
 
				+				border-right: 1px solid #749abe;
			
 
				+				border-top: 1px solid #90b4d6;
			
 
				+				text-align: center;
			
 
				+				text-shadow: -1px -1px 1px #666666;
			
 
				+				letter-spacing: 0.15em;
			
 
				+			}
			
 
				+			td {
			
 
				+				text-shadow: 1px 1px 1px #ffffff;
			
 
				+			}
			
 
				+			tr.even td, tr.even th {
			
 
				+				background-color: #e8eff5;
			
 
				+			}
			
 
				+			tr.head th:first-child {
			
 
				+				-webkit-border-top-left-radius: 5px;
			
 
				+				-moz-border-radius-topleft: 5px;
			
 
				+				border-top-left-radius: 5px;
			
 
				+			}
			
 
				+			tr.head th:last-child {
			
 
				+				-webkit-border-top-right-radius: 5px;
			
 
				+				-moz-border-radius-topright: 5px;
			
 
				+				border-top-right-radius: 5px;
			
 
				+			}
			
 
				+			fieldset {
			
 
				+				width: 310px;
			
 
				+				margin-top: 20px;
			
 
				+				border: 1px solid #d6d6d6;
			
 
				+				background-color: #ffffff;
			
 
				+				line-height: 1.6em;
			
 
				+			}
			
 
				+			legend {
			
 
				+				font-style: italic;
			
 
				+				color: #666666;
			
 
				+			}
			
 
				+			input[type="text"] {
			
 
				+				width: 120px;
			
 
				+				border: 1px solid #d6d6d6;
			
 
				+				padding: 2px;
			
 
				+				outline: none;
			
 
				+			}
			
 
				+			input[type="text"]:focus, input[type="text"]:hover {
			
 
				+				background-color: #d0e2f0;
			
 
				+				border: 1px solid #999999;
			
 
				+			}
			
 
				+			input[type="submit"] {
			
 
				+				border: 1px solid #006633;
			
 
				+				background-color: #009966;
			
 
				+				color: #ffffff;
			
 
				+				border-radius: 5px;
			
 
				+				padding: 5px;
			
 
				+				margin-top: 10px;
			
 
				+			}
			
 
				+			input[type="submit"]:hover {
			
 
				+				border: 1px solid #006633;
			
 
				+				background-color: #00CC33;
			
 
				+				color: #ffffff;
			
 
				+				cursor: pointer;
			
 
				+			}
			
 
				+			.title {
			
 
				+				float: left;
			
 
				+				width: 160px;
			
 
				+				clear: left;
			
 
				+			}
			
 
				+			.submit {
			
 
				+				width: 310px;
			
 
				+				text-align: right;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<h1>Poetry Workshops</h1>
			
 
				+		<p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
			
 
				+		<p>Please note that the following events are free to members:</p>
			
 
				+		<ul>
			
 
				+			<li>A Poetic Perspective</li>
			
 
				+			<li>Walt Whitman at War</li>
			
 
				+			<li>Found Poems and Outsider Poetry</li>
			
 
				+		</ul>
			
 
				+		<table>
			
 
				+			<tr class="head">
			
 
				+				<th></th>
			
 
				+				<th>New York</th>
			
 
				+				<th>Chicago</th>
			
 
				+				<th>San Francisco</th>
			
 
				+			</tr>
			
 
				+			<tr>
			
 
				+				<th>A Poetic Perspective</th>
			
 
				+				<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
			
 
				+			</tr>
			
 
				+			<tr class="even">
			
 
				+				<th>Walt Whitman at War</th>
			
 
				+				<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
			
 
				+				<td>Sat, 5 May 2012<br />11am - 1pm</td>
			
 
				+				<td>Sat, 19 May 2012<br />11am - 1pm</td>
			
 
				+			</tr>
			
 
				+			<tr>
			
 
				+				<th>Found Poems &amp; Outsider Poetry</th>
			
 
				+				<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
			
 
				+				<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
			
 
				+			</tr>
			
 
				+			<tr class="even">
			
 
				+				<th>Natural Death: An Exploration</th>
			
 
				+				<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
			
 
				+				<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
			
 
				+				<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
			
 
				+			</tr>
			
 
				+		</table>
			
 
				+		<form action="http://www.example.com/form.php" method="get">
			
 
				+			<fieldset>
			
 
				+				<legend>Register your interest</legend>
			
 
				+				<p>
			
 
				+					<label class="title" for="name">Your name:</label>
			
 
				+					<input type="text" name="name" id="name"><br>
			
 
				+					<label class="title" for="email">Your email:</label>
			
 
				+					<input type="text" name="email" id="email">
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					<label for="location" class="title">Your closest center:</label>
			
 
				+					<select name="location" id="location">
			
 
				+						<option value="ny">New York</option>
			
 
				+						<option value="il">Chicago</option>
			
 
				+						<option value="ca">San Francisco</option>
			
 
				+					</select>
			
 
				+				</p>
			
 
				+				<span class="title">Are you a member?</span>
			
 
				+				<label>
			
 
				+					<input type="radio" name="member" value="yes"> Yes
			
 
				+				</label>
			
 
				+				<label>
			
 
				+					<input type="radio" name="member" value="no"> No
			
 
				+				</label>
			
 
				+			</fieldset>
			
 
				+			<div class="submit">
			
 
				+				<input type="submit" value="Register" />
			
 
				+			</div>
			
 
				+		</form>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/css_practice_3.html
+++ b/Day21-30/code/new/web1901/css_practice_3.html
@@ -0,0 +1,73 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>HTML5 Layout</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div>
			
 
				+			<header>
			
 
				+				<h1>Yoko's Kitchen</h1>
			
 
				+				<nav>
			
 
				+					<ul>
			
 
				+						<li><a href="">home</a></li>
			
 
				+						<li><a href="">classes</a></li>
			
 
				+						<li><a href="">catering</a></li>
			
 
				+						<li><a href="">about</a></li>
			
 
				+						<li><a href="">contact</a></li>
			
 
				+					</ul>
			
 
				+				</nav>
			
 
				+			</header>
			
 
				+			<section>
			
 
				+				<article>
			
 
				+					<figure>
			
 
				+						<img src="images/bok-choi.jpg" alt="Bok Choi" />
			
 
				+						<figcaption>Bok Choi</figcaption>
			
 
				+					</figure>
			
 
				+					<hgroup>
			
 
				+						<h2>Japanese Vegetarian</h2>
			
 
				+						<h3>Five week course in London</h3>
			
 
				+					</hgroup>
			
 
				+					<p>
			
 
				+						A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
			
 
				+						dishes.
			
 
				+					</p>
			
 
				+				</article>
			
 
				+				<article>
			
 
				+					<figure>
			
 
				+						<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
			
 
				+						<figcaption>Teriyaki Sauce</figcaption>
			
 
				+					</figure>
			
 
				+					<hgroup>
			
 
				+						<h2>Sauces Masterclass</h2>
			
 
				+						<h3>One day workshop</h3>
			
 
				+					</hgroup>
			
 
				+					<p>
			
 
				+						An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
			
 
				+						cookery.
			
 
				+					</p>
			
 
				+				</article>
			
 
				+			</section>
			
 
				+			<aside>
			
 
				+				<section>
			
 
				+					<h2>Popular Recipes</h2>
			
 
				+					<a href="">Yakitori (grilled chicken)</a>
			
 
				+					<a href="">Tsukune (minced chicken patties)</a>
			
 
				+					<a href="">Okonomiyaki (savory pancakes)</a>
			
 
				+					<a href="">Mizutaki (chicken stew)</a>
			
 
				+				</section>
			
 
				+				<section>
			
 
				+					<h2>Contact</h2>
			
 
				+					<p>
			
 
				+						Yoko's Kitchen<br>
			
 
				+						27 Redchurch Street<br>
			
 
				+						Shoreditch<br>
			
 
				+						London E2 7DP
			
 
				+					</p>
			
 
				+				</section>
			
 
				+			</aside>
			
 
				+			<footer>
			
 
				+				&copy; 2011 Yoko's Kitchen
			
 
				+			</footer>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/css_practice_3.result.html
+++ b/Day21-30/code/new/web1901/css_practice_3.result.html
@@ -0,0 +1,222 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<title>HTML5 Layout</title>
			
 
				+		<style type="text/css">
			
 
				+			header,
			
 
				+			section,
			
 
				+			footer,
			
 
				+			aside,
			
 
				+			nav,
			
 
				+			article,
			
 
				+			figure,
			
 
				+			figcaption {
			
 
				+				display: block;
			
 
				+			}
			
 
				+
			
 
				+			body {
			
 
				+				color: #666666;
			
 
				+				background-color: #f9f8f6;
			
 
				+				background-image: url("images/dark-wood.jpg");
			
 
				+				background-position: center;
			
 
				+				font-family: Georgia, Times, serif;
			
 
				+				line-height: 1.4em;
			
 
				+				margin: 0px;
			
 
				+			}
			
 
				+
			
 
				+			.wrapper {
			
 
				+				width: 940px;
			
 
				+				margin: 20px auto 20px auto;
			
 
				+				border: 2px solid #000000;
			
 
				+				background-color: #ffffff;
			
 
				+			}
			
 
				+
			
 
				+			header {
			
 
				+				height: 160px;
			
 
				+				background-image: url(images/header.jpg);
			
 
				+			}
			
 
				+
			
 
				+			h1 {
			
 
				+				text-indent: -9999px;
			
 
				+				width: 940px;
			
 
				+				height: 130px;
			
 
				+				margin: 0px;
			
 
				+			}
			
 
				+
			
 
				+			nav,
			
 
				+			footer {
			
 
				+				clear: both;
			
 
				+				color: #ffffff;
			
 
				+				background-color: #aeaca8;
			
 
				+				height: 30px;
			
 
				+			}
			
 
				+
			
 
				+			nav ul {
			
 
				+				margin: 0px;
			
 
				+				padding: 5px 0px 5px 30px;
			
 
				+			}
			
 
				+
			
 
				+			nav li {
			
 
				+				display: inline;
			
 
				+				margin-right: 40px;
			
 
				+			}
			
 
				+
			
 
				+			nav li a {
			
 
				+				color: #ffffff;
			
 
				+			}
			
 
				+
			
 
				+			nav li a:hover,
			
 
				+			nav li a.current {
			
 
				+				color: #000000;
			
 
				+			}
			
 
				+
			
 
				+			section.courses {
			
 
				+				float: left;
			
 
				+				width: 659px;
			
 
				+				border-right: 1px solid #eeeeee;
			
 
				+			}
			
 
				+
			
 
				+			article {
			
 
				+				clear: both;
			
 
				+				overflow: auto;
			
 
				+				width: 100%;
			
 
				+			}
			
 
				+
			
 
				+			hgroup {
			
 
				+				margin-top: 40px;
			
 
				+			}
			
 
				+
			
 
				+			figure {
			
 
				+				float: left;
			
 
				+				width: 290px;
			
 
				+				height: 220px;
			
 
				+				padding: 5px;
			
 
				+				margin: 20px;
			
 
				+				border: 1px solid #eeeeee;
			
 
				+			}
			
 
				+
			
 
				+			figcaption {
			
 
				+				font-size: 90%;
			
 
				+				text-align: left;
			
 
				+			}
			
 
				+
			
 
				+			aside {
			
 
				+				width: 230px;
			
 
				+				float: left;
			
 
				+				padding: 0px 0px 0px 20px;
			
 
				+			}
			
 
				+
			
 
				+			aside section a {
			
 
				+				display: block;
			
 
				+				padding: 10px;
			
 
				+				border-bottom: 1px solid #eeeeee;
			
 
				+			}
			
 
				+
			
 
				+			aside section a:hover {
			
 
				+				color: #985d6a;
			
 
				+				background-color: #efefef;
			
 
				+			}
			
 
				+
			
 
				+			a {
			
 
				+				color: #de6581;
			
 
				+				text-decoration: none;
			
 
				+			}
			
 
				+
			
 
				+			h1,
			
 
				+			h2,
			
 
				+			h3 {
			
 
				+				font-weight: normal;
			
 
				+			}
			
 
				+
			
 
				+			h2 {
			
 
				+				margin: 10px 0px 5px 0px;
			
 
				+				padding: 0px;
			
 
				+			}
			
 
				+
			
 
				+			h3 {
			
 
				+				margin: 0px 0px 10px 0px;
			
 
				+				color: #de6581;
			
 
				+			}
			
 
				+
			
 
				+			aside h2 {
			
 
				+				padding: 30px 0px 10px 0px;
			
 
				+				color: #de6581;
			
 
				+			}
			
 
				+
			
 
				+			footer {
			
 
				+				font-size: 80%;
			
 
				+				padding: 7px 0px 0px 20px;
			
 
				+			}
			
 
				+		</style>
			
 
				+		<!--[if lt IE 9]>
			
 
				+		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			
 
				+		<![endif]-->
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="wrapper">
			
 
				+			<header>
			
 
				+				<h1>Yoko's Kitchen</h1>
			
 
				+				<nav>
			
 
				+					<ul>
			
 
				+						<li><a href="" class="current">home</a></li>
			
 
				+						<li><a href="">classes</a></li>
			
 
				+						<li><a href="">catering</a></li>
			
 
				+						<li><a href="">about</a></li>
			
 
				+						<li><a href="">contact</a></li>
			
 
				+					</ul>
			
 
				+				</nav>
			
 
				+			</header>
			
 
				+			<section class="courses">
			
 
				+				<article>
			
 
				+					<figure>
			
 
				+						<img src="images/bok-choi.jpg" alt="Bok Choi" />
			
 
				+						<figcaption>Bok Choi</figcaption>
			
 
				+					</figure>
			
 
				+					<hgroup>
			
 
				+						<h2>Japanese Vegetarian</h2>
			
 
				+						<h3>Five week course in London</h3>
			
 
				+					</hgroup>
			
 
				+					<p>
			
 
				+						A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
			
 
				+						dishes.
			
 
				+					</p>
			
 
				+				</article>
			
 
				+				<article>
			
 
				+					<figure>
			
 
				+						<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
			
 
				+						<figcaption>Teriyaki Sauce</figcaption>
			
 
				+					</figure>
			
 
				+					<hgroup>
			
 
				+						<h2>Sauces Masterclass</h2>
			
 
				+						<h3>One day workshop</h3>
			
 
				+					</hgroup>
			
 
				+					<p>
			
 
				+						An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
			
 
				+						cookery.
			
 
				+					</p>
			
 
				+				</article>
			
 
				+			</section>
			
 
				+			<aside>
			
 
				+				<section class="popular-recipes">
			
 
				+					<h2>Popular Recipes</h2>
			
 
				+					<a href="">Yakitori (grilled chicken)</a>
			
 
				+					<a href="">Tsukune (minced chicken patties)</a>
			
 
				+					<a href="">Okonomiyaki (savory pancakes)</a>
			
 
				+					<a href="">Mizutaki (chicken stew)</a>
			
 
				+				</section>
			
 
				+				<section class="contact-details">
			
 
				+					<h2>Contact</h2>
			
 
				+					<p>
			
 
				+						Yoko's Kitchen<br>
			
 
				+						27 Redchurch Street<br>
			
 
				+						Shoreditch<br>
			
 
				+						London E2 7DP
			
 
				+					</p>
			
 
				+				</section>
			
 
				+			</aside>
			
 
				+			<footer>
			
 
				+				&copy; 2011 Yoko's Kitchen
			
 
				+			</footer>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_anchor.html
+++ b/Day21-30/code/new/web1901/example_of_anchor.html
--- a/Day21-30/code/new/web1901/example_of_audio_video.html
+++ b/Day21-30/code/new/web1901/example_of_audio_video.html
@@ -0,0 +1,15 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>音视频</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<audio controls autoplay loop>
			
 
				+			<source src="audio/test-audio.mp3"></source>
			
 
				+		</audio>
			
 
				+		<video width="400" controls>
			
 
				+			<source src="video/puppy.mp4"></source>
			
 
				+		</video>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_bom_1.html
+++ b/Day21-30/code/new/web1901/example_of_bom_1.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>BOM - 延迟跳转</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<h3><span id="countdown">5</span>秒钟以后自动跳转到百度</h3>
			
 
				+		<button id="cancelBtn">取消跳转</button>
			
 
				+		<button id="openBtn">打开百度</button>
			
 
				+		<script>
			
 
				+// 			alert(localStorage.sport)
			
 
				+// 			alert(localStorage.fruit)
			
 
				+// 			localStorage.sport = '乒乓球'
			
 
				+// 			localStorage.fruit = '榴莲'
			
 
				+			const openBtn = document.getElementById('openBtn')
			
 
				+			openBtn.addEventListener('click', () => print())
			
 
				+			const cancelBtn = document.getElementById('cancelBtn')
			
 
				+			cancelBtn.addEventListener('click', () => clearInterval(timerId))
			
 
				+			const span = document.getElementById('countdown')
			
 
				+			var counter = 5
			
 
				+			var timerId = setInterval(function () {
			
 
				+				counter -= 1
			
 
				+				if (counter == 0) {
			
 
				+					// location对象代表了浏览器的地址栏
			
 
				+					location.href = 'http://www.baidu.com'
			
 
				+				} else {
			
 
				+					span.textContent = counter
			
 
				+				}
			
 
				+			}, 1000)
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_bootstrap.html
+++ b/Day21-30/code/new/web1901/example_of_bootstrap.html
@@ -0,0 +1,111 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title></title>
			
 
				+		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="container">
			
 
				+			<div class="row clearfix">
			
 
				+				<div class="col-md-3 column">
			
 
				+					<img alt="140x140" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" />
			
 
				+				</div>
			
 
				+				<div class="col-md-9 column">
			
 
				+					<h3>
			
 
				+						h3. 这是一套可视化布局系统.
			
 
				+					</h3>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="row clearfix">
			
 
				+				<div class="col-md-12 column">
			
 
				+					<ul class="nav nav-tabs">
			
 
				+						<li class="active">
			
 
				+							<a href="#">首页</a>
			
 
				+						</li>
			
 
				+						<li>
			
 
				+							<a href="#">简介</a>
			
 
				+						</li>
			
 
				+						<li class="disabled">
			
 
				+							<a href="#">信息</a>
			
 
				+						</li>
			
 
				+						<li class="dropdown pull-right">
			
 
				+							<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
			
 
				+							<ul class="dropdown-menu">
			
 
				+								<li>
			
 
				+									<a href="#">操作</a>
			
 
				+								</li>
			
 
				+								<li>
			
 
				+									<a href="#">设置栏目</a>
			
 
				+								</li>
			
 
				+								<li>
			
 
				+									<a href="#">更多设置</a>
			
 
				+								</li>
			
 
				+								<li class="divider">
			
 
				+								</li>
			
 
				+								<li>
			
 
				+									<a href="#">分割线</a>
			
 
				+								</li>
			
 
				+							</ul>
			
 
				+						</li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="row clearfix">
			
 
				+				<div class="col-md-12 column">
			
 
				+					<div class="carousel slide" id="carousel-812781">
			
 
				+						<ol class="carousel-indicators">
			
 
				+							<li class="active" data-slide-to="0" data-target="#carousel-812781">
			
 
				+							</li>
			
 
				+							<li data-slide-to="1" data-target="#carousel-812781">
			
 
				+							</li>
			
 
				+							<li data-slide-to="2" data-target="#carousel-812781">
			
 
				+							</li>
			
 
				+						</ol>
			
 
				+						<div class="carousel-inner">
			
 
				+							<div class="item active">
			
 
				+								<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
			
 
				+								<div class="carousel-caption">
			
 
				+									<h4>
			
 
				+										First Thumbnail label
			
 
				+									</h4>
			
 
				+									<p>
			
 
				+										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
			
 
				+										metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
			
 
				+									</p>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="item">
			
 
				+								<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
			
 
				+								<div class="carousel-caption">
			
 
				+									<h4>
			
 
				+										Second Thumbnail label
			
 
				+									</h4>
			
 
				+									<p>
			
 
				+										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
			
 
				+										metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
			
 
				+									</p>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="item">
			
 
				+								<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
			
 
				+								<div class="carousel-caption">
			
 
				+									<h4>
			
 
				+										Third Thumbnail label
			
 
				+									</h4>
			
 
				+									<p>
			
 
				+										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget
			
 
				+										metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
			
 
				+									</p>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+						</div> <a class="left carousel-control" href="#carousel-812781" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
			
 
				+						<a class="right carousel-control" href="#carousel-812781" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
			
 
				+		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_css_1.html
+++ b/Day21-30/code/new/web1901/example_of_css_1.html
@@ -0,0 +1,29 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>CSS - 内部和外部样式表</title>
			
 
				+		<!-- 外部样式表 -->
			
 
				+		<link rel="stylesheet" href="css/style.css">
			
 
				+		<!-- 内部样式表 -->
			
 
				+		<style>
			
 
				+			* {
			
 
				+				border: 1px dashed black;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<!-- 内嵌样式表 -->
			
 
				+		<div id="header" style="background-color: gray;"></div>
			
 
				+		<h1 class="a"></h1>
			
 
				+		<h1 class="b"></h1>
			
 
				+		<h1 class="c"></h1>
			
 
				+		<h1 class="d"></h1>
			
 
				+		<h1 class="e"></h1>
			
 
				+		<h1 class="f"></h1>
			
 
				+		<h1 class="g"></h1>
			
 
				+		<p class="c h big">静夜思 - 李白</p>
			
 
				+		床前明月光
			
 
				+		<div id="footer"></div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_css_2.html
+++ b/Day21-30/code/new/web1901/example_of_css_2.html
@@ -0,0 +1,35 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>CSS - 优先级</title>
			
 
				+		<!-- 一般情况下网站的首页会使用内部样式表 - 首页正常渲染 -->
			
 
				+		<!-- 其他的页面可以共享一个或多个外部样式表 - 代码复用/减少对带宽和流量的使用 -->
			
 
				+		<link rel="stylesheet" href="css/style.css">
			
 
				+		<!-- 不冲突的样式会叠加，有冲突的样式遵循三条原则 -->
			
 
				+		<!-- 1. 就近原则 -->
			
 
				+		<!-- 2. 具体性原则（ID > 类 > 标签 > 通配符） -->
			
 
				+		<!-- 3. 重要性原则 -->
			
 
				+		<style>
			
 
				+			#h1 { color: blue; }
			
 
				+			.h1 { color: green !important; }
			
 
				+			.h1 { 
			
 
				+				color: pink !important;
			
 
				+				border: 5px dotted #FFA500;
			
 
				+				width: 300px;
			
 
				+				height: 80px;
			
 
				+				line-height: 80px;
			
 
				+				text-align: center;
			
 
				+				margin-top: 50px;
			
 
				+				padding: 100px 100px;
			
 
				+			}
			
 
				+			h1 { color: red; }
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<!-- 内嵌样式表 / 行内样式表 -->
			
 
				+		<h1 class="a big" style="background-color: #ffff00; font-family: 'courier new'; text-align: center;">Hello, world!</h1>
			
 
				+		<!-- Box Model（盒子模型）-->
			
 
				+		<h1 class="h1" id="h1">Goodbye world!</h1>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_css_3.html
+++ b/Day21-30/code/new/web1901/example_of_css_3.html
@@ -0,0 +1,109 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>CSS - 盒子模型</title>
			
 
				+		<style>
			
 
				+			@font-face {
			
 
				+				font-family: "FatDog";
			
 
				+				src: url('fonts/chunkfive.ttf');
			
 
				+			}
			
 
				+			body {
			
 
				+				width: 960px;
			
 
				+				margin: 0 auto;
			
 
				+			}
			
 
				+			.ms {
			
 
				+				letter-spacing: 10px;
			
 
				+				width: 320px;
			
 
				+				height: 100px;
			
 
				+				border: 5px dotted gray;
			
 
				+				line-height: 100px;
			
 
				+				text-align: center;
			
 
				+				margin: 10px auto;
			
 
				+				text-decoration: underline;
			
 
				+				text-shadow: 2px 2px gray;
			
 
				+				font-size: 400%;
			
 
				+			}
			
 
				+			.one {
			
 
				+				text-indent: 60px;
			
 
				+			}
			
 
				+			.two {
			
 
				+				text-indent: 40px;
			
 
				+			}
			
 
				+			.three {
			
 
				+				text-indent: 20px;
			
 
				+			}
			
 
				+			h3 {
			
 
				+				/* block / inline-block / none */
			
 
				+				/* display: none; */
			
 
				+				visibility: hidden;
			
 
				+				text-transform: uppercase;
			
 
				+				font: italic bolder 2cm/60px "FatDog";
			
 
				+				/* font-size: 2cm;
			
 
				+				font-family: "FatDog";
			
 
				+				font-stretch: condensed;
			
 
				+				font-style: oblique; */
			
 
				+			}
			
 
				+			.box {
			
 
				+				color: rgb(64, 128, 192);
			
 
				+				height: 220px;
			
 
				+				border: 4px double #00CC33;
			
 
				+				border-left-color: blue;
			
 
				+				border-right-color: red;
			
 
				+				border-radius: 10px 20px 40px 80px;
			
 
				+				width: 50%;
			
 
				+				margin: 50px auto;
			
 
				+				margin-top: 10px;
			
 
				+				text-align: center;
			
 
				+				background-color: #749ABE;
			
 
				+				background-image: url(images/bird.gif);
			
 
				+				/* background-repeat: no-repeat no-repeat;
			
 
				+				background-position: -25px -50px; */
			
 
				+			}
			
 
				+			.box p {
			
 
				+				background-color: white;
			
 
				+				width: 200px;
			
 
				+				height: 40px;
			
 
				+				line-height: 40px;
			
 
				+				margin: 10px auto;
			
 
				+			}
			
 
				+			#photo {
			
 
				+				border: 10px solid gold;
			
 
				+				border-radius: 60px 60px 60px 60px;
			
 
				+				/* border-image: url("images/dots.gif") 10 10 10 10 round; */
			
 
				+			}
			
 
				+			#icon {
			
 
				+				width: 100px;
			
 
				+				height: 100px;
			
 
				+				background: url(images/icons.jpg) no-repeat no-repeat -570px -280px;
			
 
				+				background-color: #00FFFF;
			
 
				+				/* background-image: url(images/icons.jpg);
			
 
				+				background-repeat: no-repeat no-repeat;
			
 
				+				background-position: -570px -280px; */
			
 
				+			}
			
 
				+			#python {
			
 
				+				width: 290px;
			
 
				+				height: 82px;
			
 
				+				background-image: url(images/python-logo.png);
			
 
				+				background-color: #009966;
			
 
				+			}
			
 
				+			/* body {
			
 
				+				background-image: url(images/bird.gif);
			
 
				+			} */
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="python"></div>
			
 
				+		<div id="icon"></div>
			
 
				+		<img id="photo" src="images/tim.png" width="100" height="100">
			
 
				+		<h3>Hello, world!</h3>
			
 
				+		<h1 class="ms">静夜思</h1>
			
 
				+		<hr>
			
 
				+		<div class="box">
			
 
				+			<p class="one">床前明月光</p>
			
 
				+			<p class="two">疑似地上霜</p>
			
 
				+			<p class="three">举头望明月</p>
			
 
				+			<p class="four">低头思故乡</p>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_css_4.html
+++ b/Day21-30/code/new/web1901/example_of_css_4.html
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>CSS - 定位</title>
			
 
				+		<style type="text/css">
			
 
				+			.one {
			
 
				+				background-color: red;
			
 
				+				left: 50px;
			
 
				+				top: 50px;
			
 
				+				z-index: 100;
			
 
				+			}
			
 
				+			.two {
			
 
				+				background-color: green;
			
 
				+				left: 100px;
			
 
				+				top: 100px;
			
 
				+				z-index: 20;
			
 
				+			}
			
 
				+			.three {
			
 
				+				background-color: blue;
			
 
				+				left: 150px;
			
 
				+				top: 150px;
			
 
				+				z-index: 10;
			
 
				+			}
			
 
				+			.one, .two, .three {
			
 
				+				position: absolute;
			
 
				+				width: 200px;
			
 
				+				height: 200px;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="one"></div>
			
 
				+		<div class="two"></div>
			
 
				+		<div class="three"></div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_css_5.html
+++ b/Day21-30/code/new/web1901/example_of_css_5.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>CSS - 动画效果</title>
			
 
				+		<style>
			
 
				+			#one, #two, #three {
			
 
				+				position: fixed;
			
 
				+				width: 200px;
			
 
				+				height: 200px;
			
 
				+				top: 100px;
			
 
				+			}
			
 
				+			#one {
			
 
				+				background-color: purple;
			
 
				+				left: 100px;
			
 
				+				animation: foo 10s;
			
 
				+			}
			
 
				+			#two {
			
 
				+				background-color: gold;
			
 
				+				left: 400px;
			
 
				+				animation: foo 2s infinite;
			
 
				+			}
			
 
				+			#three {
			
 
				+				background-color: darkgreen;
			
 
				+				left: 700px;
			
 
				+				animation: foo 0.5s infinite;
			
 
				+			}
			
 
				+			@keyframes foo {
			
 
				+				from {
			
 
				+					transform: rotate(0deg);
			
 
				+				}
			
 
				+				to {
			
 
				+					transform: rotate(360deg);
			
 
				+				}
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="one"></div>
			
 
				+		<div id="two"></div>
			
 
				+		<div id="three"></div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_form.html
+++ b/Day21-30/code/new/web1901/example_of_form.html
@@ -0,0 +1,106 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>表单的例子 - 注册</title>
			
 
				+		<style>
			
 
				+			/* 属性选择器 */
			
 
				+			/* form input 后代选择器 */
			
 
				+			/* form>input 儿子选择器 */
			
 
				+			form input[type=text], form input[type=password] {
			
 
				+				border: none;
			
 
				+				outline: none;
			
 
				+				border-bottom: 1px dotted darkgray;
			
 
				+			}
			
 
				+			/* form~input 兄弟选择器 */
			
 
				+			/* form+input 相邻兄弟选择器 */
			
 
				+			form~p>input[type=text] {
			
 
				+				outline: none;
			
 
				+				border: 1px solid lightgray;
			
 
				+			}
			
 
				+			form~p>input[type=text]:focus {
			
 
				+				outline: none;
			
 
				+				border: 1px solid #00FFFF;
			
 
				+			}
			
 
				+			.button {
			
 
				+				display: inline-block;
			
 
				+				color: white;
			
 
				+				background-color: red;
			
 
				+				border: none;
			
 
				+				width: 120px;
			
 
				+				height: 40px;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<figure>
			
 
				+			<img src="images/bok-choi.jpg" alt="">
			
 
				+			<figcaption>图1. 这是一个图片</figcaption>
			
 
				+		</figure>
			
 
				+		<form action="" method="post" enctype="multipart/form-data">
			
 
				+			<fieldset>
			
 
				+				<legend>用户基本信息</legend>
			
 
				+				<p>
			
 
				+					用户名:
			
 
				+					<input type="text" name="username" placeholder="用户名由6-20个字符构成" required>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					密码：
			
 
				+					<input type="password" name="password" required>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					确认密码：
			
 
				+					<input type="password" name="repassword" required>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					性别：
			
 
				+					<input type="radio" name="sex" value="1" checked>男
			
 
				+					<input type="radio" name="sex" value="0">女
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					爱好：
			
 
				+					<input type="checkbox" name="fav" value="阅读" checked>阅读
			
 
				+					<input type="checkbox" name="fav" value="旅游">旅游
			
 
				+					<input type="checkbox" name="fav" value="美食" checked>美食
			
 
				+					<input type="checkbox" name="fav" value="运动">运动
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					省份：
			
 
				+					<select name="province">
			
 
				+						<option value="110000">北京</option>
			
 
				+						<option value="120000">天津</option>
			
 
				+						<option value="310000">上海</option>
			
 
				+						<option value="500000">重庆</option>
			
 
				+						<option value="510000" selected>四川省</option>
			
 
				+					</select>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					生日：
			
 
				+					<input type="date" name="birthday">
			
 
				+				</p>
			
 
				+			</fieldset>
			
 
				+			<fieldset id="">
			
 
				+				<legend>用户附加信息</legend>
			
 
				+				<p>
			
 
				+					邮箱：
			
 
				+					<input type="email" name="email" required>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					头像：
			
 
				+					<input type="file" name="photo">
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					自我介绍：
			
 
				+					<textarea cols="30" rows="10" name="intro"></textarea>
			
 
				+				</p>
			
 
				+				<p>
			
 
				+					<input class="button" type="submit" value="确认注册">
			
 
				+					<input class="button" type="reset" value="重新填写">
			
 
				+				</p>
			
 
				+			</fieldset>
			
 
				+		</form>
			
 
				+		<p>
			
 
				+			<input type="text">
			
 
				+		</p>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_iframe.html
+++ b/Day21-30/code/new/web1901/example_of_iframe.html
@@ -0,0 +1,31 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>内部窗口</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<!-- 行级标签（元素） / 块级标签（元素）-->
			
 
				+		<!-- inline element / block element -->
			
 
				+		<!-- 块级：h1-h6 / p / div / ul / ol / dl / table / form / hr -->
			
 
				+		<!-- 行块级（内联块级元素）：可以像块级元素一样指定宽度和高度，但是不会独占整行 -->
			
 
				+		<!-- 行级：a / img / iframe / button / span / input / textarea / select / br -->
			
 
				+		<!-- internal frame（内部窗口）-->
			
 
				+		<img title="商品图片" src="images/a1.jpg" alt="">
			
 
				+		<img src="images/a2.jpg" alt="">
			
 
				+		<iframe src="http://map.baidu.com" width="400" height="400" frameborder="0"></iframe>
			
 
				+		<iframe src="http://www.jd.com" width="400" height="400" frameborder="0"></iframe>
			
 
				+		<p>1</p>
			
 
				+		<p>2</p>
			
 
				+		<p>3</p>
			
 
				+		<div>1</div>
			
 
				+		<div>2</div>
			
 
				+		<div>3</div>
			
 
				+		<span>1</span>
			
 
				+		<span>2</span>
			
 
				+		<span>3</span>
			
 
				+		<button>确定</button>
			
 
				+		<button>取消</button>
			
 
				+		<a href="">百度</a>&nbsp;&nbsp;<a href="">京东</a>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_jquery_1.html
+++ b/Day21-30/code/new/web1901/example_of_jquery_1.html
@@ -0,0 +1,113 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title></title>
			
 
				+		<style>
			
 
				+			#data {
			
 
				+				border-collapse: collapse;
			
 
				+			}
			
 
				+			#data td, #data th {
			
 
				+				width: 120px;
			
 
				+				height: 40px;
			
 
				+				text-align: center;
			
 
				+				border: 1px solid black;
			
 
				+			}
			
 
				+			#buttons {
			
 
				+				margin: 10px 0;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<table id="data">
			
 
				+			<caption>数据统计表</caption>
			
 
				+			<thead>
			
 
				+				<tr>
			
 
				+					<th>姓名</th>
			
 
				+					<th>年龄</th>
			
 
				+					<th>性别</th>
			
 
				+					<th>身高</th>
			
 
				+					<th>体重</th>
			
 
				+				</tr>
			
 
				+			</thead>
			
 
				+			<tbody>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+				<tr>
			
 
				+					<td>Item1</td>
			
 
				+					<td>Item2</td>
			
 
				+					<td>Item3</td>
			
 
				+					<td>Item4</td>
			
 
				+					<td>Item5</td>
			
 
				+				</tr>
			
 
				+			</tbody>
			
 
				+		</table>
			
 
				+		<div id="buttons">
			
 
				+			<button id="pretty">隔行换色</button>
			
 
				+			<button id="clear">清除数据</button>
			
 
				+			<button id="remove">删除一行</button>
			
 
				+			<button id="hide">表格淡出</button>
			
 
				+		</div>
			
 
				+		<!-- 引入jQuery -->
			
 
				+		<script src="js/jquery.min.js"></script>
			
 
				+		<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
			
 
				+		<script>
			
 
				+			// $('选择器') --> jQuery对象 --> 封装了很多的方法
			
 
				+			$('#pretty').on('click', () => {
			
 
				+				$('#data>tbody>tr:odd').css('background-color', 'lightgray')
			
 
				+				$('#data>tbody>tr:even').css('background-color', 'lightgreen')
			
 
				+			})
			
 
				+			$('#clear').on('click', () => {
			
 
				+				$('#data>tbody>tr>td').empty()
			
 
				+			})
			
 
				+			$('#remove').on('click', () => {
			
 
				+				$('#data>tbody>tr:last-child').remove()
			
 
				+			})
			
 
				+			$('#hide').on('click', () => {
			
 
				+				let title = $('#hide').text()
			
 
				+				if (title == '表格淡出') {
			
 
				+					$('#data').fadeOut(1000, () => {
			
 
				+						$('#hide').text('表格淡入')
			
 
				+					})
			
 
				+				} else {
			
 
				+					$('#data').fadeIn(2000, () => {
			
 
				+						$('#hide').text('表格淡出')
			
 
				+					})
			
 
				+				}
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_jquery_2.html
+++ b/Day21-30/code/new/web1901/example_of_jquery_2.html
@@ -0,0 +1,86 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title></title>
			
 
				+		<style>
			
 
				+			* {
			
 
				+				margin: 0;
			
 
				+				padding: 0;
			
 
				+			}
			
 
				+			#fruits {
			
 
				+				width: 120px;
			
 
				+				margin: 20px 20px;
			
 
				+			}
			
 
				+			#fruits>li {
			
 
				+				list-style-type: none;
			
 
				+				height: 40px;
			
 
				+				color: white;
			
 
				+				background-color: #009966;
			
 
				+				line-height: 40px;
			
 
				+				text-align: center;
			
 
				+				margin-top: 2px;
			
 
				+			}
			
 
				+			#fruits>li>a {
			
 
				+				float: right;
			
 
				+				color: white;
			
 
				+				text-decoration: none;
			
 
				+			}
			
 
				+			#fruits~input {
			
 
				+				border: none;
			
 
				+				outline: none;
			
 
				+				text-align: center;
			
 
				+				margin: 20px 15px;
			
 
				+			}
			
 
				+			input[type=text] {
			
 
				+				border-bottom: 1px solid gray !important;
			
 
				+			}
			
 
				+			#ok {
			
 
				+				width: 80px;
			
 
				+				height: 30px;
			
 
				+				background-color: #CC3333;
			
 
				+				color: white;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="container">
			
 
				+			<ul id="fruits">
			
 
				+				<li>苹果<a href="">×</a></li>
			
 
				+				<li>香蕉<a href="">×</a></li>
			
 
				+				<li>火龙果<a href="">×</a></li>
			
 
				+				<li>西瓜<a href="">×</a></li>
			
 
				+			</ul>
			
 
				+			<input type="text" name="fruit">
			
 
				+			<input id="ok" type="button" value="确定">
			
 
				+		</div>
			
 
				+		<script src="js/jquery.min.js"></script>
			
 
				+		<script>
			
 
				+			function removeListItem(evt) {
			
 
				+				evt.preventDefault()
			
 
				+				// $函数的参数是一个原生的JavaScript对象,返回与原生JavaScript对象对应的jQuery对象
			
 
				+				$(evt.target).parent().remove()
			
 
				+			}
			
 
				+			// $函数的四种用法:
			
 
				+			// $函数的参数是一个匿名函数或箭头函数,传入的函数是页面加载完成后要执行的回调函数
			
 
				+			$(() => {
			
 
				+				// $函数的参数是一个样式表选择器字符串,获取页面元素得到一个jQuery对象(伪数组 - 数组中装的是原生JavaScript对象)
			
 
				+				$('#fruits>li>a').on('click', removeListItem)
			
 
				+				
			
 
				+				$('#ok').on('click', (evt) => {
			
 
				+					let input = $('#ok').prev();
			
 
				+					let name = input.val().trim()
			
 
				+					if (name) {
			
 
				+						$('#fruits').append(
			
 
				+							// $函数的参数是一个标签字符串,创建一个新的元素并获得对应的jQuery对象
			
 
				+							$('<li>').text(name).append(
			
 
				+								$('<a href="">').html('&times;').on('click', removeListItem)
			
 
				+							)
			
 
				+						)
			
 
				+					}
			
 
				+					input.val('').get(0).focus()
			
 
				+				})
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_jquery_3.html
+++ b/Day21-30/code/new/web1901/example_of_jquery_3.html
@@ -0,0 +1,41 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>Ajax请求</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<button id="load">加载更多</button>
			
 
				+		<div id="photos"></div>
			
 
				+		<script>
			
 
				+		(() => {
			
 
				+			const photos = document.querySelector('#photos')
			
 
				+			const loadBtn = document.querySelector('#load')
			
 
				+			const url = 'http://api.tianapi.com/meinv/?key=772a81a51ae5c780251b1f98ea431b84&page='
			
 
				+			var page = 0
			
 
				+			loadBtn.addEventListener('click', (evt) => {
			
 
				+				page += 1
			
 
				+				// 创建异步请求对象
			
 
				+				let xhr = new XMLHttpRequest()
			
 
				+				// open方法的第一个参数是请求类型, 第二个参数是请求的URL, 第三个参数必须设置为true(异步请求)
			
 
				+				xhr.open('get', url + page, true)
			
 
				+				// 绑定事件回调函数,在收到服务器返回的数据后要对页面进行局部刷新
			
 
				+				xhr.addEventListener('readystatechange', () => {
			
 
				+					if (xhr.readyState == 4 && xhr.status == 200) {
			
 
				+						// 将返回的JSON字符串解析成JavaScript的对象
			
 
				+						let json = JSON.parse(xhr.responseText)
			
 
				+						json.newslist.forEach((mm) => {
			
 
				+							let img = document.createElement('img')
			
 
				+							img.src = mm.picUrl
			
 
				+							img.width = '300'
			
 
				+							photos.insertBefore(img, photos.firstElementChild)
			
 
				+						})
			
 
				+					}
			
 
				+				})
			
 
				+				// 发送异步请求
			
 
				+				xhr.send()
			
 
				+			})
			
 
				+		})()
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_jquery_4.html
+++ b/Day21-30/code/new/web1901/example_of_jquery_4.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>Ajax请求</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<button id="load">加载更多</button>
			
 
				+		<div id="photos"></div>
			
 
				+		<script src="js/jquery.min.js"></script>
			
 
				+		<script>
			
 
				+		$(() => {
			
 
				+			const url = 'http://api.tianapi.com/meinv/'
			
 
				+			var page = 0
			
 
				+			$('#load').on('click', (evt) => {
			
 
				+				page += 1
			
 
				+				let data = {"key": "772a81a51ae5c780251b1f98ea431b84", "page": page}
			
 
				+				$.ajax({
			
 
				+					"url": url,				// 请求的地址(统一资源定位符)
			
 
				+					"type": "get",			// 请求的方法(get/post/delete/put)
			
 
				+					"data": data,			// 发送给服务器的数据
			
 
				+					"dataType": "json",		// 服务器返回的数据类型
			
 
				+					"headers": {},			// 请求头
			
 
				+					"success": (json) => {	// 请求成功后要执行的回调函数
			
 
				+						json.newslist.forEach((mm) => {
			
 
				+							$('#photos').prepend($('<img width="300">').attr('src', mm.picUrl))
			
 
				+						})
			
 
				+					},
			
 
				+					"error": (error) => {	// 请求失败后要执行的回调函数
			
 
				+					}
			
 
				+				})
			
 
				+				// $对象的getJSON方法可以执行异步请求(get请求)获得服务器返回的JSON格式的数据
			
 
				+				// 第一个参数是请求的URL(统一资源定位符)
			
 
				+				// 第二个参数是要发送给服务器的数据(JSON格式), 如果没有数据发给服务器可以省略不写
			
 
				+				// 第三个参数是请求成功服务器返回数据之后要执行的回调函数, 其参数为服务器返回的内容处理后的JSON对象
			
 
				+// 				$.getJSON(url, data, (json) => {
			
 
				+// 					json.newslist.forEach((mm) => {
			
 
				+// 						$('#photos').prepend($('<img>').attr('src', mm.picUrl).attr('width', '300'))
			
 
				+// 					})
			
 
				+// 				})
			
 
				+			})
			
 
				+		})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_jquery_5.html
+++ b/Day21-30/code/new/web1901/example_of_jquery_5.html
@@ -0,0 +1,89 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>Ajax请求</title>
			
 
				+		<style>
			
 
				+			#emp {
			
 
				+				border-collapse: collapse;
			
 
				+			}
			
 
				+			#emp td, #emp th {
			
 
				+				border-bottom: 1px solid black;
			
 
				+				width: 120px;
			
 
				+				text-align: center;
			
 
				+			}
			
 
				+			#page {
			
 
				+				width: 720px;
			
 
				+				text-align: center;
			
 
				+			}
			
 
				+			#page a {
			
 
				+				text-decoration: none;
			
 
				+				color: darkcyan;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<table id="emp">
			
 
				+			<thead>
			
 
				+				<tr>
			
 
				+					<th>编号</th>
			
 
				+					<th>姓名</th>
			
 
				+					<th>职位</th>
			
 
				+					<th>工资</th>
			
 
				+					<th>补贴</th>
			
 
				+					<th>所在部门</th>
			
 
				+				</tr>
			
 
				+			</thead>
			
 
				+			<tbody>
			
 
				+			</tbody>
			
 
				+		</table>
			
 
				+		<div id="page">
			
 
				+			<a id="prev" href="">上一页</a>&nbsp;&nbsp;
			
 
				+			<a id="next" href="">下一页</a>
			
 
				+		</div>
			
 
				+		<script src="js/jquery.min.js"></script>
			
 
				+		<script>
			
 
				+		$(() => {
			
 
				+			function getEmpData(url) {
			
 
				+				$.ajax({
			
 
				+					url: url,
			
 
				+					type: 'get',
			
 
				+					data: {},
			
 
				+					dataType: 'json',
			
 
				+					headers: {
			
 
				+						"token": "35ad60445cea11e99e1000163e02b646"
			
 
				+					},
			
 
				+					success: (json) => {
			
 
				+						$('#emp>tbody').empty()
			
 
				+						json.results.forEach((emp) => {
			
 
				+							let tr = $('<tr>')
			
 
				+								.append($('<td>').text(emp.no))
			
 
				+								.append($('<td>').text(emp.name))
			
 
				+								.append($('<td>').text(emp.job))
			
 
				+								.append($('<td>').text(emp.sal))
			
 
				+								.append($('<td>').text(emp.comm))
			
 
				+								.append($('<td>').text(emp.dept.name))
			
 
				+							$('#emp>tbody').append(tr)
			
 
				+						})
			
 
				+						$('#prev').attr('href', json.previous? json.previous : '')
			
 
				+						$('#next').attr('href', json.next? json.next : '')
			
 
				+					}
			
 
				+				})
			
 
				+			}
			
 
				+			
			
 
				+			function changePage(evt) {
			
 
				+				evt.preventDefault()
			
 
				+				let href = $(evt.target).attr('href')
			
 
				+				if (href) {
			
 
				+					getEmpData(href)
			
 
				+				}
			
 
				+			}
			
 
				+			
			
 
				+			getEmpData('http://120.77.222.217/api/emps/')
			
 
				+			
			
 
				+			$('#prev').on('click', changePage)
			
 
				+			$('#next').on('click', changePage)
			
 
				+		})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_1.html
+++ b/Day21-30/code/new/web1901/example_of_js_1.html
@@ -0,0 +1,28 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>猜数字</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<script>
			
 
				+			var answer = parseInt(Math.random() * 100 + 1)
			
 
				+			var counter = 0
			
 
				+			var yourInput
			
 
				+			do {
			
 
				+				counter += 1
			
 
				+				yourInput = prompt('请输入你猜的数字: ')
			
 
				+				if (yourInput > answer) {
			
 
				+					alert('小一点')
			
 
				+				} else if (yourInput < answer) {
			
 
				+					alert('大一点')
			
 
				+				} else {
			
 
				+					alert('恭喜你猜对了')
			
 
				+				}
			
 
				+			} while (answer != yourInput)
			
 
				+			if (counter > 7) {
			
 
				+				alert('智商余额不足')
			
 
				+			}
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_2.html
+++ b/Day21-30/code/new/web1901/example_of_js_2.html
@@ -0,0 +1,34 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>判断闰年</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<script>
			
 
				+			// var / let / const
			
 
				+			// JavaScript中的比较运算符带有隐式的类型转换
			
 
				+			// === / !== / && / || / !
			
 
				+			// 分支结构 - if...else... / switch...case...default...
			
 
				+			// 循环结构 - while / for / do...while
			
 
				+			// JavaScript中的数据类型:
			
 
				+			// - 简单数据类型: string / number / boolean / undefined / symbol / null
			
 
				+			// - 复杂数据类型: object
			
 
				+			// 检查变量或常量的数据类型可以使用typeof关键字
			
 
				+			var yearStr = prompt('请输入年份: ')
			
 
				+			var year = parseInt(yearStr)
			
 
				+			// && - and - 短路与运算
			
 
				+			// 一对花括号可以构成一个块级作用域 - let定义的变量就是块级作用域变量
			
 
				+			if (year == yearStr && year > 0) {
			
 
				+				// || - or - 短路或运算
			
 
				+				// 逻辑运算(短路运算)会产生一个布尔值要么是true要么是false
			
 
				+				let isLeap = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0
			
 
				+				let yesOrNo = isLeap? '是' : '不是'
			
 
				+				// ES6语法中的带占位符的字符串
			
 
				+				alert(`${year}年${yesOrNo}闰年`)
			
 
				+			} else {
			
 
				+				alert('请输入有效的年份')
			
 
				+			}
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_3.html
+++ b/Day21-30/code/new/web1901/example_of_js_3.html
@@ -0,0 +1,56 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>双色球随机选号</title>
			
 
				+		<style>
			
 
				+			p {
			
 
				+				width: 100px;
			
 
				+				height: 100px;
			
 
				+				color: white;
			
 
				+				font: 60px/100px Arial;
			
 
				+				border-radius: 50px;
			
 
				+				text-align: center;
			
 
				+				float: left;
			
 
				+				margin-left: 10px;
			
 
				+			}
			
 
				+			.red {
			
 
				+				background-color: red;
			
 
				+			}
			
 
				+			.blue {
			
 
				+				background-color: blue;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<!-- 浏览器中的JavaScript包含以下三样内容 -->
			
 
				+		<!-- ECMAScript - ES6 - 核心语法 -->
			
 
				+		<!-- BOM - 浏览器对象模型 - window -->
			
 
				+		<!-- DOM - 文档对象模型 - document -->
			
 
				+		<script>
			
 
				+			function outputBall(num, color='red') {
			
 
				+				document.write(`<p class="${color}">`)
			
 
				+				if (num < 10) {
			
 
				+					document.write('0')
			
 
				+				}
			
 
				+				document.write(num)
			
 
				+				document.write('</p>')
			
 
				+			}
			
 
				+			
			
 
				+			var selectedBalls = []
			
 
				+			while (selectedBalls.length < 6) {
			
 
				+				let num = parseInt(Math.random() * 33 + 1)
			
 
				+				if (selectedBalls.indexOf(num) == -1) {
			
 
				+					selectedBalls.push(num)
			
 
				+				}
			
 
				+			}
			
 
				+			// 给红色球排序 - 需要传入一个匿名函数给出比较元素的规则
			
 
				+			// ES6开始支持使用箭头函数(Lambda函数 - 匿名函数)
			
 
				+			selectedBalls.sort((x, y) => x - y)
			
 
				+			// 代码有很多种坏味道 重复是最坏的一种 - Martin Fowler
			
 
				+			selectedBalls.forEach(item => outputBall(item))
			
 
				+			let num = parseInt(Math.random() * 16 + 1)
			
 
				+			outputBall(num, 'blue')
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_4.html
+++ b/Day21-30/code/new/web1901/example_of_js_4.html
@@ -0,0 +1,53 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>显示时间日期</title>
			
 
				+		<style>
			
 
				+			#clock {
			
 
				+				color: white;
			
 
				+				text-align: center;
			
 
				+				position: absolute;
			
 
				+				right: 10px;
			
 
				+				top: 10px;
			
 
				+				width: 280px;
			
 
				+				height: 40px;
			
 
				+				background-color: blue;
			
 
				+				font: 16px/40px "pt mono";
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="clock"></div>
			
 
				+		<script>
			
 
				+			// JavaScript - 面向对象编程
			
 
				+			// 定义类创建对象
			
 
				+			const clockDiv = document.getElementById('clock')
			
 
				+			const weekdays = ['日', '一', '二', '三', '四', '五', '六']
			
 
				+			
			
 
				+			function showClock() {
			
 
				+				let now = new Date()
			
 
				+				let year = now.getFullYear()
			
 
				+				let mon = now.getMonth() + 1
			
 
				+				mon = mon < 10 ? '0' + mon : '' + mon
			
 
				+				let date = now.getDate()
			
 
				+				date = date < 10 ? '0' + date : '' + date
			
 
				+				let hour = now.getHours()
			
 
				+				hour = hour < 10 ? '0' + hour : '' + hour
			
 
				+				let min = now.getMinutes()
			
 
				+				min = min < 10 ? '0' + min : '' + min
			
 
				+				let sec = now.getSeconds()
			
 
				+				sec = sec < 10 ? '0' + sec : '' + sec
			
 
				+				let day = now.getDay()
			
 
				+				let fullStr = `${year}年${mon}月${date}日 
			
 
				+					${hour}:${min}:${sec} 星期${weekdays[day]}`
			
 
				+				clockDiv.textContent = fullStr
			
 
				+			}
			
 
				+			
			
 
				+			showClock()
			
 
				+			setInterval(showClock, 1000)
			
 
				+			// var timerId = setInterval(showClock, 1000)
			
 
				+			// clearInterval(timerId)
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_5.html
+++ b/Day21-30/code/new/web1901/example_of_js_5.html
@@ -0,0 +1,76 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>类和对象</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<script>
			
 
				+			class Person {
			
 
				+				constructor(name, age) {
			
 
				+					this.name = name
			
 
				+					this.age = age
			
 
				+				}
			
 
				+				eat(food) {
			
 
				+					alert(`${this.name}正在吃${food}`)
			
 
				+				}
			
 
				+				watchAv() {
			
 
				+					if (this.age < 18) {
			
 
				+						alert(`${this.name}只能看《熊出没》`)
			
 
				+					} else {
			
 
				+						alert(`${this.name}正在观看岛国爱情动作片`)
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+			
			
 
				+			let person = new Person('骆昊', 39)
			
 
				+			person.eat('蛋炒饭')
			
 
				+			let person2 = new Person('王大锤', 15)
			
 
				+			person2.watchAv()
			
 
				+			
			
 
				+			// 构造器函数
			
 
				+			/*
			
 
				+			function Person(name, age) {
			
 
				+				this.name = name
			
 
				+				this.age = age
			
 
				+			}
			
 
				+			Person.prototype.eat = function(food) {
			
 
				+				alert(this.name + '正在吃' + food)
			
 
				+			}
			
 
				+			Person.prototype.watchAv = function() {
			
 
				+				if (this.age < 18) {
			
 
				+					alert(this.name + '只能看《熊出没》')
			
 
				+				} else {
			
 
				+					alert(this.name + '正在观看岛国爱情动作片')
			
 
				+				}
			
 
				+			}
			
 
				+			let person = new Person('骆昊', 39)
			
 
				+			person.eat('蛋炒饭')
			
 
				+			let person2 = new Person('王大锤', 15)
			
 
				+			person2.watchAv()
			
 
				+			*/
			
 
				+			
			
 
				+			// JSON - JavaScript Object Notation
			
 
				+			// JavaScript对象表达式 - 创建对象的字面量语法
			
 
				+			/*
			
 
				+			const person = {
			
 
				+				name: '骆昊',
			
 
				+				age: 39,
			
 
				+				eat: function(food) {
			
 
				+					alert(this.name + '正在吃' + food)
			
 
				+				},
			
 
				+				watchAv: function() {
			
 
				+					if (this.age < 18) {
			
 
				+						alert(this.name + '只能看《熊出没》')
			
 
				+					} else {
			
 
				+						alert(this.name + '正在观看岛国爱情动作片')
			
 
				+					}
			
 
				+				}
			
 
				+			}
			
 
				+			// person.age = 15
			
 
				+			person.eat('蛋炒饭')
			
 
				+			person.watchAv()
			
 
				+			*/
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_6.html
+++ b/Day21-30/code/new/web1901/example_of_js_6.html
@@ -0,0 +1,115 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title></title>
			
 
				+		<style>
			
 
				+			* {
			
 
				+				margin: 0;
			
 
				+				padding: 0;
			
 
				+			}
			
 
				+			#fruits {
			
 
				+				width: 120px;
			
 
				+				margin: 20px 20px;
			
 
				+			}
			
 
				+			#fruits>li {
			
 
				+				list-style-type: none;
			
 
				+				height: 40px;
			
 
				+				color: white;
			
 
				+				background-color: #009966;
			
 
				+				line-height: 40px;
			
 
				+				text-align: center;
			
 
				+				margin-top: 2px;
			
 
				+			}
			
 
				+			#fruits>li>a {
			
 
				+				float: right;
			
 
				+				color: white;
			
 
				+				text-decoration: none;
			
 
				+			}
			
 
				+			#fruits~input {
			
 
				+				border: none;
			
 
				+				outline: none;
			
 
				+				text-align: center;
			
 
				+				margin: 20px 15px;
			
 
				+			}
			
 
				+			input[type=text] {
			
 
				+				border-bottom: 1px solid gray !important;
			
 
				+			}
			
 
				+			#ok {
			
 
				+				width: 80px;
			
 
				+				height: 30px;
			
 
				+				background-color: #CC3333;
			
 
				+				color: white;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="container">
			
 
				+			<ul id="fruits">
			
 
				+				<li>苹果<a href="">×</a></li>
			
 
				+				<li>香蕉<a href="">×</a></li>
			
 
				+				<li>火龙果<a href="">×</a></li>
			
 
				+				<li>西瓜<a href="">×</a></li>
			
 
				+			</ul>
			
 
				+			<input type="text" name="fruit">
			
 
				+			<input id="ok" type="button" value="确定">
			
 
				+		</div>
			
 
				+		<script>
			
 
				+			function addListItem() {
			
 
				+				let name = input.value.trim()
			
 
				+				if (name) {
			
 
				+					// 通过document对象的createElement方法创建新元素
			
 
				+					let li = document.createElement('li')
			
 
				+					// 可以用textContent或innerHTML属性来修改标签的内容
			
 
				+					li.innerHTML = name
			
 
				+					let a = document.createElement('a')
			
 
				+					a.innerHTML = '&times;'
			
 
				+					a.href = ''
			
 
				+					a.addEventListener('click', removeListItem)
			
 
				+					li.appendChild(a)
			
 
				+					// 通过父元素的appendChild或insertBefore可以添加子元素
			
 
				+					ul.appendChild(li)
			
 
				+					input.value = ''
			
 
				+					// 元素的focus和blur方法可以让元素获得或失去焦点
			
 
				+					input.focus()
			
 
				+				}
			
 
				+			}
			
 
				+			
			
 
				+			function removeListItem(evt) {
			
 
				+				// evt.stopPropagation()
			
 
				+				// 通过事件对象的preventDefault方法阻止事件的默认行为
			
 
				+				evt.preventDefault()
			
 
				+				// 通过元素获取父元素 - parentNode
			
 
				+				// 通过元素获取子元素 - children / firstElementChild / lastElementChild
			
 
				+				// 通过元素获取兄弟元素 - previousElementSibling / nextElementSibling
			
 
				+				let li = evt.target.parentNode
			
 
				+				// 通过父元素的removeChild方法可以删除指定的子元素
			
 
				+				ul.removeChild(li)
			
 
				+			}
			
 
				+			
			
 
				+			const ul = document.querySelector('#fruits')
			
 
				+			const input = ul.nextElementSibling
			
 
				+			input.addEventListener('keypress', (evt) => {
			
 
				+				let code = evt.keyCode || evt.which
			
 
				+				if (code == 13) {
			
 
				+					addListItem()
			
 
				+				}
			
 
				+			})
			
 
				+			const ok = input.nextElementSibling
			
 
				+			ok.addEventListener('click', addListItem)
			
 
				+			let anchors = document.querySelectorAll('#fruits>li>a')
			
 
				+			for (let i = 0; i < anchors.length; i += 1) {
			
 
				+				// addEventListener方法有三个参数
			
 
				+				// 第一个参数是事件的名称，例如: click / dbclick / mouseover / mouseout 
			
 
				+				// 第二个参数是事件发生时要执行的回调函数，函数的参数是事件对象:
			
 
				+				// 	~ 传入一个已有函数的名字
			
 
				+				// 	~ 写一个匿名函数 function(evt) {}
			
 
				+				// 	~ 写一个箭头函数 (evt) => {}
			
 
				+				// 第三个参数表示使用事件捕获还是事件冒泡,如果不写表示事件冒泡(从里向外传播事件)
			
 
				+				//  ~ 如果设置为true表示事件捕获(从外向里传播事件)
			
 
				+				// 	~ 如果希望阻止事件的传播行为可以调用事件对象的stopPropagation方法
			
 
				+				anchors[i].addEventListener('click', removeListItem)
			
 
				+			}
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_js_7.html
+++ b/Day21-30/code/new/web1901/example_of_js_7.html
@@ -0,0 +1,18 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title></title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<script>
			
 
				+			function add() {
			
 
				+				alert(arguments.callee)
			
 
				+				alert(arguments.callee.caller)
			
 
				+				return arguments[0] + arguments[1]
			
 
				+			}
			
 
				+			
			
 
				+			alert(add(1, 2))
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_layout.html
+++ b/Day21-30/code/new/web1901/example_of_layout.html
@@ -0,0 +1,72 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>经典布局</title>
			
 
				+		<style>
			
 
				+			#page {
			
 
				+				width: 960px;
			
 
				+				margin: 0 auto;
			
 
				+			}
			
 
				+			header, footer, #main {
			
 
				+				margin: 10px 0;
			
 
				+			}
			
 
				+			header {
			
 
				+				height: 150px;
			
 
				+				background-color: lightgoldenrodyellow;
			
 
				+			}
			
 
				+			#main {
			
 
				+				height: 600px;
			
 
				+				background-color: lightpink;
			
 
				+			}
			
 
				+			footer {
			
 
				+				height: 150px;
			
 
				+				background-color: lightsalmon;
			
 
				+			}
			
 
				+			#logo {
			
 
				+				height: 70%;
			
 
				+			}
			
 
				+			nav {
			
 
				+				height: 30%;
			
 
				+				background-color: lightgray;
			
 
				+			}
			
 
				+			#content {
			
 
				+				float: left;
			
 
				+				width: 74%;
			
 
				+				height: 100%;
			
 
				+				margin-right: 1%;
			
 
				+				background-color: lightgreen;
			
 
				+			}
			
 
				+			article {
			
 
				+				height: 33%;
			
 
				+				border: 1px dashed black;
			
 
				+			}
			
 
				+			aside {
			
 
				+				float: left;
			
 
				+				width: 25%;
			
 
				+				height: 100%;
			
 
				+				background-color: lightcyan;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="page">
			
 
				+			<!-- 页眉（logo+导航） -->
			
 
				+			<header>
			
 
				+				<div id="logo">页眉</div>
			
 
				+				<nav>导航菜单</nav>
			
 
				+			</header>
			
 
				+			<!-- 主体（可以分为多栏）-->
			
 
				+			<div id="main">
			
 
				+				<div id="content">
			
 
				+					<article>文章1</article>
			
 
				+					<article>文章2</article>
			
 
				+					<article>文章3</article>
			
 
				+				</div>
			
 
				+				<aside>侧边栏</aside>
			
 
				+			</div>
			
 
				+			<!-- 页脚（友情链接+版权信息+ICP备案信息） -->
			
 
				+			<footer>页脚</footer>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_table.html
+++ b/Day21-30/code/new/web1901/example_of_table.html
@@ -0,0 +1,110 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="utf-8">
			
 
				+		<title>表格</title>
			
 
				+		<style>
			
 
				+			table {
			
 
				+				border-spacing: 0;
			
 
				+			}
			
 
				+			td, th {
			
 
				+				width: 150px;
			
 
				+				height: 30px;
			
 
				+				border-bottom: 1px solid black;
			
 
				+				border-right: 1px solid black;
			
 
				+				text-align: center;
			
 
				+				empty-cells: hide;
			
 
				+			}
			
 
				+			.bottom>td {
			
 
				+				border-bottom: none;
			
 
				+			}
			
 
				+			.right {
			
 
				+				border-right: none;
			
 
				+			}
			
 
				+			thead>tr {
			
 
				+				background-color: lightgoldenrodyellow;
			
 
				+			}
			
 
				+			.even {
			
 
				+				background-color: lightgrey;
			
 
				+			}
			
 
				+			.odd {
			
 
				+				background-color: lightblue;
			
 
				+			}
			
 
				+			th:first-child {
			
 
				+				border-top-left-radius: 10px;
			
 
				+			}
			
 
				+			th:last-child {
			
 
				+				border-top-right-radius: 10px;
			
 
				+			}
			
 
				+			tr:last-child>td:first-child {
			
 
				+				border-bottom-left-radius: 10px;
			
 
				+			}
			
 
				+			tr:last-child>td:last-child {
			
 
				+				border-bottom-right-radius: 10px;
			
 
				+			}
			
 
				+			.number li {
			
 
				+				/* list-style-type: none; */
			
 
				+				list-style-position: inside;
			
 
				+				list-style-image: url(images/add.gif);
			
 
				+				width: 120px;
			
 
				+				height: 30px;
			
 
				+				background-color: #006633;
			
 
				+				color: white;
			
 
				+				text-align: center;
			
 
				+				margin: 5px 5px;
			
 
				+				float: left;
			
 
				+			}
			
 
				+			.number li:hover {
			
 
				+				color: orange;
			
 
				+				cursor: pointer;
			
 
				+			}
			
 
				+		</style>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<!-- table>tr*4>td*5 -->
			
 
				+		<table>
			
 
				+			<caption>学生考试成绩表</caption>
			
 
				+			<thead>
			
 
				+				<tr>
			
 
				+					<th class="lt" width="120">姓名</th>
			
 
				+					<th width="100">语文</th>
			
 
				+					<th width="100">数学</th>
			
 
				+					<th width="100">英语</th>
			
 
				+					<th width="100" class="right">体育</th>
			
 
				+				</tr>
			
 
				+			</thead>
			
 
				+			<tbody>
			
 
				+				<tr class="odd">
			
 
				+					<td>王大锤</td>
			
 
				+					<td>90</td>
			
 
				+					<td>80</td>
			
 
				+					<td></td>
			
 
				+					<td class="right">60</td>
			
 
				+				</tr>
			
 
				+				<tr class="even">
			
 
				+					<td>王大锤</td>
			
 
				+					<td>90</td>
			
 
				+					<td></td>
			
 
				+					<td>70</td>
			
 
				+					<td class="right">60</td>
			
 
				+				</tr>
			
 
				+				<tr class="bottom odd">
			
 
				+					<td>王大锤</td>
			
 
				+					<td>90</td>
			
 
				+					<td>80</td>
			
 
				+					<td>70</td>
			
 
				+					<td class="right">60</td>
			
 
				+				</tr>
			
 
				+			</tbody>
			
 
				+			<tfoot>
			
 
				+			</tfoot>
			
 
				+		</table>
			
 
				+		<ul class="number">
			
 
				+			<li>One</li>
			
 
				+			<li>Two</li>
			
 
				+			<li>Three</li>
			
 
				+			<li>Four</li>
			
 
				+			<li>Five</li>
			
 
				+		</ul>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/example_of_vue_element.html
+++ b/Day21-30/code/new/web1901/example_of_vue_element.html
@@ -0,0 +1,127 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<title>Vue入门</title>
			
 
				+		<style>
			
 
				+			/*
			
 
				+			#emp {
			
 
				+				border-collapse: collapse;
			
 
				+			}
			
 
				+			#emp td, #emp th {
			
 
				+				border-bottom: 1px solid black;
			
 
				+				width: 120px;
			
 
				+				text-align: center;
			
 
				+			}
			
 
				+			*/
			
 
				+			#page {
			
 
				+				width: 100%;
			
 
				+				text-align: center;
			
 
				+				margin-top: 20px;
			
 
				+			}
			
 
				+			/*
			
 
				+			#page a {
			
 
				+				text-decoration: none;
			
 
				+				color: #67C23A;
			
 
				+				cursor: pointer;
			
 
				+				margin: 20px 20px;
			
 
				+			}
			
 
				+			*/
			
 
				+			h1 {
			
 
				+				color:#909399;
			
 
				+			}
			
 
				+		</style>
			
 
				+		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div id="app">
			
 
				+			<h1>员工信息表</h1>
			
 
				+			<hr>
			
 
				+			<el-table v-loading="loading" :data="emps" stripe style="width: 100%">
			
 
				+				<el-table-column prop="no" label="编号" width="180"></el-table-column>
			
 
				+				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			
 
				+				<el-table-column prop="job" label="职位"></el-table-column>
			
 
				+				<el-table-column prop="sal" label="工资"></el-table-column>
			
 
				+				<el-table-column prop="comm" label="补贴"></el-table-column>
			
 
				+				<el-table-column prop="dept.name" label="所在部门"></el-table-column>
			
 
				+			</el-table>
			
 
				+			<!--
			
 
				+			<table id="emp">
			
 
				+				<thead>
			
 
				+					<tr>
			
 
				+						<th>编号</th>
			
 
				+						<th>姓名</th>
			
 
				+						<th>职位</th>
			
 
				+						<th>工资</th>
			
 
				+						<th>补贴</th>
			
 
				+						<th>所在部门</th>
			
 
				+					</tr>
			
 
				+				</thead>
			
 
				+				<tbody>
			
 
				+					<tr v-for="emp in emps">
			
 
				+						<td>{{ emp.no }}</td>
			
 
				+						<td>{{ emp.name }}</td>
			
 
				+						<td>{{ emp.job }}</td>
			
 
				+						<td>{{ emp.sal }}</td>
			
 
				+						<td>{{ emp.comm }}</td>
			
 
				+						<td>{{ emp.dept.name }}</td>
			
 
				+					</tr>
			
 
				+				</tbody>
			
 
				+			</table>
			
 
				+			-->
			
 
				+			<div id="page">
			
 
				+				<el-button type="primary" round @click="prevPage()">上一页</el-button>
			
 
				+				<el-button type="primary" round @click="nextPage()">下一页</el-button>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
			
 
				+		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
			
 
				+		<script>
			
 
				+			let pageSize = 5
			
 
				+			const app = new Vue({
			
 
				+				el: '#app',
			
 
				+				data: {
			
 
				+					emps: [],
			
 
				+					currentPage: 1,
			
 
				+					totalPage: 0,
			
 
				+					loading: true
			
 
				+				},
			
 
				+				created() {
			
 
				+					this.getEmpData()
			
 
				+				},
			
 
				+				methods: {
			
 
				+					getEmpData() {
			
 
				+						this.loading = true
			
 
				+						
			
 
				+						const url = `http://120.77.222.217/api/emps/?page=${this.currentPage}`
			
 
				+						fetch(url, {
			
 
				+							headers: {
			
 
				+								"token": "35ad60445cea11e99e1000163e02b646",
			
 
				+							}
			
 
				+						})
			
 
				+							.then(resp => resp.json())
			
 
				+							.then(json => {
			
 
				+								setTimeout(() => {
			
 
				+									this.emps = json.results
			
 
				+									this.totalPage = parseInt((json.count - 1) / pageSize) + 1
			
 
				+									this.loading = false
			
 
				+								}, 1000)
			
 
				+							})
			
 
				+					},
			
 
				+					prevPage() {
			
 
				+						if (this.currentPage > 1) {
			
 
				+							this.currentPage -= 1
			
 
				+							this.getEmpData()
			
 
				+						}
			
 
				+					},
			
 
				+					nextPage() {
			
 
				+						if (this.currentPage < this.totalPage) {
			
 
				+							this.currentPage += 1
			
 
				+							this.getEmpData()
			
 
				+						}
			
 
				+					}
			
 
				+				}
			
 
				+			})
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/Day21-30/code/new/web1901/fonts/chunkfive.ttf
+++ b/Day21-30/code/new/web1901/fonts/chunkfive.ttf
--- a/Day21-30/code/new/web1901/fonts/quicksand.ttf
+++ b/Day21-30/code/new/web1901/fonts/quicksand.ttf
--- a/Day21-30/code/new/web1901/images/a1.jpg
+++ b/Day21-30/code/new/web1901/images/a1.jpg
--- a/Day21-30/code/new/web1901/images/a2.jpg
+++ b/Day21-30/code/new/web1901/images/a2.jpg
--- a/Day21-30/code/new/web1901/images/a3.jpg
+++ b/Day21-30/code/new/web1901/images/a3.jpg
--- a/Day21-30/code/new/web1901/images/add.gif
+++ b/Day21-30/code/new/web1901/images/add.gif
--- a/Day21-30/code/new/web1901/images/backdrop.gif
+++ b/Day21-30/code/new/web1901/images/backdrop.gif
--- a/Day21-30/code/new/web1901/images/bird.gif
+++ b/Day21-30/code/new/web1901/images/bird.gif
--- a/Day21-30/code/new/web1901/images/bok-choi.jpg
+++ b/Day21-30/code/new/web1901/images/bok-choi.jpg
--- a/Day21-30/code/new/web1901/images/button-sprite.jpg
+++ b/Day21-30/code/new/web1901/images/button-sprite.jpg
--- a/Day21-30/code/new/web1901/images/buttons.jpg
+++ b/Day21-30/code/new/web1901/images/buttons.jpg
--- a/Day21-30/code/new/web1901/images/chocolate-islands.jpg
+++ b/Day21-30/code/new/web1901/images/chocolate-islands.jpg
--- a/Day21-30/code/new/web1901/images/clavinet.jpg
+++ b/Day21-30/code/new/web1901/images/clavinet.jpg
--- a/Day21-30/code/new/web1901/images/dark-wood.jpg
+++ b/Day21-30/code/new/web1901/images/dark-wood.jpg
--- a/Day21-30/code/new/web1901/images/dots.gif
+++ b/Day21-30/code/new/web1901/images/dots.gif
--- a/Day21-30/code/new/web1901/images/email.png
+++ b/Day21-30/code/new/web1901/images/email.png
--- a/Day21-30/code/new/web1901/images/header.gif
+++ b/Day21-30/code/new/web1901/images/header.gif
--- a/Day21-30/code/new/web1901/images/header.jpg
+++ b/Day21-30/code/new/web1901/images/header.jpg
--- a/Day21-30/code/new/web1901/images/icon-plus.png
+++ b/Day21-30/code/new/web1901/images/icon-plus.png
--- a/Day21-30/code/new/web1901/images/icon.png
+++ b/Day21-30/code/new/web1901/images/icon.png
--- a/Day21-30/code/new/web1901/images/icons.jpg
+++ b/Day21-30/code/new/web1901/images/icons.jpg
--- a/Day21-30/code/new/web1901/images/keys.jpg
+++ b/Day21-30/code/new/web1901/images/keys.jpg
--- a/Day21-30/code/new/web1901/images/lemon-posset.jpg
+++ b/Day21-30/code/new/web1901/images/lemon-posset.jpg
--- a/Day21-30/code/new/web1901/images/logo-1.gif
+++ b/Day21-30/code/new/web1901/images/logo-1.gif
--- a/Day21-30/code/new/web1901/images/logo-2.gif
+++ b/Day21-30/code/new/web1901/images/logo-2.gif
--- a/Day21-30/code/new/web1901/images/logo-3.gif
+++ b/Day21-30/code/new/web1901/images/logo-3.gif
--- a/Day21-30/code/new/web1901/images/logo.gif
+++ b/Day21-30/code/new/web1901/images/logo.gif
--- a/Day21-30/code/new/web1901/images/magnolia-large.jpg
+++ b/Day21-30/code/new/web1901/images/magnolia-large.jpg
--- a/Day21-30/code/new/web1901/images/magnolia-medium.jpg
+++ b/Day21-30/code/new/web1901/images/magnolia-medium.jpg
--- a/Day21-30/code/new/web1901/images/magnolia-small.jpg
+++ b/Day21-30/code/new/web1901/images/magnolia-small.jpg
--- a/Day21-30/code/new/web1901/images/otters.jpg
+++ b/Day21-30/code/new/web1901/images/otters.jpg
--- a/Day21-30/code/new/web1901/images/pattern.gif
+++ b/Day21-30/code/new/web1901/images/pattern.gif
--- a/Day21-30/code/new/web1901/images/picture-1.jpg
+++ b/Day21-30/code/new/web1901/images/picture-1.jpg
--- a/Day21-30/code/new/web1901/images/picture-2.jpg
+++ b/Day21-30/code/new/web1901/images/picture-2.jpg
--- a/Day21-30/code/new/web1901/images/picture-3.jpg
+++ b/Day21-30/code/new/web1901/images/picture-3.jpg
--- a/Day21-30/code/new/web1901/images/print-01.jpg
+++ b/Day21-30/code/new/web1901/images/print-01.jpg
--- a/Day21-30/code/new/web1901/images/print-02.jpg
+++ b/Day21-30/code/new/web1901/images/print-02.jpg
--- a/Day21-30/code/new/web1901/images/print-03.jpg
+++ b/Day21-30/code/new/web1901/images/print-03.jpg
--- a/Day21-30/code/new/web1901/images/print-04.jpg
+++ b/Day21-30/code/new/web1901/images/print-04.jpg
--- a/Day21-30/code/new/web1901/images/print-05.jpg
+++ b/Day21-30/code/new/web1901/images/print-05.jpg
--- a/Day21-30/code/new/web1901/images/print-06.jpg
+++ b/Day21-30/code/new/web1901/images/print-06.jpg
--- a/Day21-30/code/new/web1901/images/puppy.jpg
+++ b/Day21-30/code/new/web1901/images/puppy.jpg
--- a/Day21-30/code/new/web1901/images/python-logo.png
+++ b/Day21-30/code/new/web1901/images/python-logo.png
--- a/Day21-30/code/new/web1901/images/quokka.jpg
+++ b/Day21-30/code/new/web1901/images/quokka.jpg
--- a/Day21-30/code/new/web1901/images/rhodes.jpg
+++ b/Day21-30/code/new/web1901/images/rhodes.jpg
--- a/Day21-30/code/new/web1901/images/roasted-brussel-sprouts.jpg
+++ b/Day21-30/code/new/web1901/images/roasted-brussel-sprouts.jpg
--- a/Day21-30/code/new/web1901/images/shadow.png
+++ b/Day21-30/code/new/web1901/images/shadow.png
--- a/Day21-30/code/new/web1901/images/slide-1.jpg
+++ b/Day21-30/code/new/web1901/images/slide-1.jpg
--- a/Day21-30/code/new/web1901/images/slide-2.jpg
+++ b/Day21-30/code/new/web1901/images/slide-2.jpg
--- a/Day21-30/code/new/web1901/images/slide-3.jpg
+++ b/Day21-30/code/new/web1901/images/slide-3.jpg
--- a/Day21-30/code/new/web1901/images/slide-4.jpg
+++ b/Day21-30/code/new/web1901/images/slide-4.jpg
--- a/Day21-30/code/new/web1901/images/star.png
+++ b/Day21-30/code/new/web1901/images/star.png
--- a/Day21-30/code/new/web1901/images/subscribe.jpg
+++ b/Day21-30/code/new/web1901/images/subscribe.jpg
--- a/Day21-30/code/new/web1901/images/teriyaki.jpg
+++ b/Day21-30/code/new/web1901/images/teriyaki.jpg
--- a/Day21-30/code/new/web1901/images/thumb-1.jpg
+++ b/Day21-30/code/new/web1901/images/thumb-1.jpg
--- a/Day21-30/code/new/web1901/images/thumb-2.jpg
+++ b/Day21-30/code/new/web1901/images/thumb-2.jpg
--- a/Day21-30/code/new/web1901/images/thumb-3.jpg
+++ b/Day21-30/code/new/web1901/images/thumb-3.jpg
--- a/Day21-30/code/new/web1901/images/tim.png
+++ b/Day21-30/code/new/web1901/images/tim.png
--- a/Day21-30/code/new/web1901/images/title.gif
+++ b/Day21-30/code/new/web1901/images/title.gif
--- a/Day21-30/code/new/web1901/images/tulip.gif
+++ b/Day21-30/code/new/web1901/images/tulip.gif
--- a/Day21-30/code/new/web1901/images/twitter.png
+++ b/Day21-30/code/new/web1901/images/twitter.png
--- a/Day21-30/code/new/web1901/images/web.png
+++ b/Day21-30/code/new/web1901/images/web.png
--- a/Day21-30/code/new/web1901/images/wurlitzer.jpg
+++ b/Day21-30/code/new/web1901/images/wurlitzer.jpg
--- a/Day21-30/code/new/web1901/images/zucchini-cake.jpg
+++ b/Day21-30/code/new/web1901/images/zucchini-cake.jpg