trikeys 後台管理介面

標題

標籤

輸入文字後，按Enter可以建立標籤。

文章內容

<p>圖文導覽頁面</p><style>
    body {
      margin: 0;
      font-family: 'Noto Sans TC', sans-serif;
      background-color: #f7f7f7;
      color: #333;
      font-size: 18px;
    }

.navbar-container {
      width: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      transition: top 0.3s;
    }

.navbar ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

.navbar li {
      position: relative;
    }

.navbar a {
      text-decoration: none;
      font-size: 14px;
      color: #005f6b;
      padding: 6px 12px;
      transition: color 0.3s;
    }

.navbar a:hover {
      color: #ff6347;
    }

.navbar li:hover > ul {
      display: block;
    }

.navbar li ul {
      display: none;
      position: absolute;
      top: 30px;
      left: 0;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      list-style: none;
      z-index: 1001;
      border-radius: 8px;
    }

.navbar li ul li {
      margin-bottom: 10px;
    }

.hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-around;
      width: 30px;
      height: 30px;
      cursor: pointer;
      z-index: 1001;
    }

.hamburger div {
      width: 30px;
      height: 4px;
      background-color: #005f6b;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

.hamburger.open div:nth-child(1) {
      transform: rotate(45deg);
      background-color: #ff6347;
    }

.hamburger.open div:nth-child(2) {
      opacity: 0;
    }

.hamburger.open div:nth-child(3) {
      transform: rotate(-45deg);
      background-color: #ff6347;
    }

.navbar.mobile ul {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

.navbar.mobile.active ul {
      display: flex;
    }

.section {
      background-color: #ffffff;
      padding: 50px 20px;
      margin: 120px 20px 30px;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;
    }

.section:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

.section h2 {
      font-size: 36px;
      margin-bottom: 20px;
      color: #2a4d69;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

.section p {
      font-size: 20px;
      line-height: 1.8;
      text-align: center;
      color: #555;
    }

.image-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      margin-top: 30px;
    }

.image-item {
      flex: 1 1 calc(33.33% - 40px);
      max-width: 350px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.image-item img {
      width: 100%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.image-item img:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

.image-item a {
      text-decoration: none;
      color: #005f6b;
      font-size: 22px;
      margin-top: 10px;
      display: block;
    }

@media (max-width: 1024px) {
      .image-item {
        flex: 1 1 calc(50% - 40px);
      }
    }

@media (max-width: 600px) {
      .image-item {
        flex: 1 1 100%;
      }

.navbar {
        padding: 10px;
      }

.navbar ul {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

.navbar.mobile.active ul {
        display: flex;
      }

.hamburger {
        display: flex;
        cursor: pointer;
      }

.hamburger div {
        background-color: #ff6347;
      }
    }

.footer {
      text-align: center;
      padding: 20px;
      background-color: #2a4d69;
      color: #fff;
      margin-top: 30px;
    }

.footer a {
      color: #ff6347;
      text-decoration: none;
    }

</style><div class="navbar-container" id="navbar-container"><nav class="navbar" id="navbar"><div class="hamburger" id="hamburger"><div><br></div><div><br></div><div><br></div></div><ul><li><a href="#section1">健康飲食</a></li><li><a href="#section2">運動保健</a></li><li><a href="#section3">日常生活</a></li><li><a href="#section4">社交互動</a></li><li><a href="#section5">休閒娛樂</a></li><li><a href="#section6">居家環境</a></li><li><a href="#section7">心理健康</a></li><li><a href="#section8">醫療健康</a></li><li><a href="#section9">數位學習</a></li><li><a href="#section10">常見問題</a></li></ul></nav></div><div class="section" id="section1"><h2>健康飲食</h2><p>維持均衡飲食對於健康至關重要，下面是一些營養建議。</p><div class="image-grid"><div class="image-item"><a href="#"><img src="https://via.placeholder.com/350x250.png?text=水果" alt="水果">水果與蔬菜</a></div><div class="image-item"><a href="#"><img src="https://via.placeholder.com/350x250.png?text=全穀" alt="全穀">全穀類</a></div><div class="image-item"><a href="#"><img src="https://via.placeholder.com/350x250.png?text=水分" alt="水分">保持水分</a></div></div></div><div class="section" id="section2"><h2>運動保健</h2><p>適當的運動有助於增強體能，改善身體健康。</p><div class="image-grid"><div class="image-item"><a href="#"></a></div></div></div>

文章資訊修改