服務資訊
以屬性驅動區塊（num、top、bottom、bg-col、col）並由原生 JS 套用樣式的商務／主機代管形象頁，含 JS 產生的 SVG 弧形分隔。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-03-01 |
| 分類 | 商業網站範例 |
| HTML 檔案 | index.html |
| 原始碼 | target/20230301 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 導覽列（nav[num=1]） | 品牌「PARDN CHIU」、附箭頭的 ITEM 按鈕、「My Page」連結與漢堡鈕；捲動後加上 scroll class（nav-001-show 動畫）。 |
| 頁首（section[header=1]） | 紅到紫 .linear-bg-1 漸層主視覺，含標題、內文、Code / GitHub 按鈕與 Freepik 插圖（image/header.png）。 |
| 服務（num=1） | .r4 四張圖示卡（Apple / 桌機 / 資料庫 / 伺服器），上緣為 arc-down 弧形分隔。 |
| 圖片與資訊列表（num=2） | #F2F6FC 背景，陰影圖片搭配標題、內文與 4 個附 MORE 連結的子項目。 |
| VPS 方案（num=3） | 租用VPS / 網站代管：基本 888／進階 1688（強調）／高階 3360 三方案，.r3 排列含勾選規格列表。 |
| 步驟與行動呼籲（num=4） | 深色 #212831 色帶，.r2 排列 4 個編號項目（fa-1..fa-4）與附 MORE 按鈕的文字區。 |
| 人物卡（num=5） | 3 張卡片，含圖片、粗體名稱與內文。 |
| 特色亮點（num=6） | 兩張陰影卡附漸層圖示徽章，以 top: -4rem 上移。 |
| 行動列（num=8） | 標題與內文搭配靠右 MORE 按鈕。 |
| 頁尾（footer[num=1]） | 網站名稱、署名與社群圖示；ABOUT / PRODUCTS / TECHNICAL / LEGAL 連結欄；版權列含 Privacy Policy / Contact。 |
互動行為
- js/index.js：document.body.onscroll 於 scrollTop > 48 時切換 <nav> 的 scroll class。
- 屬性樣式處理：具 top / bottom / bg-col / col / bg-img 的元素被寫入 inline padding、背景色、文字色或背景圖；-- 開頭的值轉為 var(--...)。
- span[mask=arc / arc-up / arc-down / slash-left / slash-right / wave] 依視窗寬度替換為 inline SVG 分隔，填色取父層背景色。
- [unhover="1"] 元素於 mouseleave 時加上 unhover class 500ms。
- 漢堡鈕沒有作用中的事件（js/index.js 內切換程式碼已被註解）。
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| PDRenderKit (loaded, active page code does not use it) | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js (local) | - | js/index.js |
樣式
| 項目 | 內容 |
|---|---|
| SCSS 入口 | sass/index.scss |
| 輸出 CSS | css/index.css |
| Partials | nav/_001.scss, nav/_002.scss, nav/_body.scss, header/_001.scss, header/_002.scss, header/_003.scss, section/_000.scss ... _022.scss (incl. _015-top / _015-center / _015-bottom, _rm-1st-top), footer/_001.scss, comp/_div-info.scss, comp/_innerText.scss, comp/_li-r2.scss, comp/_li-r3.scss, comp/_li-r4.scss, comp/_ul-button.scss, comp/_w-h-rate.scss, component/_info.scss |
入口定義 --size-* / --h-* 字級變數、reset、.shadow / .border 工具類，並引入編號模組庫：nav 001-002、header 001-003、section 000-022、footer 001（以 section[num=N] / header=N 選取）。comp partial（r2 / r3 / r4 列表、按鈕、info）於各 section 內引入。本頁僅用部分模組。
cd target/20230301
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- 以屬性選取編號區塊模組（section[num="N"]、section[header="1"]、footer[num="1"]）。
- 執行期產生 inline SVG（二次曲線弧、斜切、三層波浪）作為區塊分隔。
- inline <style> :root 變數：--col-nav #212831、--col-system #00BB95、--col-border、--max-width 1100px；.linear-bg-1 漸層工具類。
- 混用 min-width / max-width 斷點（413 / 479 / 639 / 799 / 1023 / 1139px 與 480 / 640 / 768 / 1024 / 1040px）。
- a::before content: attr(freepik) 作為圖片來源標示浮水印。
外部資源
https://fakeimg.pl/1024/282828/eae0d0/?text=sample- https://www.freepik.com/free-vector/programmer-working-with-css_5480318.htm (illustration link)
https://pardn.io/image/head.pnghttps://pardn.io/web-template/image/20230301.jpg- image/header.png (relative, written as src=" image/header.png" with a leading space; included in folder)