diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index e8f682bafe394db0827c715ccb085640f891ac3e..0000000000000000000000000000000000000000
--- a/.gitignore
+++ /dev/null
@@ -1,90 +0,0 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# Nuxt generate
-dist
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
-
-# macOS
-.DS_Store
-
-# Vim swap files
-*.swp
diff --git a/README.md b/README.md
index b6952806c482d4f4b71544dfb7b122ec5152cd3d..7042aa43b4de1c6cc8bb95e520aefb2f34b1bab2 100644
--- a/README.md
+++ b/README.md
@@ -13,5 +13,4 @@
 并在下方列出你的`CSDN`博客网址
 
 - 王江奎：https://blog.csdn.net/T_T233333333
-- 赵磊:https://blog.csdn.net/VscODeFIGHTING
-- 王晶：https://blog.csdn.net/as__ole
\ No newline at end of file
+- 郁小凡：https://blog.csdn.net/Ripplebody
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/Gratia-Menu.jpg" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/Gratia-Menu.jpg"
deleted file mode 100644
index 3c3188ffe4efc81ddfee1898f15e0c307af1a4d8..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/Gratia-Menu.jpg" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Barbecue.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Barbecue.png"
deleted file mode 100644
index 9435e5e1c84b39bd74eb59c0d9e39616d1b4a22b..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Barbecue.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Desserts.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Desserts.png"
deleted file mode 100644
index 44b8f7c17ea18894dea5f3991a11339caf7d0b89..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Desserts.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/FB.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/FB.png"
deleted file mode 100644
index 9dbccfab74d0838faeb9e94e418753ada25d82bf..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/FB.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Hamburgers.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Hamburgers.png"
deleted file mode 100644
index 84ecf9c85b4fa52ac50a4eb274a289b0780ff31a..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Hamburgers.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/IG.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/IG.png"
deleted file mode 100644
index 7549870f3f82e09e3593324c2425cb1aee2ff78c..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/IG.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Logo.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Logo.png"
deleted file mode 100644
index 8a94cb1b188d46bc8c752aba27d070d47353fc08..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Logo.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Main Dishes.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Main Dishes.png"
deleted file mode 100644
index 9ced7cedcecc2bb5465798c33adc1c9688a8ff0f..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Main Dishes.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Salads.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Salads.png"
deleted file mode 100644
index d4f2d10952117dd38a521ba7a8c632ec44460fd8..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Salads.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Soups.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Soups.png"
deleted file mode 100644
index 1496014b020f4b4003ceeefe4b969252ab3d6b7a..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/Soups.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/TR.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/TR.png"
deleted file mode 100644
index 793889af8f304a7a537678c319b7931e4cfd8cd6..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/TR.png" and /dev/null differ
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/background.png" "b/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/background.png"
deleted file mode 100644
index 125f3b4fa32c63a7ab45517bc6fd49c335798108..0000000000000000000000000000000000000000
Binary files "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/image/background.png" and /dev/null differ
diff --git "a/\347\250\213\345\272\217\344\277\256\346\224\271/CSS.css" "b/\347\250\213\345\272\217\344\277\256\346\224\271/CSS.css"
new file mode 100644
index 0000000000000000000000000000000000000000..c1ad70f4def4ed4051fb3eab3c26fe3e1f7eaeba
--- /dev/null
+++ "b/\347\250\213\345\272\217\344\277\256\346\224\271/CSS.css"
@@ -0,0 +1,156 @@
+.head {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+  border-bottom: solid #f5f5f5 0.15px;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+}
+.head img {
+  display: flex;
+  flex-direction: row;
+  width: 35px;
+  height: 35px;
+  margin-left: 50px;
+  margin-right: 10px;
+}
+.head span {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 5px;
+  color: green;
+  font-size: 30px;
+  font-family: SimSun;
+}
+.head ul {
+  list-style-type: none;
+  float: right;
+  justify-content: space-between;
+  margin-right: 70px;
+}
+.head li {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: bold;
+}
+.head a {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100px;
+  padding: 3px;
+  color: black;
+  text-align: center;
+  text-decoration: none;
+  font-family: bold;
+}
+.head a:hover,
+a:active {
+  color: orange;
+}
+.menu {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 10px;
+  margin-top: 150px;
+  margin-bottom: 75px;
+  background-image: url(image/background.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 560px 163px;
+}
+.menu p {
+  display: flex;
+  margin-top: auto;
+  margin-bottom: 30px;
+  color: #c0c0c0;
+  font-size: 13px;
+  font-style: italic;
+  font-family: "Comic Sans MS", cursive, sans-serif;
+}
+.pics {
+  display: flex;
+  flex-direction: row;
+  margin: 2px;
+  width: 90%;
+  text-align: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-left: 110px;
+}
+.img {
+  display: flex;
+  flex-direction: column;
+  margin: 18px;
+  text-align: center;
+  box-shadow: 0 0 20px 20px #f5f5f5;
+  border-radius: 20px;
+}
+.img img {
+  width: 400px;
+  height: 300px;
+}
+.img p {
+  margin-top: 20px;
+  margin-bottom: 30px;
+  color: #c0c0c0;
+  font-size: 13px;
+  font-style: italic;
+  font-family: "Comic Sans MS", cursive, sans-serif;
+}
+.foot {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  text-align: center;
+  margin-top: 170px;
+}
+.foot img {
+  width: 60px;
+  height: 60px;
+  padding: 15px;
+  top: 58px;
+  border: solid #f5f5f5 2px;
+  border-radius: 100px;
+  background-color: #fff;
+}
+.footp {
+  margin-top: 31px;
+  font-weight: bold;
+}
+.foot p {
+  color: #c0c0c0;
+  font-size: 13px;
+  font-style: italic;
+  font-family: "Comic Sans MS", cursive, sans-serif;
+}
+.contact {
+  margin: 0 auto;
+  width: 200px;
+  border-top: solid #f5f5f5 2px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.contact ul {
+  list-style-type: none;
+  text-align: center;
+  padding: 1px;
+}
+.contact li {
+  margin: 8px;
+  display: inline-block;
+}
diff --git "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/\351\255\217\346\236\227\346\231\272/index.html" "b/\347\250\213\345\272\217\344\277\256\346\224\271/text.html"
similarity index 41%
rename from "\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/\351\255\217\346\236\227\346\231\272/index.html"
rename to "\347\250\213\345\272\217\344\277\256\346\224\271/text.html"
index 1ffebbe72106a64f2f13387895eb6a0bb3cc05f6..79334242c128c7470c428c0edcf2130f62b74707 100644
--- "a/\346\213\233\346\226\260\345\260\217\344\275\234\344\270\232/\351\255\217\346\236\227\346\231\272/index.html"
+++ "b/\347\250\213\345\272\217\344\277\256\346\224\271/text.html"
@@ -1,240 +1,101 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<title>10.10作业</title>
-	<style type="text/css">
-	#head{
-		width: 100%;
-		padding: 10px;
-		position: fixed;
-		top: 0px;
-		background-color: #fff;
-		border-bottom: solid #F5F5F5 0.15px;
-	}
-
-	#head img{
-		width: 35px;
-		height: 35px;
-		position: relative;
-		top: 5px;
-		margin-left: 50px;
-		margin-right: 10px;
-	}
-
-	#head span{
-		margin: 5px;
-		color: green;
-		font-size: 30px;
-		font-family: SimSun;
-	}
-
-	#head ul{
-		list-style-type: none;
-		float: right;
-		margin-right: 70px;
-	}
-
-	#head li{
-		display: inline-block;
-		font-size: 14px;
-		font-weight: bold;
-	}
-
-	#head a{
-		display: block;
-		width: 100px;
-		padding: 3px;
-		color: black;
-		text-align: center;
-		text-decoration: none;
-		font-family: bold;
-	}
-
-	#head a:hover,a:active {
-		color: orange;
-	}
-
-	#menu{
-		margin: 0 auto;
-		width: 40%;
-		padding: 10px;
-		text-align: center;
-		margin-top: 150px;
-		margin-bottom: 75px;
-		background-image: url(image/background.png);
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: 550px 170px;
-	}
-
-	#menu p{
-		margin-bottom: 30px;
-		color: #C0C0C0;
-		font-size: 13px;
-		font-style: italic;
-		font-family: "Comic Sans MS", cursive, sans-serif;
-	}
-
-	#pics{
-		margin: 2px auto;
-		width: 90%;
-		text-align: center;
-	}
-
-	.img{
-		display: inline-block;
-		margin: 18px;
-		text-align: center;
-		box-shadow: 0 0 20px 20px #F5F5F5;
-		border-radius: 20px;
-	}
-
-	.img img{
-		width: 400px;
-		height: 300px;
-	}
-
-	.img p{
-		margin-top: 30px;
-		margin-bottom: 50px;
-		color: #C0C0C0;
-		font-size: 13px;
-		font-style: italic;
-		font-family: "Comic Sans MS", cursive, sans-serif;
-	}
-
-	#foot{
-		margin: 0 auto;
-		text-align: center;
-		margin-top: 140px;
-	}
-
-	#foot img{
-		width: 60px;
-		height: 60px;
-		padding: 15px;
-		position: relative;
-		top: 58px;
-		border: solid #F5F5F5 2px;
-		border-radius: 100px;
-		background-color: #fff;
-	}
-
-	#footp{
-		margin-top: 71px;
-		font-weight: bold;
-	}
-
-	#foot p {
-		color: #C0C0C0;
-		font-size: 13px;
-		font-style: italic;
-		font-family: "Comic Sans MS", cursive, sans-serif;
-	}
-
-	#contact{
-		margin: 0 auto;
-		width: 200px;
-		border-top: solid #F5F5F5 2px;
-		margin-top: 40px;
-		margin-bottom: 40px;
-	}
-
-	#contact ul{
-		list-style-type: none;
-		text-align: center;
-		padding: 1px;
-	}
-
-	#contact li{
-		margin: 8px;
-		display: inline-block;
-	}
-
-</style>
-</head>
-<body>
-	<div id="head">
-		<span><img src="image\Logo.png" alt="logo">Cratia</span>
-		<ul>
-			<li><a href="#About">About</a></li>
-			<li><a href="#Menu">Menu</a></li>
-			<li><a href="#Callery">Callery</a></li>
-			<li><a href="#Contact">Contact</a></li>
-		</ul>
-	</div>
-	<div id="menu">
-		<h1>MENU</h1>
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-	<div id="pics">
-		<div class="img">
-			<img src="image\Main Dishes.png" alt="Main Dishes">
-			<div>
-				<h1>MAIN DISHES</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="img">
-			<img src="image\Soups.png" alt="Soups">
-			<div>
-				<h1>SOUPS</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="img">
-			<img src="image\Hamburgers.png" alt="Hamburgers">
-			<div>
-				<h1>HAMBURGERS</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="img">
-			<img src="image\Desserts.png" alt="Desserts">
-			<div>
-				<h1>DESSERTS</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="img">
-			<img src="image\Barbecue.png" alt="Barbecue">
-			<div>
-				<h1>BARBECUE</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-		<div class="img">
-			<img src="image\Salads.png" alt="Salads">
-			<div>
-				<h1>SALADS</h1>
-			</div><hr width="30px" color="#F5F5F5">
-			<div>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			</div>
-		</div>
-	</div>
-	<div id="foot">
-		<img src="image\Logo.png" alt="Logo">
-		<hr color="#F5F5F5">
-		<p id="footp">Gratia Restaurant</p>
-		<p>Copyright 2016. All rights reserved by symu</p>
-	</div>
-	<div id="contact">
-		<ul>
-			<li><a href="http://www.facebook.com" target="_blank"><img src="image\FB.png" alt="facebook"></a></li>
-			<li><a href="http://www.twitter.com" target="_blank"><img src="image\TR.png" alt="twitter"></a></li>
-			<li><a href="http://www.instagram.com" target="_blank"><img src="image\IG.png" alt="instagram"></a></li>
-		</ul>
-	</div>
-</body>
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>郁小凡作业</title>
+	<link rel="stylesheet" href="CSS.css" type="text/css" media="all ">
+</head>
+
+<body>
+	<div class="head">
+		<span><img src="image/Logo.png" alt="logo">Cratia</span>
+		<ul>
+			<li><a href="#About">About</a></li>
+			<li><a href="#Menu">Menu</a></li>
+			<li><a href="#Callery">Callery</a></li>
+			<li><a href="#Contact">Contact</a></li>
+		</ul>
+	</div>
+	<div class="menu">
+		<h1>MENU</h1>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	<div class="pics">
+		<div class="img">
+			<img src="image\Main Dishes.png" alt="Main Dishes">
+			<div>
+				<h1>MAIN DISHES</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="img">
+			<img src="image\Soups.png" alt="Soups">
+			<div>
+				<h1>SOUPS</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="img">
+			<img src="image\Hamburgers.png" alt="Hamburgers">
+			<div>
+				<h1>HAMBURGERS</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="img">
+			<img src="image\Desserts.png" alt="Desserts">
+			<div>
+				<h1>DESSERTS</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="img">
+			<img src="image\Barbecue.png" alt="Barbecue">
+			<div>
+				<h1>BARBECUE</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+		<div class="img">
+			<img src="image\Salads.png" alt="Salads">
+			<div>
+				<h1>SALADS</h1>
+			</div>
+			<hr width="30px" color="#F5F5F5">
+			<div>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			</div>
+		</div>
+	</div>
+	<div class="foot">
+		<img src="image\Logo.png" alt="Logo">
+		<hr style="top:2cm;position: relative;background-color: #F5F5F5;height:1px;border: none ;">
+		<p class="footp">Gratia Restaurant</p>
+		<p>Copyright 2016. All rights reserved by symu</p>
+	</div>
+	<div class="contact">
+		<ul>
+			<li><a href="http://www.facebook.com" target="_blank"><img src="image\FB.png" alt="facebook"></a></li>
+			<li><a href="http://www.twitter.com" target="_blank"><img src="image\TR.png" alt="twitter"></a></li>
+			<li><a href="http://www.instagram.com" target="_blank"><img src="image\IG.png" alt="instagram"></a></li>
+		</ul>
+	</div>
+</body>
+
 </html>
\ No newline at end of file