痞客邦語法 設定雙欄式列表

讓原本一欄很長的連結選單變成兩欄,側欄不會拉太長~達成效果:

image

也非常感謝扶桑問路協助以下步驟的測試,這是她的成果

設定問路雙欄

設定CSS樣式

到部落格後台的『樣式管理』,加上以下語法:

/*
 * 如果需要三欄的效果,請將50% 50% 取代成 30% 30% 30%
 * */
#wenlu ul {
  display: grid;
  grid-template-columns: 50% 50%;
}

#wenlu ul li {
  margin-top: 10px;
  font-size: 1.1rem;
  text-align: center;
}

/*
 * 這邊是滑鼠移過去的效果,可加,可不加*/
#wenlu ul li:hover {
  font-size: 1.25rem;
  font-weight: 900;
  text-shadow: #9b9b9b;
  background-color: white;
  border-radius: 10px;
}

修改側欄

用以下語法設定側欄內容。注意!!!一定要用以下結構加上連結

<div id="wenlu">
<ul>
  <li><a title="" href="https://winru0208.pixnet.net/blog" target="_blank">問路</a></li>
  <li><a title="" href="http://iceheart888.pixnet.net/blog" target="_blank">冰心問路</a></li>
  <li><a title="" href="http://icyin.pixnet.net/blog" target="_blank">梅花問路</a></li>
  <li><a title="" href="https://cathy7god.pixnet.net/blog" target="_blank">靈王問路</a></li>
  <li><a title="" href="http://galaxyleaves.pixnet.net/blog" target="_blank">銀河問路</a></li>
  <li><a title="" href="http://rainsru.pixnet.net/blog" target="_blank">小雨問路</a></li>
  <li><a title="" href="http://redcloud2810.pixnet.net/blog" target="_blank">烈陽問路</a></li>
  <li><a title="" href="http://lovespirit328.pixnet.net/blog" target="_blank">空靈問路</a></li>
  <li><a title="" href="https://jjmaywonderfly.pixnet.net/blog" target="_blank">莫言問路</a></li>
  <li><a title="" href="http://natasha790708.pixnet.net/" target="_blank">金靈問路</a></li>
  <li><a title="" href="https://silviayellow.pixnet.net/blog" target="_blank">靈犀問路</a></li>
  <li><a title="" href="http://yenhou2142.pixnet.net/blog" target="_blank">洪荒問路</a></li>
  <li><a title="" href="http://floatintheair.pixnet.net/blog" target="_blank">飄然問路</a></li>
  <li><a title="" href="http://stone018.pixnet.net/blog" target="_blank">石頭問路</a></li>
  <li><a title="" href="https://bluesky7915.pixnet.net/blog" target="_blank">扶桑問路</a></li>
  <li><a title="" href="https://angel102333.pixnet.net/blog" target="_blank">行思問路</a></li>
  <li><a title="" href="http://phillis0913.pixnet.net/blog" target="_blank">明王問路</a></li>
  <li><a title="" href="http://tomohome.pixnet.net/blog" target="_blank">月光問路</a></li>
  <li><a title="" href="http://hpeacock.pixnet.net/blog" target="_blank">孔雀問路</a></li>
  <li><a title="" href="https://niu26852.pixnet.net/blog" target="_blank">莫愁問路</a></li>
  <li><a title="" href="https://hundredflowers.pixnet.net/blog" target="_blank">百花問路</a></li>
  <li><a title="" href="https://shinchen777.pixnet.net/blog" target="_blank">星晨問路</a></li>
  <li><a title="" href="https://kirbyhsiao.pixnet.net/blog" target="_blank">錦羽問路</a></li>
  <li><a title="" href="https://babywinru.pixnet.net/blog" target="_blank">寶貝問路</a></li>
  <li><a title="" href="https://heavenone1125.pixnet.net/blog" target="_blank">獅王問路</a></li>
  <li><a title="" href="https://lighthearted22.pixnet.net/blog" target="_blank">佛手問路</a></li>
  <li><a title="" href="https://chillyhilt520.pixnet.net/blog" target="_blank">初心問路</a></li>
  <li><a title="" href="https://rita83819.pixnet.net/blog" target="_blank">清雲問路</a></li>
  <li><a title="" href="https://pmountain.pixnet.net/blog" target="_blank">劈山問路</a></li>
  <li><a title="" href="https://evn37.pixnet.net/blog" target="_blank">夢園問路</a></li>
  <li><a title="" href="https://noktaleweted.pixnet.net/blog" target="_blank">法雨問路</a></li>
  <li><a title="" href="https://starriver0616.pixnet.net/blog" target="_blank">星塔問路</a></li>
  <li><a title="" href="https://bamboo333.pixnet.net/blog" target="_blank">方竹問路</a></li>
  <li><a title="" href="https://unitedmong1124.pixnet.net/blog" target="_blank">日月問路</a></li>
  <li><a title="" href="https://saryh777.pixnet.net/blog" target="_blank">寶山問路</a></li>
  <li><a title="" href="https://yulong717.pixnet.net/blog" target="_blank">玉龍問路</a></li>
  <li><a title="" href="https://berylho9192.pixnet.net/blog" target="_blank">蓮花問路</a></li>
  <li><a title="" href="https://phoenixtrees.pixnet.net/blog" target="_blank">梧桐問路</a></li>
  <li><a title="" href="https://ynming15.pixnet.net/blog" target="_blank">八荒問路</a></li>
  <li><a title="" href="https://monda123.pixnet.net/blog" target="_blank">達達問路</a></li>
  <li><a title="" href="https://cywenlu.com/" target="_blank">採藥問路</a></li>
  <li><a title="" href="https://miago8.pixnet.net/blog" target="_blank">妙語問路</a></li>
  <li><a title="" href="https://mark09070907.pixnet.net/blog" target="_blank">大安問路</a></li>
  <li><a title="" href="https://wangderick88.pixnet.net/blog" target="_blank">軍師問路</a></li>
  <li><a title="" href="https://meetingshao.pixnet.net/blog" target="_blank">明珠問路</a></li>
  <li><a title="" href="https://marschang716.pixnet.net/blog" target="_blank">麒麟問路</a></li>
  <li><a title="" href="https://hlong.pixnet.net/blog" target="_blank">定光問路</a></li>
  <li><a title="" href="https://leohome6407.pixnet.net/blog" target="_blank">翛然問路</a></li>
  <li><a title="" href="https://caishiwenlu.pixnet.net/blog" target="_blank">彩世問路</a></li>
  <li><a title="" href="https://phoenix0715.pixnet.net/blog" target="_blank">鳳凰問路</a></li>
  <li><a title="" href="https://open101875.pixnet.net/blog" target="_blank">龍吟問路</a></li>
  <li><a title="" href="https://orchid19901222.pixnet.net/blog" target="_blank">憂蘭問路</a></li>
  <li><a title="" href="https://heavenmoon.pixnet.net/blog" target="_blank">西施問路</a></li>
  <li><a title="" href="https://aq7711.pixnet.net/blog" target="_blank">朗心問路</a></li>
  <li><a title="" href="https://kind1109.pixnet.net/blog" target="_blank">藍琦問路</a></li>
  <li><a title="" href="https://icejade1234.pixnet.net/blog" target="_blank">冰玉問路</a></li>
  <li><a title="" href="https://acelin.pixnet.net/blog" target="_blank">普照問路</a></li>
  <li><a title="" href="https://alwayslimitless.pixnet.net/blog" target="_blank">無涯問路</a></li>
  <li><a title="" href="https://horng0829.pixnet.net/blog" target="_blank">海問問路</a></li>
  <li><a title="" href="https://hongjieyou251.pixnet.net/blog" target="_blank">踏浪問路</a></li>
  <li><a title="" href="https://field26.pixnet.net/blog" target="_blank">心田問路</a></li>
  <li><a title="" href="https://violetvow.pixnet.net/blog" target="_blank">紫願問路</a></li>
  <li><a title="" href="https://firstsun.pixnet.net/blog" target="_blank">首陽問路</a></li>
  <li><a title="" 
href="https://karen999.pixnet.net/blog" target="_blank">如意問路</a></li>
  <li><a title="" 
href="https://genuine1990.pixnet.net/blog" target="_blank">真誠問路</a></li>
  <li><a title="" 
href="https://weismileattitude.pixnet.net/blog" target="_blank">百里問路</a></li>
  <li><a title="" 
href="https://sunmoon0109.pixnet.net/blog" target="_blank">永晝問路</a></li>
  <li><a title="" 
href="https://a127121107.pixnet.net/blog" target="_blank">伏波問路</a></li>
  <li><a title="" 
href="https://amour580702.pixnet.net/blog" target="_blank">北斗問路</a></li>
  <li><a title="" 
</ul>
</div>

發表迴響