trikeys 後台管理介面

標題

標籤

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

文章內容

<p>圖文導覽頁面</p><style>
	body {
		margin: 0;
		font-family: "Microsoft JhengHei", sans-serif;
		background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
		background-size: cover;
		background-attachment: fixed;
		font-size: 20px;
		color: #333;
	}
	
	.navbar {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.9);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}
	
	.navbar h1 {
		font-size: 28px;
		color: #004d40;
	}
	
	.nav-links {
		display: flex;
		gap: 30px;
	}
	
	.nav-item {
		position: relative;
	}
	
	.nav-item > a {
		font-size: 20px;
		color: #004d40;
		text-decoration: none;
		padding: 5px;
	}
	
	.nav-item:hover .dropdown {
		display: block;
	}
	
	.dropdown {
		display: none;
		position: absolute;
		background-color: #fff;
		border: 1px solid #ccc;
		top: 30px;
		left: 0;
		min-width: 150px;
		z-index: 1001;
	}
	
	.dropdown a {
		display: block;
		padding: 10px;
		color: #004d40;
		text-decoration: none;
		font-size: 18px;
	}
	
	.dropdown a:hover {
		background-color: #e0f2f1;
	}
	
	.content {
		padding-top: 100px;
	}
	
	.section {
		background-image: url('https://www.transparenttextures.com/patterns/white-wall-3.png');
		background-size: cover;
		padding: 40px 20px;
		margin: 30px;
		border-radius: 15px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}
	
	.section h2 {
		font-size: 32px;
		margin-bottom: 10px;
		color: #2a4d69;
	}
	
	.section p,
	.section li {
		font-size: 24px;
		line-height: 1.6;
	}
	
	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	
	.image-item {
		flex: 1 1 calc(25% - 20px);
		text-align: center;
	}
	
	.image-item img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		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: #004d40;
		display: block;
		margin-top: 10px;
		font-size: 22px;
	}
	
	@media (max-width: 768px) {
		.image-item {
			flex: 1 1 100%;
		}
		.navbar {
			flex-direction: column;
			align-items: flex-start;
		}
		.nav-links {
			flex-direction: column;
			gap: 10px;
			width: 100%;
		}
	}

</style><div class="navbar"><h1>圖文導覽</h1><div class="nav-links"><div class="nav-item"><a href="#health">健康</a><div class="dropdown"><a href="#section1">飲食</a>
<a href="#section2">運動</a></div></div><div class="nav-item"><a href="#life">生活</a><div class="dropdown"><a href="#section3">日常</a>
<a href="#section4">出行</a></div></div><div class="nav-item"><a href="#section10">實績</a></div></div></div><div class="content"><div class="section" id="section10"><h2>實績案例</h2><ul><li>我們已協助超過 100 位長輩成功進行數位導覽</li><li>導入圖片導覽系統於 5 個社區據點</li><li>提供圖文並茂的教學資源，方便理解與學習</li><li>設計適合長者操作的友善介面與大字體內容</li><li>每項圖文素材皆含可點擊的導覽說明與實地案例連結</li></ul></div><div class="section" id="health"><h2>健康專區</h2></div><div class="section" id="section1"><h2>區塊 1：健康飲食</h2><p>保持均衡的飲食能幫助身體維持良好的代謝與免疫功能。</p><div class="image-grid"><div class="image-item"><a href="#"><img src="/manasystem/FileData/FilesSummernote/Article/31E7F82B-A9BF-F12D-7444-701DAE26FFF1.jpg" alt="水果">健康水果</a></div><div class="image-item"><a href="#"><img src="/manasystem/FileData/FilesSummernote/Article/02A40E66-A2FC-66FC-746A-CA26B16EE0B9.jpg" alt="蔬菜">新鮮蔬菜</a></div><div class="image-item"><a href="#"><img src="/manasystem/FileData/FilesSummernote/Article/4E357E25-5650-2B10-236B-E91216B4EB9E.jpg" alt="穀物">全穀類</a></div><div class="image-item"><a href="#"><img src="/manasystem/FileData/FilesSummernote/Article/632F3697-AC0B-C782-22BE-8B653A109894.jpg" alt="水分">多喝水</a></div></div></div><div class="section" id="section2"><h2>區塊 2：日常運動</h2><p>規律運動能促進身體健康與心情愉快。</p></div><div class="section" id="life"><h2>生活專區</h2></div><div class="section" id="section3"><h2>區塊 3：日常照顧</h2><p>關心長輩日常生活，提升生活品質。</p></div><div class="section" id="section4"><h2>區塊 4：安全出行</h2><p>出門在外安全第一，注意交通與保護措施。</p></div></div>

文章資訊修改