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>
[……]
CSS ul li float center
PHP PHPMailer無法透過Gmail發信，在帳號密碼正確的情況下
我打算用PHPMailer透過Gmail來發信，
但今天一直遇到很怪的問題，帳號密碼都確定正確，
該Google帳密可以登入Gmail，證明帳密是沒錯的，
但還是一直拋出SMTP Error: Could not authenticate.的錯誤訊息，
非常悶，搞好久，最後發現應該是密碼強度問題，
該Google帳密可以登入Gmail，證明帳密是沒錯的，
但還是一直拋出SMTP Error: Could not authenticate.的錯誤訊息，
非常悶，搞好久，最後發現應該是密碼強度問題，
其實我密碼強度已經設很強咧，到底要多強!!
我是用下方亂碼、密碼產生器所產生的密碼，理應不會有問題，
但還是一直拋出SMTP Error: Could not authenticate.的錯誤訊息，
我用下方的「亂碼、密碼產生器」改到第五次才成功，
我用下方的「亂碼、密碼產生器」改到第五次才成功，
挑有英文自母大小寫+數字+符號的字串當密碼，
終於成功了 ，呼~搞半天，由此可證：
網頁能登入Gmail不代表該帳密能透過外部的SMTP來發Gmail信，
好像由外部的SMTP來發信的密碼強度有一定規則，
應該是要超強，才有辦法用PHP透過Gmail SMTP來發信
終於成功了 ，呼~搞半天，由此可證：
網頁能登入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>參考：
[……]