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的執行效率,則建議從小畫面往大畫面撰寫樣式,這種作法不只寫起來更有效率,也可以提升可讀性。[……]

閱讀更多

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>
.aaa h3{
color:#FF0000;
font-size:50px;
}
.bbb h3{
color:#0AFF00

}
</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>

參考:

[……]

閱讀更多