Главная Обзор Помощь
Вход
zhensolid
/
Python-100-Days
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

更新了部分代码和文档

jackfrued 6 лет назад
Родитель
1b9aefeed4
Сommit
02d31714f7
100 измененных файлов с 2441 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 0 0
      Day21-30/code/new/vue/vue.demo.html
  2. BIN
      Day21-30/code/new/web1901/audio/test-audio.mp3
  3. BIN
      Day21-30/code/new/web1901/audio/test-audio.ogg
  4. 56 0
      Day21-30/code/new/web1901/css/style.css
  5. 81 0
      Day21-30/code/new/web1901/css_practice_1.html
  6. 74 0
      Day21-30/code/new/web1901/css_practice_1.result.html
  7. 101 0
      Day21-30/code/new/web1901/css_practice_2.html
  8. 175 0
      Day21-30/code/new/web1901/css_practice_2.result.html
  9. 73 0
      Day21-30/code/new/web1901/css_practice_3.html
  10. 222 0
      Day21-30/code/new/web1901/css_practice_3.result.html
  11. 47 0
      Day21-30/code/new/web1901/example_of_anchor.html
  12. 15 0
      Day21-30/code/new/web1901/example_of_audio_video.html
  13. 33 0
      Day21-30/code/new/web1901/example_of_bom_1.html
  14. 111 0
      Day21-30/code/new/web1901/example_of_bootstrap.html
  15. 29 0
      Day21-30/code/new/web1901/example_of_css_1.html
  16. 35 0
      Day21-30/code/new/web1901/example_of_css_2.html
  17. 109 0
      Day21-30/code/new/web1901/example_of_css_3.html
  18. 37 0
      Day21-30/code/new/web1901/example_of_css_4.html
  19. 43 0
      Day21-30/code/new/web1901/example_of_css_5.html
  20. 106 0
      Day21-30/code/new/web1901/example_of_form.html
  21. 31 0
      Day21-30/code/new/web1901/example_of_iframe.html
  22. 113 0
      Day21-30/code/new/web1901/example_of_jquery_1.html
  23. 86 0
      Day21-30/code/new/web1901/example_of_jquery_2.html
  24. 41 0
      Day21-30/code/new/web1901/example_of_jquery_3.html
  25. 45 0
      Day21-30/code/new/web1901/example_of_jquery_4.html
  26. 89 0
      Day21-30/code/new/web1901/example_of_jquery_5.html
  27. 28 0
      Day21-30/code/new/web1901/example_of_js_1.html
  28. 34 0
      Day21-30/code/new/web1901/example_of_js_2.html
  29. 56 0
      Day21-30/code/new/web1901/example_of_js_3.html
  30. 53 0
      Day21-30/code/new/web1901/example_of_js_4.html
  31. 76 0
      Day21-30/code/new/web1901/example_of_js_5.html
  32. 115 0
      Day21-30/code/new/web1901/example_of_js_6.html
  33. 18 0
      Day21-30/code/new/web1901/example_of_js_7.html
  34. 72 0
      Day21-30/code/new/web1901/example_of_layout.html
  35. 110 0
      Day21-30/code/new/web1901/example_of_table.html
  36. 127 0
      Day21-30/code/new/web1901/example_of_vue_element.html
  37. BIN
      Day21-30/code/new/web1901/fonts/chunkfive.ttf
  38. BIN
      Day21-30/code/new/web1901/fonts/quicksand.ttf
  39. 0 0
      Day21-30/code/new/web1901/images/a1.jpg
  40. 0 0
      Day21-30/code/new/web1901/images/a2.jpg
  41. 0 0
      Day21-30/code/new/web1901/images/a3.jpg
  42. BIN
      Day21-30/code/new/web1901/images/add.gif
  43. BIN
      Day21-30/code/new/web1901/images/backdrop.gif
  44. BIN
      Day21-30/code/new/web1901/images/bird.gif
  45. BIN
      Day21-30/code/new/web1901/images/bok-choi.jpg
  46. BIN
      Day21-30/code/new/web1901/images/button-sprite.jpg
  47. BIN
      Day21-30/code/new/web1901/images/buttons.jpg
  48. BIN
      Day21-30/code/new/web1901/images/chocolate-islands.jpg
  49. BIN
      Day21-30/code/new/web1901/images/clavinet.jpg
  50. BIN
      Day21-30/code/new/web1901/images/dark-wood.jpg
  51. BIN
      Day21-30/code/new/web1901/images/dots.gif
  52. BIN
      Day21-30/code/new/web1901/images/email.png
  53. BIN
      Day21-30/code/new/web1901/images/header.gif
  54. BIN
      Day21-30/code/new/web1901/images/header.jpg
  55. BIN
      Day21-30/code/new/web1901/images/icon-plus.png
  56. BIN
      Day21-30/code/new/web1901/images/icon.png
  57. BIN
      Day21-30/code/new/web1901/images/icons.jpg
  58. BIN
      Day21-30/code/new/web1901/images/keys.jpg
  59. BIN
      Day21-30/code/new/web1901/images/lemon-posset.jpg
  60. BIN
      Day21-30/code/new/web1901/images/logo-1.gif
  61. BIN
      Day21-30/code/new/web1901/images/logo-2.gif
  62. BIN
      Day21-30/code/new/web1901/images/logo-3.gif
  63. BIN
      Day21-30/code/new/web1901/images/logo.gif
  64. BIN
      Day21-30/code/new/web1901/images/magnolia-large.jpg
  65. BIN
      Day21-30/code/new/web1901/images/magnolia-medium.jpg
  66. BIN
      Day21-30/code/new/web1901/images/magnolia-small.jpg
  67. BIN
      Day21-30/code/new/web1901/images/otters.jpg
  68. BIN
      Day21-30/code/new/web1901/images/pattern.gif
  69. 0 0
      Day21-30/code/new/web1901/images/picture-1.jpg
  70. 0 0
      Day21-30/code/new/web1901/images/picture-2.jpg
  71. 0 0
      Day21-30/code/new/web1901/images/picture-3.jpg
  72. BIN
      Day21-30/code/new/web1901/images/print-01.jpg
  73. BIN
      Day21-30/code/new/web1901/images/print-02.jpg
  74. BIN
      Day21-30/code/new/web1901/images/print-03.jpg
  75. BIN
      Day21-30/code/new/web1901/images/print-04.jpg
  76. BIN
      Day21-30/code/new/web1901/images/print-05.jpg
  77. BIN
      Day21-30/code/new/web1901/images/print-06.jpg
  78. BIN
      Day21-30/code/new/web1901/images/puppy.jpg
  79. BIN
      Day21-30/code/new/web1901/images/python-logo.png
  80. BIN
      Day21-30/code/new/web1901/images/quokka.jpg
  81. BIN
      Day21-30/code/new/web1901/images/rhodes.jpg
  82. BIN
      Day21-30/code/new/web1901/images/roasted-brussel-sprouts.jpg
  83. BIN
      Day21-30/code/new/web1901/images/shadow.png
  84. 0 0
      Day21-30/code/new/web1901/images/slide-1.jpg
  85. 0 0
      Day21-30/code/new/web1901/images/slide-2.jpg
  86. 0 0
      Day21-30/code/new/web1901/images/slide-3.jpg
  87. 0 0
      Day21-30/code/new/web1901/images/slide-4.jpg
  88. BIN
      Day21-30/code/new/web1901/images/star.png
  89. BIN
      Day21-30/code/new/web1901/images/subscribe.jpg
  90. BIN
      Day21-30/code/new/web1901/images/teriyaki.jpg
  91. 0 0
      Day21-30/code/new/web1901/images/thumb-1.jpg
  92. 0 0
      Day21-30/code/new/web1901/images/thumb-2.jpg
  93. 0 0
      Day21-30/code/new/web1901/images/thumb-3.jpg
  94. BIN
      Day21-30/code/new/web1901/images/tim.png
  95. BIN
      Day21-30/code/new/web1901/images/title.gif
  96. BIN
      Day21-30/code/new/web1901/images/tulip.gif
  97. BIN
      Day21-30/code/new/web1901/images/twitter.png
  98. BIN
      Day21-30/code/new/web1901/images/web.png
  99. BIN
      Day21-30/code/new/web1901/images/wurlitzer.jpg
  100. BIN
      Day21-30/code/new/web1901/images/zucchini-cake.jpg

+ 0 - 0
Day21-30/code/vue/vue.demo.html → Day21-30/code/new/vue/vue.demo.html
Просмотреть файл


BIN
Day21-30/code/new/web1901/audio/test-audio.mp3
Просмотреть файл


BIN
Day21-30/code/new/web1901/audio/test-audio.ogg
Просмотреть файл


+ 56 - 0
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;
 
+}

+ 81 - 0
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>

+ 74 - 0
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>

+ 101 - 0
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>

+ 175 - 0
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>

+ 73 - 0
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>

+ 222 - 0
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>

Разница между файлами не показана из-за своего большого размера
+ 47 - 0
Day21-30/code/new/web1901/example_of_anchor.html


+ 15 - 0
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>

+ 33 - 0
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>

+ 111 - 0
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>

+ 29 - 0
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>

+ 35 - 0
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>

+ 109 - 0
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>

+ 37 - 0
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>

+ 43 - 0
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>

+ 106 - 0
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>

+ 31 - 0
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>

+ 113 - 0
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>

+ 86 - 0
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>

+ 41 - 0
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>

+ 45 - 0
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>

+ 89 - 0
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>

+ 28 - 0
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>

+ 34 - 0
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>

+ 56 - 0
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>

+ 53 - 0
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>

+ 76 - 0
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>

+ 115 - 0
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>

+ 18 - 0
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>

+ 72 - 0
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>

+ 110 - 0
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>

+ 127 - 0
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>

BIN
Day21-30/code/new/web1901/fonts/chunkfive.ttf
Просмотреть файл


BIN
Day21-30/code/new/web1901/fonts/quicksand.ttf
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/a1.jpg → Day21-30/code/new/web1901/images/a1.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/a2.jpg → Day21-30/code/new/web1901/images/a2.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/a3.jpg → Day21-30/code/new/web1901/images/a3.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/add.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/backdrop.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/bird.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/bok-choi.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/button-sprite.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/buttons.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/chocolate-islands.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/clavinet.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/dark-wood.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/dots.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/email.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/header.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/header.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/icon-plus.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/icon.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/icons.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/keys.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/lemon-posset.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/logo-1.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/logo-2.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/logo-3.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/logo.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/magnolia-large.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/magnolia-medium.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/magnolia-small.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/otters.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/pattern.gif
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/picture-1.jpg → Day21-30/code/new/web1901/images/picture-1.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/picture-2.jpg → Day21-30/code/new/web1901/images/picture-2.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/picture-3.jpg → Day21-30/code/new/web1901/images/picture-3.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-01.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-02.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-03.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-04.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-05.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/print-06.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/puppy.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/python-logo.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/quokka.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/rhodes.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/roasted-brussel-sprouts.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/shadow.png
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/slide-1.jpg → Day21-30/code/new/web1901/images/slide-1.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/slide-2.jpg → Day21-30/code/new/web1901/images/slide-2.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/slide-3.jpg → Day21-30/code/new/web1901/images/slide-3.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/slide-4.jpg → Day21-30/code/new/web1901/images/slide-4.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/star.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/subscribe.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/teriyaki.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/thumb-1.jpg → Day21-30/code/new/web1901/images/thumb-1.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/thumb-2.jpg → Day21-30/code/new/web1901/images/thumb-2.jpg
Просмотреть файл


+ 0 - 0
Day21-30/code/javascript/img/thumb-3.jpg → Day21-30/code/new/web1901/images/thumb-3.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/tim.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/title.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/tulip.gif
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/twitter.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/web.png
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/wurlitzer.jpg
Просмотреть файл


BIN
Day21-30/code/new/web1901/images/zucchini-cake.jpg
Просмотреть файл


Некоторые файлы не были показаны из-за большого количества измененных файлов