分類: Blog

純 CSS 垂直及水平置中 – 超簡單一段搞定

在被垂直居中元素的父類別，加這一段就可以，非常簡單

HTML

CSS

檢視結果

See the Pen Vertical and horizontal center by VECTOR.cool 威得數位
(@ann71727) on CodePen.

CSS 5種垂直置中方法

CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

以CSS為中心：完整指南

[……]

閱讀更多

HTML5 a Tag 直接用手機撥電話的連結

在 a 標籤中 href 屬性中，開頭加上 tel:撥打的電話號碼 ，在手機上按下此連結會呼叫手機撥號的應用程式，並把電話輸入在電話欄中，非常方便，但要注意電話號碼格式，只能輸入數字

錯誤：02-2888-8888

正確：0228888888

<a href="tel:0228888888">聯絡我們</a>

 [……]

閱讀更多

HTML5 a 標籤強制下載檔案

當a 標籤直接指向檔案時，會由瀏覽器去決定開啟方式，”給敖”的去決定下載還是開啟檔案，例如PDF，瀏覽器通常會直接開啟檔案，但有些檔案，希望User可以直接下載，在HTML5中有新的方式可以指定用下載的方式，範例於下方程式碼：

  • path_to_file 是絕對路徑或者相對路徑 。
  • file_name 下載檔案的預設名稱。

http://hant.ask.helplib.com/javascript/post_406301
https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript

[……]

閱讀更多

PHP 呼叫 Namespace 文件中的 function

呼叫 Namespace 文件裡的 function

/**
* https://vector.cool
*/
Namespace VECTOR\COOL;

function test() {
    echo "Hello world!\n";
}

VECTOR\COOL\test();

呼叫 Namespace 文件裡 class 中的 function

/**
* https://vector.cool
*/
namespace VECTOR\COOL;

class HELLO{
    static public function test() {
        echo "Hello world!\n";
    }
}

VECTOR\COOL\HELLO::test();

在 WordPress Action 中呼叫

<?php
/**
* https://vector.cool
*/
Namespace VECTOR\COOL;

function test() { 
	echo "Hello world!\n"; 
}
add_action('init','VECTOR\COOL\test');

參考資料：

http://php.net/manual/en/language.namespaces.nsconstants.php[……]

閱讀更多

PHP Namespace 錯誤 Warning call_user_func_array() expects parameter 1 to be a valid callback

使用 __NAMESPACE__  取得當前文件的 Namespace

呼叫 Namespace 裡的 function

/**
* https://vector.cool
*/
Namespace VECTOR\COOL;

function test() {
    echo "Hello world!\n";
}

call_user_func(__NAMESPACE__ .'\test');

呼叫 Namespace 裡的 class 中的 function

/**
* https://vector.cool
*/
Namespace VECTOR\COOL;

class Hello {
    static public function test() {
        echo "Hello world!\n";
    }
}

call_user_func(__NAMESPACE__ .'\Hello::test'); // String
call_user_func(array(__NAMESPACE__ .'\Hello', 'test')); // Array

在 WordPress Action 中呼叫

/**
* https://vector.cool
*/
Namespace V123\PLUGIN\CFU;
add_action('init',__NAMESPACE__.'\create_initial_admin_menu');

參考資料：

http://php.net/manual/en/language.namespaces.nsconstants.php
https://stackoverflow.com/questions/14682356/relative-namespaces-and-call-user-func[……]

閱讀更多

CSS3 鏡射

<style>

/* 水平鏡射 */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

/* 垂直鏡射 */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}

</style>

 [……]

閱讀更多

html IE
tag 出現詭異方框

客戶反映在IE結尾都有奇怪的框框，原來還有人在用IE阿？

好吧！想辦法解決

原本以為這是邊框，所以天真的想說CSS加個  border:none  就解了，果然是我太天真，完全沒動！！

Google 一下，這似乎跟網路字型的Bug有關，使用下方的 CSS 就解囉

 
/* https://vector.cool */
/* 消除 IE <br> 的詭異框框 */

br {
    font-family: unset !important;
    font: unset !important;
}

下圖，詭異的框框都不見了。

[……]

閱讀更多

超簡單取得微信 WeChat QR Code

取得微信 WeChat QR Code

開啟微信 WeChat APP

超簡單取得微信 WeChat QR Code

按右下角「我的設定」。

接著，我的設定頁面右上角按 QRCode icon

 

超簡單取得微信 WeChat QR Code

這時會出現你的 QRCode，按一下右上角的三個點開啟選項。

 

超簡單取得微信 WeChat QR Code

按下「儲存到手機」按紐。

QRCode 圖片就會存到手機相簿中。

超簡單取得微信 WeChat QR Code

打開手機相簿，就可以看到剛剛匯出的 QRCode

可以透過手機分享功能，分享自己的 QRCode

超簡單取得微信 WeChat QR Code[……]

閱讀更多