Tony 線上美語 - 課程導覽
Tony線上美語家教
Popup Slide-in from Left GEPT ------------------------------------------ CSS-Only 垂直按鈕與公告面板 (左側, 固定關閉按鈕) 📢 最新消息+優惠課程 --------------------------------- 預約按鈕與滑出面板 📅 點選預約體驗課程 --------------------------------------------- /* --- Panel Content --- */ #announcement-panel-content { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 500px; /* 或你的其他設定 */ background-color: white; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; /* 為了容納左側的關閉按鈕,增加左邊內距 */ /* 這個值需要根據你的按鈕寬度和期望的間距調整 */ padding-left: 50px; /* << 新增:為按鈕騰出空間 */ box-sizing: border-box; /* << 新增:確保 padding 不會增加總寬度 (如果 max-width 是基於 content-box) */ } /* --- Close Button (NEW POSITION: Inside panel's left padding area) --- */ .panel-close-btn { position: absolute; top: 50%; left: 0; /* 定位到 #announcement-panel-content 的最左邊 (padding 區域的開始) */ transform: translateY(-50%); /* 僅垂直居中 */ /* 不再需要 translateX(-100%) */ width: 50px; /* << 新增/修改:按鈕的寬度,應與 #announcement-panel-content 的 padding-left 匹配或稍小 */ height: auto; /* 或者設定一個固定高度 */ background-color: #e53935; color: white; font-size: 24px; font-weight: bold; text-decoration: none; line-height: 1; /* padding: 12px 0; */ /* 調整 padding 使叉叉在按鈕內居中 */ display: flex; /* << 新增:方便居中叉叉 */ align-items: center; /* << 新增:垂直居中叉叉 */ justify-content: center; /* << 新增:水平居中叉叉 */ border-radius: 0; /* 可以考慮只圓角右邊:border-radius: 0 8px 8px 0; 如果希望它看起來像個tab */ /* 如果希望按鈕是方形的,可以設定 height: 50px; padding: 0; */ z-index: 15; cursor: pointer; box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* 可選,調整陰影方向 */ transition: background-color 0.2s; } .panel-close-btn span { /* 如果叉叉不是直接文字,而是放在span裡 */ display: block; } /* --- Panel Header (Sticky) --- */ #announcement-header { background-color: #e53935; color: white; padding: 10px 15px; font-size: 18px; font-weight: bold; position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; align-items: center; text-align: center; /* 因為父容器有 padding-left,header 和 content 的有效寬度會減少 */ /* 如果 header/content 需要佔滿扣除 padding 後的寬度,它們的 width 預設就是 auto (塊級元素) */ /* 或者如果它們之前有 width: 100%,這裡不需要改,因為它們會是 padding-box 的 100% */ } #announcement-header::before { content: '🏷️ 最新消息+優惠課程'; } #announcement-content { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; /* 這個 padding 是內容區的 padding,與 panel 的 padding-left 分開 */ font-size: 16px; line-height: 1.6; color: #333; /* 同樣,有效寬度會是父容器 content-box 的寬度 */ } /* 響應式調整中也需要考慮按鈕和 padding */ @media (min-width: 768px) { #announcement-panel-content { padding-left: 55px; /* 可調整 */ max-width: 450px; /* 保持原樣或調整 */ } .panel-close-btn { width: 55px; /* 匹配 padding-left */ font-size: 26px; /* padding: 12px 0; */ } /* ... 其他原有的響應式調整 ... */ } @media (min-width: 1024px) { #announcement-panel-content { padding-left: 60px; /* 可調整 */ max-width: 500px; /* 保持原樣或調整 */ } .panel-close-btn { width: 60px; /* 匹配 padding-left */ font-size: 28px; /* padding: 14px 0; */ } /* ... 其他原有的響應式調整 ... */ } ------------------------------------------- --- -- ------ ------- ------------- --- -- ------------- 上方跑馬燈 (修正 Logo 遮擋)
學生成就
🎉🥳恭喜Sarah, 小六通過全民英檢初級, 順利取得證書🎉(口說,寫作高分通過) 🎉🏆🥳恭喜Toby 114年全國實作及創意競賽第一名 🎉(【専題組】海事群第一名) 🎉 🎉🥳恭喜學生Andy.H 順利取得美國綠卡 🎉(永久居留權,工作權) 🎓恭喜學生Eason .H 114年度考取國立新營高工🎓恭喜 Bella 考取教育推廣學系碩士榜首(國立體育大學114 學年度 ) 🎓恭喜 Yolanda 錄取中興大學碩士班(114年度圖書資訊學研究所) 🎓恭喜 Queenie 錄取臺灣大學碩士班(園藝暨景觀學系) ✍️恭喜 Cherry 學測作文 16.5 分✍️恭喜 學員Wilson 通過全民英檢中級初試 🏆恭賀 Oliver 小四通過全民英檢初級 🎓 恭喜Ian 考取彰化師範大學碩士班, (統計資訊研究所) 🎉🥳恭喜Sarah, 小六通過全民英檢初級, 順利取得證書🎉(口說,寫作高分通過) 🎉🏆🥳恭喜Toby 114年全國實作及創意競賽第一名 🎉(【専題組】海事群第一名) 🎉 🎉🥳恭喜學生Andy.H 順利取得美國綠卡 🎉(永久居留權,工作權) 🎓🎉恭喜學生Eason .H 114年度考取國立新營高工🎓恭喜 Bella 考取教育推廣學系碩士榜首(國立體育大學114 學年度 ) 🎓恭喜 Yolanda 錄取中興大學碩士班(114年度圖書資訊學研究所) 🎓恭喜 Queenie 錄取臺灣大學碩士班(園藝暨景觀學系) ✍️恭喜 Cherry 學測作文 16.5 分✍️恭喜 學員Wilson 通過全民英檢中級初試 🏆恭賀 Oliver 小四通過全民英檢初級 🎓 恭喜Ian 考取彰化師範大學碩士班, (統計資訊研究所)
----