更新了部分代码和文档

daihu · Apr 23, 2019 · 02d3171 · 02d3171
1 parent 1b9aefe
commit 02d3171
Show file tree

Hide file tree

Showing 160 changed files with 3,569 additions and 198 deletions.
diff --git a/Day21-30/code/vue/vue.demo.html → Day21-30/code/new/vue/vue.demo.html b/Day21-30/code/vue/vue.demo.html → Day21-30/code/new/vue/vue.demo.html
diff --git a/Day21-30/code/new/web1901/audio/test-audio.mp3 b/Day21-30/code/new/web1901/audio/test-audio.mp3
diff --git a/Day21-30/code/new/web1901/audio/test-audio.ogg b/Day21-30/code/new/web1901/audio/test-audio.ogg
diff --git 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;
+}
diff --git 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>
diff --git 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>
diff --git 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>