# 基礎版型 220409 以 PDWebsitemplate 模組（T002、C004、C013、C006、C014、C007、B001）透過 sn 屬性組成的靜態形象頁，綠色主題。 ## 概要 | 項目 | 內容 | |---|---| | 製作日期 | 2022-04-09 | | 分類 | 商業網站範例 | | HTML 檔案 | `index.html` | | 原始碼 | [target/20220409](https://github.com/pardnio/demo-web/tree/main/target/20220409) | ## 即時預覽 [在新分頁開啟範例](/target/20220409/) ## 頁面區塊 | 區塊 | 說明 | |---|---| | T002 主視覺與固定導覽列 | 背景圖主視覺，固定 4rem 導覽列（標題、連結、hover 下拉「列表」），副標、標題、內文與 Code / GitHub 按鈕。 | | C004 圖示卡片 | 3 欄（df="x3"）共 6 張卡，各含 Font Awesome 圖示、標題與內文。 | | C013 服務項目 | 背景圖區塊，4 個圖示文字服務項目與一張圖片並排。 | | C006 價格方案 | 三種 VPS 方案（每月 888 / 1688 / 3360），列出規格並附 Email 按鈕。 | | C014 雙宣傳卡 | 背景圖上兩張 figure 卡（圖片＋說明）與描述文字。 | | C007 文章卡片 | 兩張文章卡：圖片、標題連結、作者／公司／標籤資訊列與摘要。 | | B001 頁尾 | 3 欄頁尾：BC001 公司介紹、BC005 連結與社群圖示、BC002 連結列表，下方版權列。 | ## 相依資源 | 名稱 | 版本 | 來源 | |---|---|---| | Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css | | Noto Sans TC (Google Fonts) | wght 100;300;400;500;700;900 | https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap | | Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX | ## 樣式 | 項目 | 內容 | |---|---| | SCSS 入口 | `sass/PDWebsitemplate.min.scss` | | 輸出 CSS | `css/PDWebsitemplate.min.css` | | Partials | `function/_hsbTohsl.scss`, `_init.scss`, `_PDModuleTop.scss (top/_T-001, _T-002, _T-003, _T004)`, `_PDModuleColum.scss (colum/_C001..._C019)`, `_PDModuleBottom.scss (bottom/_B001-_B003, _BC001-_BC006)`, `_PDModuleAnimation.scss`, `_PDModuleComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)`, `_header-0.scss`, `_section-1.scss` | 即使頁面只用 7 個模組仍編譯整套模組庫；每個模組以 div[sn=XXXX] 為範圍，並以 ::after 依 --module-hint 顯示模組代號。sass/index.scss（含 _header-0、_section-1）是頁面未引用的另一個殘留入口。 ```bash cd target/20220409 npx sass sass/PDWebsitemplate.min.scss css/PDWebsitemplate.min.css --no-source-map || exit 1 ``` ## 使用技巧 - 屬性驅動模組：sn="T002" 等選擇模組樣式；df="x2/x3" 欄數、df="btn fff col xl" 按鈕變化、wh="1" 圖片外框、df="sd" 陰影卡。 - 主題以 inline <style> 於 * 設定 CSS 變數：--col-sys（綠 rgb(30,120,50)）、--max-width 1140px、--default-radius 0.25rem、--module-hint 1。 - 桌面優先 max-width 斷點（413 / 479 / 639 / 767 / 959 / 1023px），並以 (hover: hover) and (pointer: fine) 搭配 keyframe 顏色過場處理 hover。 - 導覽列為純 CSS hover 下拉；640px 以下連結隱藏（display: none）。 ## 外部資源 - `https://fakeimg.pl/1024/282828/eae0d0/?text=sample` - `https://pardn.io/image/head.png` - `https://pardn.io/web-template/image/20220409.jpg` - /sample2, /sample2/gallery, /sample2/blog (root-absolute nav links) - ../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder) ## 已知問題 - Nav links /sample2, /sample2/gallery and /sample2/blog are root-absolute and point to pages that do not exist. CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg) and url(../image/bg-m.svg) resolve to <folder>/icon and <folder>/image, which are not in the folder (bg-l.svg is overridden by inline background-image). The mobile menu <img df="nvb"> has an empty src, its icon CSS is commented out and no JS is loaded, so links are unreachable below 640px. ## 相關頁面 - [專案結構](/zh/project-structure) - [樣式工作流程](/zh/styling-workflow) - [框架使用](/zh/frameworks)