VECTOR COOL 威得數位行銷 - 第 27 頁，總計 45 頁

PHP 二維陣列轉一維陣列

$test_arr = array(array(“aa”), array(“bb”), array(“cc”));
‘二維陣列<br/>’.print_r($test_arr).'<br/>’;
$new_arr = call_user_func_array(‘array_merge’, $test_arr);
‘一維陣列<br/>’.print_r($new_arr);[……]

PHP get youtube id

$url = https://www.youtube.com/watch?v=qzYTwIJrSKM&feature=relate;

parse_str( parse_url( $url, PHP_URL_QUERY ), $param_arr );
echo $param_arr[‘v’]
// output : qzYTwIJrSKM[……]

jQuery 選擇器，替代萬用字元模糊查找匹配元素

jQuery 選擇器中沒有所謂的「萬用字元(*)」，可以透過依些方式接近模糊查找元素或值的目的

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值[class!=’test’]元素屬性不包含指定的值

使用範例：

Demo Download 範例下載：

[……]

Media Queries設定

@media screen and (max-width: 480px) {
(智慧型手機專用樣式)
}

@media screen and (min-width: 481px) and (max-width: 768px) {
(平板電腦專用樣式)
}

@media screen and (min-width: 769px) {
(電腦專用樣式)
}

區段的順序雖然可以變換，但如果考量CSS的執行效率，則建議從小畫面往大畫面撰寫樣式，這種作法不只寫起來更有效率，也可以提升可讀性。[……]

CSS ul li float center

CSS

ul{

text-align: center;

}

li{

margin: 0 10px;

display: inline;

}

HTML

<ul>

<li>Option 1</li>

<li>Option 2</li>

<li>Option 3</li>

<li>Option 4</li>

<li>Option 5</li>

</ul>

Example Download

[……]

PHP PHPMailer無法透過Gmail發信，在帳號密碼正確的情況下

我打算用PHPMailer透過Gmail來發信，

但今天一直遇到很怪的問題，帳號密碼都確定正確，
該Google帳密可以登入Gmail，證明帳密是沒錯的，
但還是一直拋出SMTP Error: Could not authenticate.的錯誤訊息，
非常悶，搞好久，最後發現應該是密碼強度問題，

其實我密碼強度已經設很強咧，到底要多強!!

我是用下方亂碼、密碼產生器所產生的密碼，理應不會有問題，

但還是一直拋出SMTP Error: Could not authenticate.的錯誤訊息，
我用下方的「亂碼、密碼產生器」改到第五次才成功，

挑有英文自母大小寫+數字+符號的字串當密碼，
終於成功了，呼~搞半天，由此可證：
網頁能登入Gmail不代表該帳密能透過外部的SMTP來發Gmail信，
好像由外部的SMTP來發信的密碼強度有一定規則，
應該是要超強，才有辦法用PHP透過Gmail SMTP來發信

以下為官方的說明文件

Gmail說明 – 用戶端不接受我的使用者名稱和密碼
https://support.google.com/mail/answer/14257

Gmail說明 – 選用安全強度高的密碼

https://support.google.com/accounts/answer/32040

亂碼、密碼產生器http://lab.sp88.com.tw/genpass/

[……]

CSS override 樣式無法覆蓋樣式的解決方案

CSS樣式無法覆蓋樣式的解決方案

}
</style>
<div class=”aaa”>
<div class=”bbb”>
<h3>test</h3>
</div>
</div>

改用id
<style>
.aaa .bbb h3{
color:#FF0000;
font-size:50px;
}
#ccc h3{
color:#0AFF00
}
</style>
<div class=”aaa”>
<div class=”bbb” id=”ccc”>
<h3>test</h3>
</div>
</div>

延伸閱讀
http://stackoverflow.com/questions/9956467/overriding-styles-without-important[……]

windows 7 解決 hosts 無法修改問題，最簡單解決方法

檔案位置：C:WindowsSystem32driversetc

一般情況下修改後無法儲存Windows的hosts檔案，

網路上有很多解決方法，但這是目前我覺得最簡單的：

1.在桌面用記事本建立一個名為hosts的檔案 (不要有副檔名喔)

2.把原本的hosts裡的內容貼到新檔案

3.把原本的hosts的檔案前面加個底線，目的只是保留原檔而已

4.把桌面新的hosts放進C:WindowsSystem32driversetc資料夾

< 記得修改時暫時關閉防火牆，小紅傘會擋 >

延伸閱讀：http://jingyan.baidu.com/article/9faa72317903f1473c28cb01.html

[……]

CSS transition scale image 圖片縮放

今天很其怪用transition scale來改變容器大小沒問題
但對圖片就沒有效，上網找了了解決方法

img{
/* Webkit for Chrome and Safari */
-webkit-transform: scale(1, 1); /* This is the scale for the normal size of the image.*/
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;

/* Webkit for Mozila Firefox */
-moz-transform: scale(1, 1);
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-out;

/* Webkit for IE( Version: 11, 10 ) */
-ms-transform: scale(1, 1);
-ms-transition-duration: 500ms;
-ms-transition-timing-function: ease-out;
}

img:hover{
/* Webkit for Chrome and Safari */
-webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;

/* Webkit for Mozila Firefox */
-moz-transform: scale(1.2, 1.2);
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-out;

/* Webkit for IE( Version: 11, 10 ) */
-ms-transform: scale(1.20, 1.20);
-ms-transition-duration: 500ms;
-ms-transition-timing-function: ease-out;
}

延伸閱讀：https://drujoopress.wordpress.com/2014/01/31/zoom-effect-using-css3-transition-scale/[……]

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法，請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/

在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。

但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。

HTML：

<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS：

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考：

[……]