閒時一筆

發表文章

目前顯示的是有「Web」標籤的文章

[CSS]Jquery + CSS 翻頁特效 / 換頁特效

- 10月 16, 2023

Jquery + CSS 翻頁特效 / 換頁特效以下效果圖︰ Midland Realty Page 1 Page 2 Page 3 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <title>Midland Realty</title> <style type="text/css"> body { margin: 0px; box-sizing: border-box; background-color: #FFFFFF; } #slideshow { width: 300px; height: 250px; background-color: sandybrown; position: relative; } .pageWrapper{ width: 100%; height: 100%; position: absolute; border: 2px solid red; } </style> <script src=...

[實用工具]分租式單位電費單計算機

- 2月 29, 2020

[實用工具] 分租式單位電費單計算機｜Jayson Chan 📋 分租式單位電費單計算機｜房東必備工具作者：Jayson Chan · 實用工具 · 輕鬆分攤電費 📌 為什麼需要這個工具？對於分租套房或公寓的房東，每個月的電費單總是讓人心煩——總電費要如何公平地分攤給每一位房客？台電的電費單只有一個總金額和總用電度數，若每個房間都有獨立電錶，就可以透過「房間用電 + 公共用電」的方式精確計算。這個計算機正是為此而生，只要輸入總電費、總度數、房間數量及每間房間的抄錶讀數，就能自動算出每間房應繳的金額，包含個人用電與分攤的公共電費。 🧮 計算邏輯說明每度電單價 = 總金額 ÷ 總用電度數房間使用度數 = 本期抄錶 − 上期抄錶房間個人電費 = 房間使用度數 × 每度單價公共用電度數 = 總用電度數 − 所有房間使用度數總和公共電費 = 公共用電度數 × 每度單價每間分攤公共電費 = 公共電費 ÷ 房間數房間總費用 = 房間個人電費 + 分攤公共電費計算結果會以表格詳細列出每間房的抄錶資料、用電度數、個人電費、公共電費分攤及應繳總額。 ✍️ 使用步驟（圖文對照）填寫基本資料：在下方表單輸入「應繳總金額」和「總用電度數」（可參考電費單），以及「分租單位數（房間數）」。產生房間輸入表格：輸入房間數後，下方會自動出現對應房號的「本期抄錶」與「上期抄錶」欄位。請依序填入每個房間的獨立電錶讀數。（注意：本期抄錶必須大於或等於上期抄錶，否則會出現錯誤提示）按下「計算開始」：系統會檢查所有欄位是否填寫正確（例如所有房間使用度數總和不得超過總...

[CSS] RWD Website Media-Query-Template

- 2月 29, 2020

Media Query範本方便設計RWD網頁。 @media (min-width: 1281px) { /*CSS For this device*/ } @media (min-width: 1025px) and (max-width: 1280px) { /*CSS For this device*/ } @media (min-width: 768px) and (max-width: 1024px) { /*CSS For this device*/ } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { /*CSS For this device*/ } @media (min-width: 481px) and (max-width: 767px) { /*CSS For this device*/ } @media (min-width: 320px) and (max-width: 480px) { /*CSS For this device*/ }

[CSS]Box-Sizing

- 2月 28, 2020

暸解CSS屬性[box-sizing] 我們經常在網路上看別人寫css時，會先設定 *{ margin:0; padding:0; box-sizing:border-box; } 為什麼要將box-sizing的value設定成 border-box 呢？這是為了方便設計師計算網頁頁面元素的長寬。