CSS

【CSS】css demo 1
【Tailwind Css】相關
CSS_斜切角實現
【CSS】inline, block, inline-block 比較
【CSS】特殊屬性工具網站

【CSS】css demo 1

body {font:13px/20px Microsoft JhengHei, Helvetica; margin:0px; padding:0px; font-family: Microsoft JhengHei}
select {font-family: Microsoft JhengHei, Helvetica;}

.login .msgArea {display:none}

.header {background-color:#E40080; height:124px; border-bottom:6px solid #FFDD33; text-align:center}
.wrapArea {width:1200px; margin:0px auto}

.header img {margin:29px 0px 12px}
.header h2 {margin:0px; padding:0px}
.header h2 span {width:204px; font:15px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; padding:0px 5px; display:inline-block}

.msgArea {background-color:#444444; height:48px; text-align:right}
.msgArea p {height:48px; font:13px/48px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px; padding:0px 20px 0px 0px; display:inline-block}
.msgArea p span {font:bold 13px/48px Microsoft JhengHei, Helvetica; padding:0px 0px 0px 10px}
.msgArea a {float:right; width:85px; height:48px; display:inline-block}
.msgArea a img {display:none}
.msgArea a img:first-child {display:inline-block}
.msgArea a:hover img {display:inline-block}
.msgArea a:hover img:first-child {display:none}

.footer {text-align:center; padding:15px 0px; border-top:1px solid #FFDD33}
.footer p {font:12px/18px Microsoft JhengHei, Helvetica; letter-spacing:1px; color:#706E6E; margin:0px; padding:0px}

/** 登入框 **/
.loginArea {width:290px; margin:100px auto}
.loginArea h1 {margin:0px 0px 10px; padding:0px 0px 10px; border-bottom:1px dashed #444444}
.loginArea dl,
.loginArea dl dt,
.loginArea dl dd {margin:0px; padding:0px}
.loginArea dl dd {padding:8px 0px; position:relative}
.loginArea dl dd b {width:80px; text-align:right; color:#444444; display:inline-block}
.loginArea dl dd input {height:25px; font:13px/25px Microsoft JhengHei, Helvetica; color:#000000; padding:0px 6px; border:1px solid #C2C0C0}
.loginArea dl dd .code[type="text"] {width:100px; margin:0px 26px 0px 0px}
.loginArea dl dd img {position:absolute; top:9px}
.loginArea dl dt {margin:21px 0px 0px}
.loginArea dl dt input[type="submit"] {background-color:#FD98D1; width:100%; height:40px; font:bold 20px/40px Microsoft JhengHei, Helvetica; color:#FFFFFF; border:0px; border-radius:5px; cursor:pointer}

/** 中間主文區 **/
.inner {padding:30px 0px}

/** 主選單 **/
.menuArea { background-color: rgba(13, 144, 144, 0.69); height:auto; margin:0px 0px 5px}
.menuArea ul {width:90%; height:auto; margin:0 30px 0 30px; padding:0px; list-style:none; display:inline-block}
.menuArea ul li {float:left; height:40px}
.menuArea ul li a {font:15px/40px Microsoft JhengHei, Helvetica; color:#FFFFFF; text-align:center; padding:0px 15px; border-left:1px dotted #f1f0f0; cursor:pointer; text-decoration: none;}
.menuArea ul li:first-child a {border-left:0px}
.menuArea ul li dl,
.menuArea ul li dd {margin:0px; padding:0px}
.menuArea ul li dl {background-color:#FFFFFF; margin:-4px 0px 0px; border:4px solid #444444; border-radius:5px; position:relative; z-index:1; display:none}
.menuArea ul li dd a {background:transparent url(http://mapp.momoshop.com.tw/mapp/images/icon_MenuDot.png) no-repeat 8px 16px ; height:auto; font:13px/20px Microsoft JhengHei, Helvetica; color:#706E6E; text-align:left; text-decoration:none; padding:10px 0px 10px 20px; border:0px; display:block; cursor:pointer}
.menuArea ul li dd a:hover {background-color:#E8E8E8; color:#E40080}
.menuArea ul li:hover dl {display:block}

/** 麵包屑 **/
.breadCrumb {background-color:#FFE7F4; height:20px; border-left:4px solid #E40080; margin:0px; padding:0px 0px 0px 5px}
.breadCrumb dl,
.breadCrumb dt,
.breadCrumb dd {float:left; margin:0px; padding:0px}
.breadCrumb dd {margin:0px 0px 0px 5px}
.breadCrumb dd span {margin:0px 5px 0px 0px}
.breadCrumb a {color:#000000; text-decoration:none}
.breadCrumb a:hover {color:#E40080}

/** 主文區 **/
.contentArea {margin:20px 0px 0px}

/** 搜尋條件 **/
.searchArea {padding:0px 0px 20px 0px; border-bottom:1px dotted #B1B0B0}
.searchArea ul {margin:0px; padding:0px; list-style:none; border-radius: 6px;}
.searchArea ul li {min-height:30px; margin:5px 0px; position:relative}
.searchArea ul li b {width:90px; height:25px; font:13px/28px Microsoft JhengHei, Helvetica; text-align:right; display:inline-block}
.searchArea ul li input {width:150px; height:25px; font:13px/25px Microsoft JhengHei, Helvetica; border:1px solid #C2C0C0; padding:0px 0px 0px 6px}
.searchArea ul li input[type="submit"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer}
.searchArea ul li input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer}
.searchArea ul li input[type="file"] {width:180px; height:25px; font:13px/25px Microsoft JhengHei, Helvetica; border:0px; padding:0px 0px 0px 6px}
.searchArea ul li img {vertical-align:middle}
.searchArea ul li select {width:158px; padding:4px 6px; border:1px solid #C2C0C0}
.searchArea ul li select[class="small"] {width:80px; padding:4px 6px; border:1px solid #C2C0C0}
.searchArea ul li textarea {font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:5px 10px; border:1px solid #C2C0C0; resize:none}
.searchArea ul li input[name="promo_url"] {width:330px}
.pushDataArea input[type="submit"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer;float: right;margin-right: 30px;top: 5px;}
.pushDataArea input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; position:relative; top:-1px; cursor:pointer;float: right;margin-right: 30px;top: 5px;}


/** 功能按鈕區 **/
.featuresBtnArea {width:100%; height:50px; display:inline-block}
.featuresBtnArea ul,
.featuresBtnArea ul li {float:right; margin:0px; padding:0px; list-style:none}
.featuresBtnArea ul {margin:11px 0px 0px}
.featuresBtnArea ul li input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; cursor:pointer}
.featuresBtnArea p {font:13px/50px Microsoft JhengHei, Helvetica; margin:0px; padding:0px; display:none}
.featuresBtnArea p span {color:#E40080; padding:0px 4px; display:none}

/** 查詢結果區 **/
.resultArea table th,
.resultArea table td {padding:5px 8px; text-align:center}
.resultArea table thead th {background-color:#5c5a5a; font:bold 13px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF}
.resultArea tbody td {border-bottom:1px solid #BDBCBC}
.resultArea tbody td ul {margin:0px; padding:0px; list-style:none}
.resultArea tbody td ul li {display:inline-block; padding-bottom:3px;}
.resultArea tbody td ul li input {background-color:#FFDD33; font:13px/25px Microsoft JhengHei, Helvetica; color:#000000; margin:0px 5px; padding:3px 13px; border:0px; border-radius:5px; cursor:pointer}
.resultArea tbody td ul li input[disabled="true"] {background-color:#E8E8E8; color:#706E6E; cursor:default}
.resultArea tbody td input[type="number"] {text-align:right;margin:3px;width:70px;font-weight: bold;color: brown;}

.resultArea2 table th,
.resultArea2 table td {padding:5px 8px; text-align:center}
.resultArea2 table thead th {background-color:#444444; font:bold 13px/20px Microsoft JhengHei, Helvetica; color:#FFFFFF}
.resultArea2 tbody td {border-bottom:1px solid #BDBCBC; text-align: center;}
.resultArea2 tbody td:nth-child(2n+1) {background-color:#F1F0F0}
.resultArea2 tbody td:nth-child(15) {text-align:left;}
.resultArea2 tbody td:nth-child(19) {text-align:left;}
.resultArea2 tbody td:nth-child(22) {text-align:left;}
.resultArea2 tbody td:nth-child(2) {color: #9C9C9C;}
.resultArea2 tbody td:nth-child(26) {color: #9C9C9C;}
.resultArea2 tbody td p {color: #E40080; margin: 0;}
.resultArea2 tbody td p2 {color: #8000E4;}
.resultArea2 tbody td a {text-decoration: none;color: #0083e8;}

/** 頁次區 **/
.pageArea {display:none}
.pageArea ul {margin:20px 0px 0px; padding:0px; list-style:none}
.pageArea ul li {width:30px; height:30px; font:13px/31px Microsoft JhengHei, Helvetica; color:#999999; margin-right: 5px; text-align:center; border:1px solid #DDDDDD; display:inline-block; overflow:hidden; cursor:pointer}
.pageArea ul li:hover {background-color:#EAEAEA; color:#666666; border-color:#777777}
.pageArea ul .selected {background-color:#999999; font:bold 13px/31px Microsoft JhengHei, Helvetica; color:#FFFFFF; border-color:#999999}
.pageArea dl {float:right; margin:0px; padding:0px}
.pageArea dl dt,
.pageArea dl dd {height:30px; margin:0px 0px 0px 10px; padding:0px; display:inline-block}
.pageArea dl dt b {font:13px/31px Microsoft JhengHei, Helvetica; color:#E40080; padding:0px 4px}
.pageArea dl dd {font:13px/31px Microsoft JhengHei, Helvetica; color:#999999; padding:0px 10px; border:1px solid #DDDDDD; cursor:pointer}
.pageArea dl dd:hover {background-color:#EAEAEA; color:#666666; border-color:#777777}

/** 推播訊息浮層 **/
.pushDataArea {background-color:#FFFFFF; border-radius:10px; position:absolute; top:0px; left:0px; z-index:2; display:none}
.pushDataArea h2 {background-color:#444444; height:30px; font:bold 13px/30px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px; padding:0px 10px; border-radius:10px 10px 0px 0px}
.pushDataArea h2 a {float:right; height:30px; margin:0px -10px 0px 0px; padding:0px 15px; border-radius:0px 10px 0px 0px; cursor:pointer}
.pushDataArea h2 a:hover {background-color:#FFFFFF; color:#000000}
.pushDataArea .dataArea {padding:10px}
.pushDataArea .dataArea table th,
.pushDataArea .dataArea table td {background-color:#F1F0F0; height:40px; padding:5px 10px; border-bottom:1px solid #D1CFCF}
.pushDataArea .dataArea table th {background-color:#444444; width:60px; text-align:right; color:#FFFFFF; border-bottom:1px solid #FFFFFF; padding:5px 20px}
.pushDataArea .dataArea table td input {width:220px; height:25px; font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:0px 10px; border:1px solid #C2C0C0}
.pushDataArea .dataArea table td img {vertical-align:middle}
.pushDataArea .dataArea table td select {padding:3px 6px; border:1px solid #C2C0C0; position:relative; top:1px}
.pushDataArea .dataArea table td textarea {width:600px; font:13px/20px Microsoft JhengHei, Helvetica; color:#4C4C4C; padding:5px 10px; border:1px solid #C2C0C0; resize:none}
.pushDataArea .dataArea table td input[name="goodsUrl"] {width:600px}
.pushDataArea .dataArea table td input[disabled="disabled"] {background-color:#4682B4; color:#FFFFFF; border-color:#4682B4}
.pushDataArea .dataArea table #goodsCodeTr,
.pushDataArea .dataArea table #orderTimeTr,
.pushDataArea .dataArea table #fsCodeTr,
.pushDataArea .dataArea table #gaCodeTr {display:none}
.pushDataArea .btnArea {padding:10px 0px 20px; text-align:center}
.pushDataArea .btnArea input[type="button"] {background-color:#E40080; width:auto; height:27px; font:bold 13px/27px Microsoft JhengHei, Helvetica; color:#FFFFFF; margin:0px 0px 0px 5px; padding:0px 20px; border:0px; border-radius:3px; cursor:pointer}
.pushDataArea .dataArea table td input[type=file] {background-color:#FFFFFF; width:auto; border:0px; border-bottom:1px solid #C2C0C0; padding:0px}
.pushDataArea .dataArea table td input[type=button] {background-color:#E40080; width:auto; color:#FFFFFF; height:auto; border:1px solid #E40080; border-radius:4px; margin:0px 0px 0px 5px; cursor:pointer}

.sample {margin:0px 0px 0px 10px}

/**隱藏圖示的css **/
div.showLoading {padding:10px; position:absolute; top:0px; left:0px; z-index:5; display:none}
/**背景白幕的css **/
.whiteBk000 {background-color:#FFFFFF; opacity:0.5; filter:alpha(opacity=50); position:absolute; top:0px; left:0px; z-index:4;display:none;}

#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 10px 15px;
    font-size: 18px;
    background: #e63fa1;
    color: white;
    cursor: pointer;
    z-index: 99999;
    border-radius: 20px;
}

【Tailwind Css】相關

vscode extension

取消 validate 驗證

初始化專案

npm install -D tailwindcss
npx tailwindcss init

CSS_斜切角實現

纯CSS斜切角实现 - notes (gitbook.io)

【CSS】inline, block, inline-block 比較

當然可以！以下是一份完整對比 inline、block、inline-block 以及其他 相似概念的屬性（如 flex、grid） 的整理，幫你從「排列方式、寬高設定、用途」等角度快速掌握它們的差異：

✅ display 類型比較總覽表

特性/類型	`inline`	`block`	`inline-block`	`flex`	`grid`
是否換行	❌ 不會	✅ 會	❌ 不會	❌ 子元素可橫向排列	❌ 預設橫向排列
可否設寬高	❌ 不行（無效）	✅ 可以	✅ 可以	✅ 可以	✅ 可以
子元素排列方式	橫向排列	垂直排列	橫向排列	橫向（可變）	依格線排列（2D）
是否可佔整行	❌	✅	❌	❌（看內容/設定）	❌（看格線配置）
適合用來	文字、行內元素	區塊、段落、容器	輕量橫向組件（按鈕等）	排列多個項目（卡片、列）	複雜版面、表格、卡片區塊
可否放 block 元素	❌	✅	✅	✅	✅

✅ 說明重點

🔹 `inline`

僅佔內容寬度，不換行
無法設定寬高
適合用於 <span>, <a>, <strong> 等

🔹 `block`

自動換行，佔滿整行
可設定寬高
適合用於 <div>, <p>, <section> 等

🔹 `inline-block`

類似 inline，可以水平排列
同時擁有 block 的能力：可以設定寬高
適合做「按鈕、badge、圖片說明」等不佔整行的小元件

🔹 `flex`（父元素設 `display: flex`）

子元素預設橫向排列
可用 justify-content, align-items 控制對齊方式
適合用於橫向 layout, 排卡片、工具列等

🔹 `grid`（父元素設 `display: grid`）

子元素依格線排列，可橫可縱
適合做表格式、欄位分佈清楚的 layout
高度彈性，可定義欄/列寬度、跨欄等

✅ 總結建議（選擇指引）

想做的事	建議使用
行內放文字（無寬高）	`inline`
單區塊、自然上下排列	`block`
要設定寬高又要橫向排列	`inline-block`
排列表現靈活（橫、對齊）	`flex`
網格狀、表格排版需求	`grid`

`inline-block` 是否可以取代 `inline` ?

✅ 簡答：

可以，但要小心。inline-block 在大多數情況下可以取代 inline，但它們在行為上仍有差異，直接替換可能會造成版面細節不同。

🔍 詳細說明：`inline-block` 取代 `inline` 的注意事項

比較面向	`inline`	`inline-block`	差異是否影響？
橫向排列	✅ 會	✅ 會	✅ 相同
寬高控制	❌ 無效	✅ 可控制寬高	✅ 有差異
padding / margin 上下	❌ 通常無效或不穩定	✅ 完全有效	✅ 有差異
baseline 對齊	✅ 與文字 baseline 對齊	⚠️ 有時偏移（可能上下出現間隙）	✅ 有差異
line-height 影響	✅ 受影響，與文字同行	✅ 也受影響，但更像方塊	⚠️ 可能導致意外間距
內容包覆	✅ 只包住文字寬度	✅ 包覆內容，也可設定寬高	✅ 相同
應用範圍	文字、icon 等純行內項目	小區塊元件：按鈕、badge、icon + 文字等	✅ 可取代但需測試

✅ 什麼情況可以直接用 `inline-block` 取代？

✔ 適合：

需要讓元素「並排」但又想控制寬高、padding、border
你不在意 baseline 對齊細節（或可調整）
你正在做「可重用的元件」如：按鈕、標籤、商品卡片

❌ 不適合：

像 <span> 這類行內字串包裹，如果替換成 inline-block，可能會造成行高偏移或上下出現奇怪的間距
想精準維持與文字「垂直對齊」的行為

🧪 實驗範例

<p>
  Hello <span style="display:inline; background:yellow">inline</span> world!
</p>
<p>
  Hello <span style="display:inline-block; background:lightblue">inline-block</span> world!
</p>

你會發現：

inline 看起來比較貼齊文字
inline-block 會有高度感，若沒特別控制 vertical-align，可能偏離 baseline

🎯 結論

問題	答案
`inline-block` 可以取代 `inline` 嗎？	✅ 可以，但不完全等效
有什麼副作用？	⚠️ 行高變化、baseline 偏移、可能多出空隙
要不要取代？	📌 如果需要控制寬高 → 用 `inline-block`；只包字串就繼續用 `inline`

【CSS】特殊屬性工具網站

要查詢這些 CSS 特殊屬性、瀏覽器前綴（Vendor Prefixes）以及相容性，以下這幾個網站是前端工程師必備的「軍火庫」：

1. Can I Use (最權威的相容性查詢)

這是全球開發者最常用的網站。只要輸入屬性名稱（例如 scrollbar-width），它就會用紅綠格子告訴你哪些瀏覽器支援、從哪個版本開始支援。

特點： 提供精確的市佔率數據，讓你決定是否需要寫備用方案（Fallback）。
網址： caniuse.com

2. MDN Web Docs (開發者的百科全書)

由 Mozilla 維護，是學習 Web 技術最完整的地方。除了教你怎麼用，它還會列出所有非標準的屬性（Non-standard）。

特點： 如果一個屬性前面有「小黃色驚嘆號」或「燒瓶圖示」，就代表它是實驗性或非標準的屬性。
網址： developer.mozilla.org

3. Autoprefixer (自動補全前綴的工具)

雖然不是查詢網站，但它是現代開發（如 Vite, Webpack, Next.js）背後的核心。你只需要寫標準的 CSS，它會自動幫你補上 -webkit-、-ms- 等前綴。

線上測試版： Autoprefixer Online
用法： 你可以把你寫的 CSS 貼左邊，它會自動在右邊產出相容性最高的版本。

4. CSS-Tricks (實戰攻略站)

這是一個著名的部落格，專門針對各種「難搞」的 CSS 問題寫深入淺出的文章。

特點： 關於捲軸（Scrollbar）的自定義，他們有一篇非常有名的攻略文：The Current State of Styling Scrollbars。
網址： css-tricks.com

總結建議

查能不能用： 去 Can I Use。
查怎麼寫、原理是什麼： 去 MDN。
懶得自己寫前綴： 設定好你的開發環境（如 Tailwind 或 PostCSS），讓 Autoprefixer 幫你處理。

順帶一提，如果你是用 VS Code 開發，建議安裝一個叫 "Can I Use" 的擴充功能，這樣你在寫 CSS 時直接選取文字就能快速查詢，非常方便！

CSS