採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
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>
February 26, 2016
<style type="text/css">
table{
border:#000000 solid 1px;
border-collapse:collapse;
}
table tr, table td{
border:#000000 solid 1px;
}
</style>
table{
border:#000000 solid 1px;
border-collapse:collapse;
}
table tr, table td{
border:#000000 solid 1px;
}
</style>
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 3 |
December 7, 2015
img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
/* Disable grayscale on hover */
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
/* Disable grayscale on hover */
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
