CSS RWD square 正方形

純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響

HTML:

CSS:

example:

See the Pen
CSS RWD square 正方形
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square

[……]

閱讀更多

Win11 XAMPP Carch – Error: MySQL shutdown unexpectedly.

終於還是升級了 Win11,升級完成後慘案還是發生了,該來的還是會來。在我電腦中安裝用來開發用的 XAMPP 中的 MySQL 居然打不開了!!! 還好在 Win10 的時候有遇過一次,也感謝自己有記錄下來,依然有用,解決我 Win11 安裝後 MySQL 崩潰問題,也保住所有資料,本文也帶大家一步一步的做,如您也遇到一樣情況,可以參考本文,希望也能解決您的問題。

升級 Win11後,開啟 XAMPP 出現一堆錯誤的紅字,MySQL 也跟著掛了!!!!

檢視錯誤日誌

由 XAMPP 控制面板開啟 mysql error log (也看不是很懂)

修復錯誤

詳細原因其實也不是很清楚,網路上找到下列這篇文章,似乎是最簡單解決這個問題,本文是依照下列這篇文章進行問題排除,方法與原文有點差異,有興趣可參考原文

參考:xampp mysql and
參考:phpmyadmin dont work

備份資料檔案

如果您的資料已經有資料了,強烈建議備份下來,再來的動作可能會造成原有資料遺失,做危險操作時,花一些時間備份,養成好習慣

資料檔案預設目錄:C:\xampp\mysql\data

複製 backup 目錄中的檔案覆蓋於 data 目錄中

預設 backup 目錄:C:\xampp\mysql\backup

注意!! 若您 資料庫有使用 innodb 在複製 backup 中的檔案時,不可以複製 ibdata1 這個檔案,同時也確保 ibdata1 存在您的 data 目錄中,ibdata1 刪除了,將無法恢復您的資料庫

如果您已誤刪或覆蓋了 ibdata1 這檔案了,還有救

請參考此文章,恢復您的 innodb

參考:recover mysql database from ibdata1

重啟資料庫

覆蓋檔案完成,重啟 MySQL,太好了,沒有報錯,接著開啟 phpMyAdmin 驗證一下是否正常

Youtube 有網友將步驟製成影片,也可以參考這影片

上方步驟完成後,開啟 phpMyAdmin

噴了一些錯誤,但應該是密碼問題,剛覆蓋 backup 的檔案後,如果您的 phpMyAdmin 或其他程式都有設定資料庫登入密碼的話,需要重新設定密碼

MySQL 重設密碼

開啟 XAMPP 面板,按下右側的 Shell 按鈕

輸入下列這段指令更改資料庫 root 密碼

參考:Resetting MySQL Root Password with XAMPP on Localhost

成功開啟 phpMyAdmin

[……]

閱讀更多

javascript function arguments forward to another function

使用 JavaScript 的 Apply

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Refrance:
https://stackoverflow.com/a/3914600/6784662
https://realdennis.medium.com/javascript-%E8%81%8A%E8%81%8Acall-apply-bind%E7%9A%84%E5%B7%AE%E7%95%B0%E8%88%87%E7%9B%B8%E4%BC%BC%E4%B9%8B%E8%99%95-2f82a4b4dd66

[……]

閱讀更多

CSS 載入外部字型 / 字體

漂亮的字體可以讓增添網頁個性及可讀性,但要注意載入外部字型 / 字體則會增加網站下載的時間,這兩者的平衡則交由網頁設計師的判斷,本篇介紹如何將外部字型載入 CSS 中

CSS 載入字型 / 字體

font-family: 定義字體的名稱 'Helvetica' ,這名稱是可以自定義的
src: 依序載入字體,而 local( "Helvetica" ),會先找使用者電腦中是否有安裝此字體,如果有則直接使用使用者的系統字體,如果使用者系統沒此字體再依序下載字體
url: 相對路徑或絕對路徑

CSS 使用已載入字型 / 字體

字體格式 ( format ) 對照表

字型格式附檔名format() 指定方式WOFF(Web Open Font Format).woff"woff"TrueType.ttf"truetype"OpenType.ttf 或 .otf"opentype"Embedded OpenType.eot"embedded-opentype"SVG Font.svg 或 .svgz"svg"

Refrance:
https://blog.gtwang.org/web-development/css-font-face/
https://www.iware.com.tw/qa-508.html

[……]

閱讀更多

MySQL #1067 – Invalid default value for ‘post_date’

datetime 的預設值設定為 0000-00-00 00:00:00 在舊版本沒問題,但在MySQL5.7後會出現 錯誤,主要原因從 MySQL 5.7 開始,SQL 模式預設為 NO_ZERO_DATE ,需禁用此限制。本文提供兩種解法:

方法一、

先將欄位預設值設定為NULL:

再更新預設值

方法二、

先執行關閉 NO_ZERO_DATE 模式

就可以順利執行

https://stackoverflow.com/a/37696251/6784662
https://stackoverflow.com/a/32829623

[……]

閱讀更多

PHP json_encode sting in HTML input field

json_encode 輸出於 HTML input 發生異常

把PHP中的Array透過json_encode()轉換成Json格式輸出到HTML input value中如下:

輸出於 HTML 發生異常,只剩下左側「中括號」

主要原因是Json中的雙引號與HTML的雙引號打架

可以使用 htmlspecialchars() 簡單解決這問題

在執行 json_encode() 後再執行 htmlspecialchars() 如下方代碼

如此就正常輸出囉

https://stackoverflow.com/a/21887262

[……]

閱讀更多

Social Network Service (SNS) Share Link

Facebook

  • http://www.facebook.com/share.php?u=[URL]&t=[TITLE]&pic=[IMAGE]

Twitter

  • http://twitter.com/intent/tweet?text=[TITLE]&url=[URL]&pic=[IMAGE]

Google Plus

  • https://plus.google.com/share?url=[URL]&t=[TITLE]

Pinterest

  • https://www.pinterest.com/pin/create/button/?url=[URL]&description=[TITLE]&media=[IMAGE]

Linkedin

  • https://www.linkedin.com/sharing/share-offsite/?url=[URL]&title=[TITLE]

Delicious

  • http://del.icio.us/post?url=[URL]&title=[TITLE]

Tumblr

  • http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Digg

  • http://digg.com/submit?phase=2&url=[URL]&title=[TITLE]

StumbleUpon

  • http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Reddit

  • http://reddit.com/submit?phase=2&url=[URL]&title=[TITLE]

新浪微博

  • http://v.t.sina.com.cn/share/share.php?title=[TITLE]+[URL]&pic=[IMAGE]

QQ 空间

  • http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=[URL]

人人网

  • http://share.renren.com/share/buttonshare.do?link=[URL]&title=[TITLE]

腾讯微博

  • http://v.t.qq.com/share/share.php?url=[URL]&title=[TITLE]

https://github.com/bradvin/social-share-urls
https://chon.io/notes/social-media-sharing-link-url/

[……]

閱讀更多

小店也可落實「QRCode實聯制」,免費使用、避免接觸、保障顧客隱私

小店也可落實「實聯制」,免費使用
QRCode 避免接觸傳染,保護顧客隱私
本公司緊急開發,請自由取用、分享[……]

閱讀更多