fudansswebfundamental · LuoRongLuoRong · Mar 23, 2018 · Mar 30, 2018 · Apr 3, 2018 · Apr 4, 2018
diff --git a/001.html b/001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Central Park</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+
+<div class="container">
+
+    <a href="Lab05.html" target="_blanck">
+        <img class="img-thumbnail w-100" src="images/central-park.jpg">
+    </a>
+</div>
+
+<!-- JS -->
+<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/002.html b/002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Central Park</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+
+<div class="container">
+
+    <a href="Lab05.html" target="_blanck">
+        <img class="img-thumbnail w-100" src="images/related-square1.jpg">
+    </a>
+</div>
+
+<!-- JS -->
+<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/003.html b/003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Central Park</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+
+<div class="container">
+
+    <a href="Lab05.html" target="_blanck">
+        <img class="img-thumbnail w-100" src="images/related-square2.jpg">
+    </a>
+</div>
+
+<!-- JS -->
+<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/004.html b/004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Central Park</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+
+<div class="container">
+
+    <a href="Lab05.html" target="_blanck">
+        <img class="img-thumbnail w-100" src="images/related-square3.jpg">
+    </a>
+</div>
+
+<!-- JS -->
+<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
+</html>
diff --git a/Lab02.html b/Lab02.html
@@ -0,0 +1,76 @@
+<!DOCTYPE>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <!-- saved from url=(0014)about:internet -->
+  <title>Lab02.html</title>
+  <!-- Site CSS -->
+  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+</head>
+
+<body>
+  <h1>
+    <img src="images/logo.png" alt="camera">
+    share your travels
+  </h1>
+
+  <nav>
+  <ul>
+    <li><a href="#">Description</a></li>
+    <li><a  href="#">Related photos</a></li>
+    <li><a  href="#">Reviews</a></li>
+  </ul>
+  </nav>
+
+  <h2>New York - Central Park</h2>
+
+  <section>
+  <h4>Description</h4>
+  <p>Photo by Randy Connoly</p>
+  <p>This photo of Conservatory Pond in <a href="#">Central Park</a> in <a href="#">New York City</a> was taken on October 22,2016 with a Canon EOS 30D camera.</p>
+  <figure>
+    <img src="images/central-park.jpg">
+    <br>
+    <figcaption><em>Conservatory Pond in Central Park</em></figcaption>
+  </figure>
+  <p>
+    Options
+    <img src="images/icon_download.png">
+    <img src="images/icon_mail.png">
+    <img src="images/icon_map.png">
+    <img src="images/icon_up.png">
+    <img src="images/icon_down.png">
+  </p>
+  </section>
+
+  <section>
+    <h4>Related Photos</h4>
+      <img src="images/related-square1.jpg">
+      <img src="images/related-square2.jpg">
+      <img src="images/related-square3.jpg">
+  </section>
+
+  <section>
+    <h4>Reviews</h4>
+      <img src="images/icon_comment.png">
+      Ricardo on 2016-05-23
+    <p>Easy on the HDR buddy.</p>
+    <hr>
+      <img src="images/icon_comment.png">
+      Susan on 2016-11-18
+    <p>I love Central Park.</p>
+    <hr>
+  </section>
+
+  <footer>
+    <p><a href="#">Home</a> | <a href="#">Browse</a> | <a href="#">Search</a></p>
+      <i>Copyright &copy; 2017 Share Your travels</i>
+  </footer>
+
+  <!-- JS -->
+  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</body>
diff --git a/Lab03.css b/Lab03.css
@@ -0,0 +1,136 @@
+body{
+  min-width: 600pt;
+  font-family: sans-serif serif;
+  background-color: #E8EAF6;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+h1{
+  font-size: 1.5em;
+  text-transform: capitalize;
+}
+
+h2{
+  text-transform: uppercase;
+  color: white;
+  background-color: #7986CB;
+  padding: 1em;
+}
+
+header{
+  color: white;
+  background-color: #1A237A;
+  padding-top: 1em;
+  padding-left: 1em;
+  padding-bottom: 1em;
+}
+
+header > p{
+  font-style: italic;
+}
+
+
+hr{
+  color: #C5CAE9;
+  margin: 0.5em 1em 0 1em;
+}
+
+footer{
+  background-color: #1A237E;
+  padding: 1.3em 1em;
+  color: white;
+}
+
+nav{
+  background: #3F51B5;
+  color: #00B0FF;
+  padding-top: 0.4em;
+  padding-left: 0.7em;
+  padding-bottom: 0.4em;
+  margin-bottom: 0.5em;
+}
+
+a{
+  color: #00B0FF;
+  padding: 0.3em;
+}
+
+a:link:hover{
+  color: white;
+  background-color: #F50057;
+  padding: 0.3em;
+}
+
+.subheader{
+  font-family: "Times New Roman";
+}
+
+.subcolor{
+  color: #7990A3;
+}
+
+.form{
+  padding-top: 0.5em;
+  padding-left: 1em;
+}
+
+.date{
+  color: #F5A2C1;
+}
+
+.bottom-space{
+  padding-bottom: 0.8em;
+}
+
+.RelatedPhotos{
+  margin-top: 0.5em;
+}
+
+.footerspace{
+  margin-top: 0.6em;
+}
+
+.frame{
+  border-style: none solid solid solid;
+  border-color: #C5CAE9;
+  border-width: 1px;
+}
+
+.photo-show{
+  border="2";
+}
+
+#conservatory{
+  padding: 0.5em 1em;
+  background-color: #C5CAE9;
+}
+
+#maincontent {
+  background-color: white;
+  padding: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+#center-image {
+  width: 100%;
+}
+
+#image-group{
+  text-align: right;
+  padding-top: 1em;
+  padding-right: 1em;
+  padding-left: 1em;
+  padding-bottom: 0.3em;
+}
+#image-group2{
+  /* font-size: 0; */
+  margin-bottom: -0.2em;
+}
+
+#ThisPhoto{
+  padding-top: 0.5em;
+  padding-right: 1em;
+  padding-bottom: 0em;
+  padding-left: 1em;
+}