首頁 (test)<![CDATA[<style type="text/css">.content-area {
padding: 20px;
max-width: 1200px;
margin: auto;
}
.content-nav {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.content-nav a {
flex: 1;
text-align: center;
padding: 15px 10px;
font-size: calc(16px + 0.5vw);
font-weight: bold;
background-color: #0056b3;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.content-nav a:hover {
background-color: #004494;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.content-card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.content-card:hover {
transform: translateY(-5px);
}
h3 {
color: #0056b3;
border-bottom: 2px solid #0056b3;
padding-bottom: 5px;
margin-bottom: 15px;
font-size: 24px;
/* 設定字體大小 */
font-weight: bold;
/* 確保字體加粗 */
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
padding: 8px 0;
}
.content-dropdown {
position: relative;
cursor: pointer;
}
.content-dropdown::after {
content: " ▼";
font-size: 14px;
color: black;
}
.content-dropdown-content {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px;
width: 250px;
padding: 10px;
z-index: 1;
}
.content-dropdown:hover .content-dropdown-content {
display: block;
}
.content-dropdown-content a {
display: block;
padding: 5px 10px;
color: #0056b3;
text-decoration: none;
}
.content-dropdown-content a:hover {
background-color: #ddd;
color: #0056b3;
}
.link-btn {
display: block;
padding: 5px 10px;
color: #0056b3;
text-decoration: underline;
border-radius: 5px;
transition: background-color 0.3s;
margin-bottom: 5px;
}
.link-btn:hover {
background-color: #ddd;
color: #0056b3;
font-weight: bold;
}
</style>
<div class="content-area">
<div class="content-nav"><a href="#" id="1-2">活動資訊</a> <a href="#" id="1-3">關於我們</a> <a href="#" id="1-4">學生諮詢</a> <a href="#" id="1-5">學分抵免</a> <a href="#" id="1-6">自習中心</a></div>
<div class="grid-container">
<div class="content-card">
<h3>教師教學精進</h3>
<ul>
<li>教師社群</li>
<li>教師專業培力工作坊</li>
<li>教師核心能力</li>
<li>教師評估</li>
</ul>
</div>
<div class="content-card">
<h3>教學獎勵</h3>
<ul>
<li><a class="link-btn" href="#" id="1-7">教師 / 教學獎</a></li>
<li><a class="link-btn" href="#" id="1-8">學生 / 優秀教學助理獎</a></li>
<li><a class="link-btn" href="#" id="1-9">課程 / 特色課程獎勵</a></li>
</ul>
</div>
<div class="content-card">
<h3>特色培力課程</h3>
<ul>
<li>激勵型教學</li>
<li>專業領域學習坊</li>
<li>微學分課程</li>
</ul>
</div>
<div class="content-card">
<h3>跨域學程</h3>
<ul>
<li><a class="link-btn" href="#" id="1-10">實施要點暨必修科目表</a></li>
<li><a class="link-btn" href="#" id="1-11">跨域學生講座活動</a></li>
<li><a class="link-btn" href="#" id="1-12">申請專區</a></li>
<li><a class="link-btn" href="#" id="1-13">各學程聯絡資訊</a></li>
</ul>
</div>
<div class="content-card">
<h3>學生學習增能</h3>
<ul>
<li>學習策略工坊</li>
<li>學術倫理教育</li>
<li>教學助理培訓課程</li>
<li class="content-dropdown">學生學習資源
<div class="content-dropdown-content"><a class="link-btn" href="#" id="1-14">課業輔導</a> <a class="link-btn" href="#" id="1-15">小班補充教學</a> <a class="link-btn" href="#" id="1-16">校級空間及設備借用系統</a> <a class="link-btn" href="#" id="1-17">微學分選課系統</a></div>
</li>
</ul>
</div>
<div class="content-card">
<h3>教學研究實踐</h3>
<ul>
<li><a class="link-btn" href="#" id="1-18">計畫重要訊息</a></li>
<li><a class="link-btn" href="#" id="1-19">計畫補助要點</a></li>
<li><a class="link-btn" href="#" id="1-20">計畫執行時程</a></li>
<li><a class="link-btn" href="#" id="1-21">計畫徵件與結案</a></li>
<li><a class="link-btn" href="#" id="1-22">教學實踐區域基地</a></li>
</ul>
</div>
<div class="content-card">
<h3>微學程</h3>
<ul>
<li><a class="link-btn" href="#" id="1-23">微學程特色與介紹</a></li>
<li><a class="link-btn" href="#" id="1-24">微學程一覽表</a></li>
<li><a class="link-btn" href="#" id="1-25">跨界力微學程</a></li>
<li><a class="link-btn" href="#" id="1-26">微學程募課資訊</a></li>
<li><a class="link-btn" href="#" id="1-27">各微學程聯絡窗口</a></li>
<li><a class="link-btn" href="#" id="1-28">辦法、表格與相關資料</a></li>
</ul>
</div>
</div>
</div>]]>