採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
December 5, 2022
因為重新安裝系統，最近常常增加自己的部落格內容，以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多，需要做些CSS視覺修改，好分辨在眾多的標題與文章間的視覺修正，好讓閱讀者有較好的視覺引導
▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）
▼手機版還算清楚，所以沒有動到手機版的視覺修正
▼使用chrome檢視這行程式碼
▼按F12後，找到這段程式碼，應該是之下的 h4
▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）
▼手機版還算清楚，所以沒有動到手機版的視覺修正
▼使用chrome檢視這行程式碼
▼按F12後，找到這段程式碼，應該是之下的 h4
April 15, 2021
為了客戶要在就程式中加上某些功能，又不能動到inc模組的狀況下，改變CSS版型，就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義，除了first-child, last-child 的方法，之外 nth-child（n）也是不錯的用法，但是要多注意上層的 Class 定義，才能完美定義出自己想要的CSS3樣式。
以table tr 元素為例：
odd：為奇數
nth-child(odd)
tr:nth-child(odd){background:#808080}
even：為偶數
tr:nth-child(odd){background:#808080}
n可放入數字：以 ul li 元素為例：
前方開始的用法：
:nth-child(n)
December 21, 2020
我們製作的Bo-Blog 金流插件也有個列印收據的功能，為符合客戶需求，客戶因為有許多收據單，希望能夠不列印收據表格，把需要的文字資料列印出來。針對這個選項，介紹一下我們在金流插件中的選項與列印功能。
備註：因為每一家印表機功能與列印界線的問題，原始設定為另外一台雷射印表機，後來客戶搬家使用另外一台印表機，使用者設定被安裝驅動程式後改變，所以需要在使用者端調整。
▼後台中的列印
▼Chrome中的列印選項，不想印背景卻出現背景
▼Firefox中可能的狀況，出現不需要的網址、頁數等資訊
備註：因為每一家印表機功能與列印界線的問題，原始設定為另外一台雷射印表機，後來客戶搬家使用另外一台印表機，使用者設定被安裝驅動程式後改變，所以需要在使用者端調整。
▼後台中的列印
▼Chrome中的列印選項，不想印背景卻出現背景
▼Firefox中可能的狀況，出現不需要的網址、頁數等資訊
August 23, 2018
最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。
範例參考：點這裡
範例參考：點這裡
July 25, 2018
跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
February 26, 2016
<style type="text/css">
<!--
h1{
//標題用的文字區塊
}
p{
//文字的第一行內縮
text-indent: 50px;
//字間距離
letter-spacing: 3px;
//行間高度
line-height: 0.8;
//文字居中
text-align:center;
}
b{
//粗字。手機版不太起作用
}
strong{
//粗字。比較對應手機版
}
span{
//讓文字成為區塊元件
display:inline-block;
//文字背景
background:#000000;
background:rgba(0,0,0,1.00);
//文字顏色
background:#ffffff;
color:rgba(255,255,255,1.00);
//區塊圓角
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
//粗字。也可以這樣設定。對應中文。英文有更多詳細設定。
font-weight:bolder;
}
a{
//讓a成為母區塊
position:relative;
}
a:hover{
//不要出現文字下底線
text-decoration:none;
}
a:hover::before{
//讓a:hover::before成為子區塊
position:absolute;
}
-->
</style>
<!--
h1{
//標題用的文字區塊
}
p{
//文字的第一行內縮
text-indent: 50px;
//字間距離
letter-spacing: 3px;
//行間高度
line-height: 0.8;
//文字居中
text-align:center;
}
b{
//粗字。手機版不太起作用
}
strong{
//粗字。比較對應手機版
}
span{
//讓文字成為區塊元件
display:inline-block;
//文字背景
background:#000000;
background:rgba(0,0,0,1.00);
//文字顏色
background:#ffffff;
color:rgba(255,255,255,1.00);
//區塊圓角
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
//粗字。也可以這樣設定。對應中文。英文有更多詳細設定。
font-weight:bolder;
}
a{
//讓a成為母區塊
position:relative;
}
a:hover{
//不要出現文字下底線
text-decoration:none;
}
a:hover::before{
//讓a:hover::before成為子區塊
position:absolute;
}
-->
</style>
