手機版網頁自適應slider:bxSlider圖片輪播插件

手機版網頁自適應slider:bxSlider圖片輪播插件

做網頁時,設計師常常需要使用slider來呈現多張圖片或內容,有時桌機版是一般排版呈現,但到了手機版,設計師可能因為版面呈現美觀與較符合使用者設計需求關係,手機版的網頁呈現方式會採用slider的顯示,這對於網頁前端設計切版的設計師們來說可就是一個很頭痛的問題,相同的資料要是在手機版使用slider呈現。今天,我們將介紹這個方法,就是可以讓slider自動加入,使你在手機版網頁中,只在需要時才呈現,不會影響網頁的整體美觀性。 首先,我們需要在網頁中引入bxSlider的程式庫,可以使用以下程式碼: <link...

XAMPP 伺服器郵件設定與 PHP mail() 函式使用教學

XAMPP 伺服器郵件設定與 PHP mail() 函式使用教學

本教學主要介紹如何在 XAMPP 伺服器上使用 PHP 的 mail() 函數,並設置使用SMTP Gmail發送電子郵件。下面是具體步驟: 步驟 1:修改 php.ini 檔案 打開 xampp\php\php.ini 文件,並確保以下設置已經更改: extension=php_openssl.dll SMTP=smtp.gmail.com smtp_port=587 sendmail_from = Your_GMail sendmail_path...

【WordPress教學】使用shortcode在文章內加入LINE分享按鈕

【WordPress教學】使用shortcode在文章內加入LINE分享按鈕

LINE分享圖片icon shortcode 方式 外觀 > 佈景主題檔案編輯器 > functions.php,將以下程式碼貼上,這邊要注意的是圖片的位置src="請使用自行上傳圖片位置",請上傳在媒體庫內自行新增上傳一張icon圖片,使用顯示LINE分享按鈕ICON。 add_shortcode( 'line_share', 'LineShare_shortcode' ); function LineShare_shortcode( $atts ) {...

提高檔案與資料建立效率的神器:VSCode new-file 外掛

提高檔案與資料建立效率的神器:VSCode new-file 外掛

在使用VSCode建立專案時,或是想快速新增檔案在某個資料夾內,一般都是在側邊欄資料夾選單,一個個階層展開資料夾目錄,找到你要到達的目錄在按下右鍵新增檔案,這樣的方式新增新檔案呢? 但若今天不只是要新增檔案,若該目錄沒有資料夾,還要連同資料夾一起創建下去,這個過程就會更繁瑣,於是就會想到若可以使用指令的方式新增資料,並創建資料夾,那就會輕鬆很多,今天就來介紹叫做「new-file」的外掛,一個簡單且快速實現以上方法建立資料夾與文件檔案。 指令輸入自動創建資料與檔案 安裝和啟用這個擴展非常簡單。在 VS Code...

使用Google Web Designer軟體做HTML5 CSS動畫

使用Google Web Designer軟體做HTML5 CSS動畫

專案需要做如上的動畫效果按鈕,因為不想要自己手寫HTML + CSS,想說有沒有更快速且有效率的方法,使用介面化動畫工具,像做Flash動畫一樣,現在Adobe 把它改名了,應該叫Adobe Animate,但是因為礙於Adobe Animate並不是免費開源軟體,感覺上產生出的應當是HTML5 Canvas,加上我只需要做個簡單的動畫按鈕,且最好是online edit 線上編輯工具,幫助我產生HTML動畫所需要的HTML + CSS Code,這樣就真的太棒了。 就在當下google了一下,發現Google Web...

jQuery + CSS 動畫背景擴展效果按鈕animation @keyframes

jQuery + CSS 動畫背景擴展效果按鈕animation @keyframes

使用jQuery + CSS animation 關鍵影格@keyframes,定義設定動畫漸變,達到按鈕hover後背景從中間展開,擴展到填充整個背景按鈕效果。 開始前先將HTML <button> 先寫好,class為elementor-button ,並再多加入四個同樣的<button>在後面,分別給這四個class加入不同顏色名稱green 、blue、red、orange。 <button class="elementor-button"> Effect...

如何在WordPress中上傳.svg圖檔

如何在WordPress中上傳.svg圖檔

WordPress 是最受歡迎的CSM 平台,提供各種圖像類型的上傳,包括 jpg 和 png。但是,對於 SVG、可縮放矢量圖形,情況並非如此,因為 WordPress 本身並不支持它們的上傳。SVG 文件通常更適合設計人員,因為它們是可擴展的圖像格式,它們不會在視網膜屏幕上像素化,而且文件大小通常更小。SVG 已成為 Web 上廣泛使用的圖像格式。 儘管像上面提到的傳統圖像文件格式可以完美地用於圖像和復雜的照片,但 SVG 是滿足當今開發要求(如可伸縮性、可編程性、響應性、交互性、性能和可訪問性)需求的一種格式。...