west2-online-reserve · Peggy1017 · Oct 18, 2024 · Oct 18, 2024 · Oct 26, 2024 · Nov 2, 2024
diff --git a/work1/Peggy1017/all.jpeg b/work1/Peggy1017/all.jpeg
diff --git a/work1/Peggy1017/haimianbaobao.jpeg b/work1/Peggy1017/haimianbaobao.jpeg
diff --git a/work1/Peggy1017/main.html b/work1/Peggy1017/main.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>人物介绍</title>
+  <link rel="stylesheet" href="stylesss.css">
+
+</head>
+
+<body style="background-color:rgb(172, 219, 234)">
+
+  <div class="container">
+    <header>
+        <a href="#character">人物介绍</a>
+        <a href="#series">系列作品</a>
+        <a href="#feedback">我们相关</a>
+    </header>
+
+    <section class="character-intro" id="character">
+        <img src="all.jpeg" alt="海绵宝宝系列">
+        <p>海绵宝宝是一只黄颜色的方形海绵, 住在太平洋深处风光优美无人知的比基尼海滩水域下。那里是一个没有忧愁的世界,住着一群快乐的海洋生物。</p>
+    </section>
+
+    <section class="characters">
+        <div class="character-card" style="background-color: #f8cf3a;">
+            <h2>海绵宝宝</h2>
+            <p>是动画《海绵宝宝》系列的主角。超级活泼和可爱，给人带来快乐。</p>
+        </div>
+        <div class="character-card" style="background-color: #d08177;">
+            <h2>派大星</h2>
+            <p>粉红色的海星，很可爱，和海绵宝宝交情最好。</p>
+        </div>
+        <div class="character-card" style="background-color: #386098;">
+            <h2>章鱼哥</h2>
+            <p>大鼻子章鱼，有艺术天赋，常有脾气的名字，本质上是个善良且有正义感的好鱼。</p>
+        </div>
+    </section>
+
+    <section class="characters">
+        <div class="character-img">
+            <img src="haimianbaobao.jpeg" alt="海绵宝宝">
+        </div>
+        <div class="character-img">
+            <img src="paidaxing.jpeg" alt="派大星">
+        </div>
+        <div class="character-img">
+            <img src="zhangyuge.jpeg" alt="章鱼哥">
+        </div>
+    </section>
+
+    <section class="series" id="series">
+        <table>
+            <thead>
+                <tr>
+                    <th>系列</th>
+                    <th>日期</th>
+                    <th>集数</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="col1">海绵宝宝</td>
+                    <td class="col2">2008年10月23日</td>
+                    <td class="col3">60集</td>
+                </tr>
+                <tr>
+                    <td class="col1">海绵宝宝</td>
+                    <td class="col2">2008年10月23日</td>
+                    <td class="col3">60集</td>
+                </tr>
+                <tr>
+                    <td class="col1">海绵宝宝</td>
+                    <td class="col2">2008年10月23日</td>
+                    <td class="col3">60集</td>
+                </tr>
+                <tr>
+                    <td class="col1">海绵宝宝</td>
+                    <td class="col2">2008年10月23日</td>
+                    <td class="col3">60集</td>
+                </tr>
+                <tr>
+                    <td class="col1">海绵宝宝</td>
+                    <td class="col2">2008年10月23日</td>
+                    <td class="col3">60集</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+
+    <section class="feedback" id="feedback">
+        <textarea placeholder="对我们的建议"></textarea>
+        <button type="submit">提交</button>
+    </section>
+</div>
+
+
+
+</body>
+
+</html>
diff --git a/work1/Peggy1017/paidaxing.jpeg b/work1/Peggy1017/paidaxing.jpeg
diff --git a/work1/Peggy1017/stylesss.css b/work1/Peggy1017/stylesss.css
@@ -0,0 +1,156 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #e0f8fb;
+    color: #333;
+}
+
+.container {
+    width: 70%;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+header a {
+    font-size: 24px;
+    text-decoration: none;
+    color: black;
+}
+
+.character-intro {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    margin-top: 20px;
+    border-radius: 8px;
+    border: 2px solid #7491bb;
+}
+
+.character-intro img {
+    width: 120px;
+    height: 120px;
+    margin-right: 20px;
+    border-radius: 120px;
+}
+
+.character-intro p {
+    flex: 1;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+.characters {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.character-card {
+    background-color: #fff;
+    text-align: center;
+    padding: 20px;
+    border-radius: 8px;
+    width: 200px;
+}
+
+.character-img {
+    background-color: #fff;
+    text-align: center;
+    border-radius: 8px;
+    width: 200px;
+}
+
+.character-img img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}
+
+.character-card h2 {
+    margin-top: 10px;
+    color: white;
+}
+
+.character-card p {
+    margin-top: 10px;
+    font-size: 16px;
+    color: white;
+}
+
+.series {
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table th, table td {
+    text-align: center;
+}
+
+tbody {
+    border-radius: 8px;
+}
+
+table th {
+    color: black;
+}
+
+.col1 {
+    background-color: #99ccff;
+}
+
+.col2 {
+    background-color: #87ceec;
+}
+
+.col3 {
+    background-color: #6699cc;
+}
+
+.feedback {
+    margin-top: 20px;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.feedback textarea {
+    width: 100%;
+    height: 200px;
+    padding: 10px;
+    border: 2px solid #87ceec;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    background: #e0f8fb;
+}
+
+.feedback button {
+    padding: 10px 20px;
+    background-color: #6495ed;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    float: right;
+}
+
+.feedback button:hover {
+    background-color: #004d40;
+}
diff --git a/work1/Peggy1017/zhangyuge.jpeg b/work1/Peggy1017/zhangyuge.jpeg
diff --git a/work2/Peggy1017/demo1.html b/work2/Peggy1017/demo1.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>阿笠博士的新发明</title>
+
+    <style>
+      body {
+        padding-left: 10vw;
+      }
+      .question {
+        margin-top: 30px;
+        font-size: 22px;
+      }
+
+      .box {
+        margin-top: 64px;
+        width: 60%;
+        height: 200px;
+        font-size: 24px;
+        display: flex;
+        justify-content: space-between;
+      }
+      #blue {
+        width: 46%;
+        text-align: center;
+        line-height: 200px;
+        border: 2px solid #21a4f1;
+      }
+      #red {
+        width: 46%;
+        text-align: center;
+        line-height: 200px;
+        border: 2px solid #fc4b5a;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="question">
+      <p>柯南的手表坏了，最近阿笠博士刚好设计了一款新型时钟（下方蓝框）。</p>
+      <p>
+        蓝框显示当前日期，当鼠标移入蓝框时，有放大效果且时间暂停；鼠标移出后时间继续更新。
+      </p>
+      <p>点击定格按钮，红框内显示定格的时间。</p>
+    </div>
+    <div class="box">
+      <div id="blue">
+        <span id="time"></span>
+      </div>
+      <div id="red">
+        <span id="pauseTime"></span>
+      </div>
+    </div>
+    <button id="btn" style="font-size: 24px; margin-top: 48px">定格</button>
+
+    <!-- 以上代码不可修改 -->
+
+    <!--
+        要求在下列代码中实现：
+        1. 页面上的时间每秒更新一次。
+        2. 鼠标移入 #blue 的时候 暂停时间的更新，并且有边框放大效果。
+        3. 鼠标移出 #blue 的时候 继续时间的更新，CSS 样式还原。
+        4. 点击定格按钮，#red 里面显示点击时候的时间。
+    -->
+
+
+    <script>
+      function set_time(){
+     var currentTime = new Date().toLocaleString();
+     var time = document.getElementById('time');
+     time.innerText = currentTime;
+      }
+      var timer=setInterval(set_time,1000);
+
+     var blue=document.getElementById('blue');
+     blue.onmouseenter=function(){
+      blue.style.transform='scale(1.1)';
+      clearInterval(timer);
+     }
+     blue.onmouseleave=function(){
+      blue.style.transform='scale(1.0)';
+      timer=setInterval(set_time,1000);
+     }
+
+     var btn=document.getElementById('btn');
+     btn.onclick=function(){
+      var pauseTime = document.getElementById('pauseTime');
+      pauseTime.innerText = new Date().toLocaleString();
+     }
+
+
+    </script>
+  </body>
+</html>
diff --git a/work2/Peggy1017/demo1_fix.html b/work2/Peggy1017/demo1_fix.html