goTOP
採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
December 21, 2020
我們製作的Bo-Blog 金流插件也有個列印收據的功能,為符合客戶需求,客戶因為有許多收據單,希望能夠不列印收據表格,把需要的文字資料列印出來。針對這個選項,介紹一下我們在金流插件中的選項與列印功能。

備註:因為每一家印表機功能與列印界線的問題,原始設定為另外一台雷射印表機,後來客戶搬家使用另外一台印表機,使用者設定被安裝驅動程式後改變,所以需要在使用者端調整。

▼後台中的列印
點擊在新視窗中瀏覽此圖片
▼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.到原點踏步)

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>
February 26, 2016
<style type="text/css">
table{
   border:#000000 solid 1px;
   border-collapse:collapse;
}
table tr, table td{
  border:#000000 solid 1px;
  }
</style>

111
222
333
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);
}

分頁: 1/4 第一頁 1 2 3 4 下頁 最後頁 [ 顯示模式: 摘要 | 清單 ]