• 首頁
  • 馬祖野鳥名錄(2017年版)
  • 關於本站
北方羽林
  • 首頁
  • 旅遊美食
  • 網路資源
  • 敗家日記
  • 攝影記事
  • 飛羽手札
  • 生活記事
  • 關於本站
No Result
View All Result
  • 首頁
  • 旅遊美食
  • 網路資源
  • 敗家日記
  • 攝影記事
  • 飛羽手札
  • 生活記事
  • 關於本站
No Result
View All Result
北方羽林
No Result
View All Result
Home 網路資源 架站工具 Weebly

如何在Weebly中加入垂直線

北方羽林 作者: 北方羽林
2017-12-19
in Weebly, 架站工具, 網路資源
如何在Weebly中加入垂直線
分享到 Facebook分享到 Twitter分享到 Line

在 Weebly 預設的工具中
是沒辦法使用垂直線的
如果有有垂直線的使用需求
大致上有一下幾種方式:

  1. 劃一條直線,用圖檔裝作分隔線放入網站
  2. 修改代碼
  3. 另外安裝官方提供的應用

第一種方法相當土炮但也非常直覺好用XD
但是第二種方式就比較麻煩了…

首先
我們先到Weebly的編輯頁面拉出幾個列
然後加入Html的自訂語法

<div class=”vertical-line” style=”height: 500px;”></div>

其中height: 500px是線段的長度
看你的需求調整

接下來到主題中的HTML/CSS 編輯

 

找到樣式> main.less 或是 main-style.css 然後在最底下加入以下語法:


DIV.VERTICAL-LINE{
WIDTH: 1PX;
BACKGROUND-COLOR: BLACK;
HEIGHT: 100%;
}

這裡是我們添加的線條型式設定
可以修改為你要的顏色或是調整寬度…

接下來回到之前的頁面
就發現出現垂直線囉~~

最後
利用官方的應用程式
可能是改版的關係吧
不知道甚麼時候多了一個vertical divider可以使用
可以直接替Weebly加入水平線或是垂直線

這個APP是完全免費的
既然這樣自然是不用白不用XD
按下新增後
會跳出分頁要你選擇安裝在哪一個網站中

選擇好後你會發現原本左方的工具列最底下會多一個工具
直接拉進編輯區就可以調整使用了


其實Zeta之前也沒注意到有這樣的APP可以使用
畢竟以前在Weebly中要建立垂直線的效果也是挺麻煩的
只是這樣感覺是網頁設計中一個常見的效果為什麼還要另外安裝才能使用就是Zeta想不透的地方了…

2018/01/23更新:Vertical Divider 已改為付費APP

原本好用的免費APP:Vertical Divider 今年開始已經改為付費囉
升級的費用是2美元
因為這樣
所以Zeta只好先把該APP 刪除掉囉
底下的評論也是罵成一片
畢竟很多人利用這個APP架設網站
現在突然說要付費
那不是硬著頭皮升級就是在花時間修改
只能說不幸了…

標籤: Weebly網站應用網站設計
上一篇文章

WordPress.com和WordPress.org有什麼不同?

下一篇文章

如何將Weebly部落格轉移到WordPress

北方羽林

北方羽林

偶爾在網路上分享攝影、旅遊以及在網路世界學到的點點滴滴。

相關文章

長榮貨櫃輪「卡」蘇伊士運河,什麼時候會開通?教你查看世界船舶動態現況
網路資源

長榮貨櫃輪「卡」蘇伊士運河,什麼時候會開通?教你查看世界船舶動態現況

2021-03-24
如何讓 Facebook 的連結自行判斷用瀏覽器還是 APP 開啟粉絲頁
網路資源

如何讓 Facebook 的連結自行判斷用瀏覽器還是 APP 開啟粉絲頁

2021-03-22
大學生福利:免費取得微軟 OneDrive 1TB 雲端空間以及 Office 365
網路資源

大學生福利:免費取得微軟 OneDrive 1TB 雲端空間以及 Office 365

2021-02-22
Screely 為你的圖片加上 iMAC 視窗外框
網路資源

Screely | 為你的圖片加上 iMAC 視窗外框

2021-01-20
Qurb Mockup 產生器,讓你的螢幕截圖套用 Note、 iPhone、MacBook 等外框
網路資源

Qurb Mockup 產生器,讓你的螢幕截圖套用 Galaxy Note、iPhone、MacBook 等 Apple 產品外框

2021-01-17
如何修復 惱人的 525 SSL Handshake Failed
網路資源

如何修復惱人的 525 SSL Handshake Failed

2020-12-31
下一篇文章
如何將Weebly部落格轉移到WordPress

如何將Weebly部落格轉移到WordPress

如何在不同的頁面或文章建立各自的側邊欄

WP外掛:如何在不同的頁面或文章建立各自的側邊欄

截圖不再全螢幕,如何任意截取電腦桌面畫面?

截圖不再全螢幕,如何任意截取電腦桌面畫面?

發表迴響 取消回覆

文章分類

  • 首頁
  • 旅遊美食
  • 網路資源
  • 敗家日記
  • 攝影記事
  • 生活資訊
  • 飛羽手札
  • 關於本站

標籤

Android Canon E-game攻略 FaceBook Plugin theme VPS Weebly Win10 Wix woocommerce Wordpress Youtube 主題 住宿 便宜虛擬主機 免費主機 外掛 多媒體 打寇島 打扣島攻略 拯救麗麗加 攝影 旅かえる 旅行青蛙 旅遊 精打細算 網站備份 網站應用 網站監測 網站還原 美食 自然 自然素材 藍眼淚 虛擬主機 遊戲攻略 鏡頭 開箱 電腦應用 頂級域名 飛羽 馬祖 馬祖民宿 馬祖美食




  • 首頁
  • 旅遊美食
  • 網路資源
  • 敗家日記
  • 攝影記事
  • 飛羽手札
  • 生活記事
  • 關於本站

Copyright© Zetaspace All rights reserved

No Result
View All Result
  • 首頁
  • 旅遊美食
  • 網路資源
  • 敗家日記
  • 攝影記事
  • 飛羽手札
  • 生活記事
  • 關於本站

Copyright© Zetaspace All rights reserved