Home Explore Help
Register Sign In
choozmo
/
OpenTalk
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

初版

jeter20131220 3 years ago
parent
13334cbaad
commit
5b5a7abe1f
7 changed files with 261 additions and 32 deletions
Split View Show Diff Stats
  1. 3 0
      .vscode/settings.json
  2. 29 0
      goto.js
  3. 101 23
      index.html
  4. 71 3
      style.css
  5. 0 1
      style.css.map
  6. 57 4
      style.scss
  7. 0 1
      test.html

+ 3 - 0
.vscode/settings.json
View File 

@@ -0,0 +1,3 @@
 
+{
 
+    "liveServer.settings.port": 5502
 
+}

+ 29 - 0
goto.js
View File 

@@ -0,0 +1,29 @@
 
+// axios
 
+// axios.get('http://172.105.205.52:8000/courses?tag_string=(2)')
 
+//   .then(function (response) {
 
+//     console.log(response);
 
+//   });
 
+
 
+//   axios.post('/user', {
 
+//     firstName: 'Fred',
 
+//     lastName: 'Flintstone'
 
+//   }).then(function (response) {
 
+//     console.log(response);
 
+//   })
 
+
 
+
 
+// jquery
 
+
 
+$.ajax('http://172.105.205.52:8000/tags', {
 
+    type: 'GET',  // http method
 
+    success: function (res) {
 
+        console.log(res);
 
+    },
 
+    error: function (err) {
 
+        console.log(err);
 
+    }
 
+});
 
+
 
+// $.get("date-time.php", function(data){
 
+//     console.log(res);
 
+// });

+ 101 - 23
index.html
View File 

@@ -11,31 +11,109 @@
 
 </head>
 
 
 <body>
 
-   <section id="banner">
 
-
 
-   </section>
 
-   <section class="marquee">
 
-    <div id="marquee-box">
 
-        <span class="span">Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
 
-        <span class="span">Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
 
-      </div>
 
-   </section>
 
-   <section id="tag">
 
-       <button class="btn" id="1">Lorem</button>
 
-       <button class="btn" id="2">Lorem</button>
 
-       <button class="btn" id="3">Lorem</button>
 
-       <button class="btn" id="4">Lorem</button>
 
-       <button class="btn" id="5">Lorem</button>
 
-   </section>
 
-   <section id="Search-result">
 
-       <div class="result-box">
 
-        <img src="https://fakeimg.pl/300x200/">
 
+    <section id="banner">
 
+
 
+    </section>
 
+    <hr>
 
+    <section class="marquee">
 
+        <div id="marquee-box">
 
+            <span class="span">Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
 
+            <span class="span">Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
 
+        </div>
 
+    </section>
 
+    <hr>
 
+    <section id="tag">
 
+        <button class="btn" id="1">養生</button>
 
+        <button class="btn" id="2">瑜珈</button>
 
+        <button class="btn" id="3">科技</button>
 
+        <button class="btn" id="4">商業</button>
 
+        <button class="btn" id="5">自我成長</button>
 
+    </section>
 
+    <hr>
 
+    <section id="Search-result">
 
+        <div class="result-box">
 
+            <img src="https://fakeimg.pl/300x200/">
 
+            <div class="result-result">
 
+                <h1>課程:</h1>
 
+                <p>介紹:</p>
 
+                <span>20課</span>
 
+            </div>
 
+        </div>
 
+        <div class="result-box">
 
+            <img src="https://fakeimg.pl/300x200/">
 
+            <div class="result-result">
 
+                <h1>課程</h1>
 
+                <p>介紹:</p>
 
+                <span>20課</span>
 
+            </div>
 
+        </div>
 
+        <div class="result-box">
 
+            <img src="https://fakeimg.pl/300x200/">
 
+            <div class="result-result">
 
+                <h1>課程</h1>
 
+                <p>介紹:</p>
 
+                <span>20課</span>
 
+            </div>
 
+        </div>
 
+        <div class="result-box">
 
+            <img src="https://fakeimg.pl/300x200/">
 
+            <div class="result-result">
 
+                <h1>課程:</h1>
 
+                <p>介紹:</p>
 
+                <span>20課</span>
 
+            </div>
 
+        </div>
 
         <div class="result-box">
 
-            <h1>朋友圈吸金實戰課</h1>
 
-            <p>酷奇文化11111</p>
 
+            <img src="https://fakeimg.pl/300x200/">
 
+            <div class="result-result">
 
+                <h1>課程:</h1>
 
+                <p>介紹:</p>
 
+
 
+            </div>
 
+        </div>
 
+    </section>
 
+    <hr>
 
+    <section id="logo">
 
+        <button class="logo" id="logo1">logo1</button>
 
+        <button class="logo" id="logo2">logo2</button>
 
+        <button class="logo" id="logo3">logo3</button>
 
+        <button class="logo" id="logo4">logo4</button>
 
+        <button class="logo" id="logo5">logo5</button>
 
+        <button class="logo" id="logo5">logo6</button>
 
+        <button class="logo" id="logo5">logo7</button>
 
+        <button class="logo" id="logo5">logo8</button>
 
+    </section>
 
+    <hr>
 
+    <section id="news">
 
+        <div class="news-box">
 
+            <h1>專欄報導</h1>
 
+            <a href="">Lorem ipsum dolor sit amet consectetur</a>
 
+            <a href="">Lorem ipsum dolor sit amet consectetur</a>
 
+        </div>
 
+        <div class="news-box">
 
+            <h1>課程排名</h1>
 
+            <a href="">Lorem ipsum dolor sit amet consectetur</a>
 
+            <a href="">Lorem ipsum dolor sit amet consectetur</a>
 
+        </div>
 
+        <div class="news-box">
 
+            <h1>相關連結</h1>
 
+            <a href=""> TOP 20 Lorem ipsum dolor sit amet consectetur</a>
 
+            <a href=""> 2021 Lorem ipsum dolor sit amet consectetur</a>
 
         </div>
 
-       </div>
 
-   </section>
 
+
 
+
 
+    </section>
 
+    <hr>
 
+
 
+    <footer id="footer">
 
+        <h2>客服信箱:elainsmail@gmail.com</h2>
 
+        <h2>客服電話:0988268521</h2>
 
+        <p>開拓opentalk &copy; All Rights Reserved.</p>
 
+    </footer>
 
+
 
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+    <script src="./goto.js"></script>
 
 </body>
 
 
 </html>

+ 71 - 3
style.css
View File 

@@ -6,7 +6,11 @@
 
 }
 
 
 body {
 
-  height: 3000px;
 
+  height: 2800px;
 
+}
 
+
 
+body hr {
 
+  margin: 20px;
 
 }
 
 
 #banner {
 
@@ -67,11 +71,75 @@ body {
 
 
 #tag .btn {
 
   padding: 15px;
 
-  width: 100px;
 
-  margin: 30px;
 
+  width: 150px;
 
+  margin: 10px;
 
+  background-color: #CE0000;
 
+  border-radius: 10px;
 
+  font-size: 24px;
 
+  color: #fff;
 
+  border: none;
 
+}
 
+
 
+#Search-result .result-box {
 
+  margin: 50px auto;
 
+  width: 700px;
 
+  display: -ms-grid;
 
+  display: grid;
 
+  -ms-grid-columns: (1fr)[2];
 
+      grid-template-columns: repeat(2, 1fr);
 
+  grid-gap: 10px;
 
+}
 
+
 
+#Search-result .result-box h1 {
 
+  margin: 10px;
 
+}
 
+
 
+#Search-result .result-box p {
 
+  padding: 15px 0;
 
+  margin: 10px;
 
+}
 
+
 
+#Search-result .result-box span {
 
+  padding: 0px 10px;
 
+}
 
+
 
+#logo {
 
+  width: 100vw;
 
+  text-align: center;
 
+}
 
+
 
+#logo .logo {
 
+  padding: 15px;
 
+  width: 150px;
 
+  margin: 10px;
 
   background-color: #CE0000;
 
+  border-radius: 10px;
 
   font-size: 24px;
 
   color: #fff;
 
   border: none;
 
 }
 
+
 
+#news {
 
+  display: -ms-grid;
 
+  display: grid;
 
+  -ms-grid-columns: (1fr)[3];
 
+      grid-template-columns: repeat(3, 1fr);
 
+  margin: 50px;
 
+  grid-gap: 30px;
 
+}
 
+
 
+#news h1 {
 
+  margin-bottom: 10px;
 
+}
 
+
 
+#news a {
 
+  margin-top: 20px;
 
+  line-height: 1.5;
 
+  display: inline-block;
 
+}
 
+
 
+#footer {
 
+  text-align: center;
 
+  line-height: 2;
 
+}
 
 /*# sourceMappingURL=style.css.map */

File diff suppressed because it is too large
+ 0 - 1
style.css.map


+ 57 - 4
style.scss
View File 

@@ -4,7 +4,10 @@
 
     box-sizing: border-box;
 
 }
 
 body {
 
-    height: 3000px;
 
+    height: 2800px;
 
+    hr{
 
+        margin: 20px;
 
+    }
 
 }
 
 
 #banner {
 
@@ -49,9 +52,10 @@ body {
 
     text-align: center;
 
     .btn{
 
     padding: 15px;
 
-    width: 100px;
 
-    margin: 30px;
 
+    width: 150px;
 
+    margin: 10px;
 
     background-color:#CE0000;
 
+    border-radius: 10px;;
 
     font-size: 24px;
 
     color:#fff;
 
     border: none;
 
@@ -59,6 +63,55 @@ body {
 
 }
 
 #Search-result{
 
     .result-box{
 
-        
+        margin: 50px auto;
 
+        width: 700px;
 
+        display: grid;
 
+     grid-template-columns: repeat(2,1fr );
 
+     grid-gap:10px;
 
+     h1{
 
+         margin: 10px;
 
+         
+     }
 
+     p{
 
+         padding: 15px 0;
 
+         margin: 10px;
 
+     }
 
+     span{
 
+        padding: 0px 10px;
 
+    
+     }
 
     }
 
 }
 
+#logo{
 
+    width: 100vw;
 
+    text-align: center;
 
+    .logo{
 
+    padding: 15px;
 
+    width: 150px;
 
+    margin: 10px;
 
+    background-color:#CE0000;
 
+    border-radius: 10px;;
 
+    font-size: 24px;
 
+    color:#fff;
 
+    border: none;
 
+    }
 
+}
 
+#news{
 
+    display: grid;
 
+    grid-template-columns: repeat(3,1fr );
 
+    margin: 50px;
 
+    grid-gap:30px;
 
+    h1{
 
+        margin-bottom: 10px;
 
+    }
 
+    a{
 
+        margin-top: 20px;
 
+        line-height: 1.5;
 
+        display: inline-block;
 
+    }
 
+}
 
+#footer{
 
+text-align: center;
 
+line-height: 2;
 
+}
 
+

+ 0 - 1
test.html
View File 

@@ -1 +0,0 @@
 
-Mike test

Some files were not shown because too many files changed in this diff