grid-template-columns 連結區變雙欄 痞客邦語法 梅花問路

 

由於問路家族太龐大了,放個連結漏漏長~

看到了 首陽問路 超厲害的把它變成雙欄,就立馬向首陽問路的採藥請教

採藥也有詳細的教學文教大家利用「自訂的側欄區塊」成功達成把側欄變成雙欄式顯示的語法設定步驟

梅花採用的方式是利用痞客邦後台原先就有的「我的連結」區塊,設定這裡面的每一個連結字數都是4個字

然後直接加入以下的語法在自己的CSS最後端即可 (點連結前往設定自己的樣式CSS

 

#mylink.hslice.box .inner-box ul{display: grid;grid-template-columns: 50% 50%;text-align:left;} /* 把問路家族變成兩行 */

 

但是!如果你這一區有的連結字數比較多的話,有可能是會跑版的喔!

別擔心,遇到這種狀況的話,一樣有得救! 請參考以下的教學文章~

痞客邦新手入門⑵|如何編輯側欄推薦連結區

梅花的CSS學習|痞客邦側欄區塊的更多應用方式

 

2021/08/15 更新。。。。。。。

因為我們家族人口眾多,連結很長

我發現可以設定三個數字就變成三欄了,歡迎大家試試~

#mylink.hslice.box .inner-box ul{display: grid;grid-template-columns: 33% 33% 34%;text-align:left;} /* 把問路家族變成三行 */

 

 

 

如果有遇到其他的狀況,也歡迎留言詢問或是和梅花討論呦~

歡迎使用梅花提供的免費版型,如果有客製版面的需求可留言或來信討論洽談

版面設計|版型分享|版型客製|三款灰白色系的樣式分享

版面設計|版型分享|版型客製|免費的版型分享|T3-極簡風格

版面設計|版型分享|版型客製|免費版型分享-夕湖光景

 


延伸閱讀

 

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg *開發人員工具*


部落格整體 #body 箭頭粉.jpeg *換背景底圖*箭頭-15.png*換字體*箭頭-15.png*換部落格ICON*箭頭-15.png*設計LOGO* 


封面橫幅#banner/#header 箭頭粉.jpeg *換封面底圖*箭頭-15.png*部落格標題敘述大小位置*


文章區塊 #content 箭頭粉.jpeg *改文章標題字體、背景*


公告版面 #spotlight 箭頭粉.jpeg *公告版面應用*


側欄區塊 #links 箭頭粉.jpeg *改側欄標題的背景*箭頭-15.png*Facebook粉專外掛image箭頭-15.png*音樂外掛image箭頭-15.png*YouTube外掛image箭頭-15.png*分享連結階層*


實用推薦 箭頭粉.jpeg *看所有語法筆記文章*箭頭-15.png0074.gif梅花的語法筆記本0074.gif箭頭-15.png*看梅花的CSS標籤筆記*箭頭-15.png*文章內的目錄(錨點)image箭頭-15.png*關閉遮蓋版面的廣告*箭頭-15.png*隱藏上方藍色選單*箭頭-15.png*連結Google相簿*箭頭-15.png*圖片瘦身不失真*箭頭-15.png*讓部落格可以被Google*箭頭-15.png*Google Analytics分析*
箭頭-15.png精美分隔線圖片大全箭頭-15.png語法DIY美美的標題分隔線

 

 

痞客幫新手入門

痞客邦新手入門⑴|新手基礎入門設定 開啟部落格 設定作者名稱 痞客邦新手入門⑹|如何自訂個性化ICON圖標
痞客邦新手入門⑵|如何編輯側欄推薦連結區 痞客邦新手入門⑺|用語法外掛來撥放音樂
痞客邦新手入門⑶|宣傳Facebook粉專、浮動FB粉專外掛​​​ 痞客邦新手入門⑻|移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷|利用公告版位製造多樣性 痞客邦新手入門⑼|如何自己設定文章顯示的縮圖
痞客邦新手入門⑸|修改版面的字體字型 痞客邦新手入門⑽|如何在痞客邦發表文章

 

如果您喜歡梅花的文章,希望您可以幫忙梅花按火箭20次推推🚀
留言支持📝,轉發分享推薦給您的朋友 箭頭符號:01.gif
🌸 🌸 🌸 非常感謝您 🌸 🌸 🌸

triangle dot dividing line illustration_4505965.png

地藏王菩薩愛
迎接地藏王菩薩進入您的人生,推薦您以下三個天界之舟出品的禱告運用
點閱播放讓地藏王菩薩幫助您~
驅離邪靈惡鬼騷擾
、財運亨通、身體健康、擺脫惡疾、人生順遂

triangle dot dividing line illustration_4505965.png

當你/妳覺得最近很需要
驅魔、收驚、制煞、鬼壓床、運勢差、體虛多病
204.gif循環播放驅魔禱告篇-常保身心靈乾淨健康204.gif


或是妳/你正在投入投資理財、自營事業
204.gif在店裡或是工作室循環播放發財禱告篇-護佑經濟生活穩定無虞204.gif


祝願您非常健康,若您認為自己體虛多病、罹患癌症、而且家族有相關遺傳病史,還是身邊有患者/癌友
204.gif時常播放抗癌禱告篇-護佑身體健康遠離癌症204.gif


 

arrow
arrow
    創作者介紹
    創作者 梅梅 的頭像
    梅梅

    梅花問路

    梅梅 發表在 痞客邦 留言(13) 人氣()