:::

6-4 區塊標題技法

一、後台設定技法

  1. 後台佈景設定中的區塊設定可對每個區域的區塊調整標題外觀
  2. 若是想調整成這樣:
  3. 則可照著以下內容設定:
  4. 邊框產生器:http://border-image.com
  5. 範例圖:
  6. CSS樣式屬性以及可用的值可從這裡查詢: http://css.doyoe.com
  7. 文字陰影產生器:https://www.we-shop.net/css3/text-shadow.html
  8. 建議的「區塊整體樣式」指的就是「整個區塊」的外觀:
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 6px;
    padding: 0px;
    margin:0px 0px 20px;

    花邊框範例

    border-style: solid; 
    border-width: 21px 27px 27px 24px; 
    border-image: url(https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/b.png) 21 27 27 24 fill repeat;
    margin-bottom: 3rem;
    

     

  9. 建議的「區塊標題樣式」指的就是「區塊標題」的外觀:
    padding: 6px; 
    text-align:center;
    font-family: 微軟正黑體;
    background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
    /* text-shadow: -1px -1px 0 #2e2e2e, 1px 1px 0 #d2d2d2; */
    text-shadow: 0px 1px #0d4e5c, 1px 0px #0d4e5c, -1px 0px #0d4e5c, 0px -1px #0d4e5c, -1px -1px #0d4e5c, 1px 1px #0d4e5c, 1px -1px #0d4e5c, -1px 1px #0d4e5c;

     

  10. 建議的「區塊內容樣式」指的就是「區塊內容」的外觀
    padding: 5px 0px 10px;

     

二、特殊技法

  1. 注意!並非所有佈景都支援此功能。(所有有支援 tad_theme 的佈景都有支援)
  2. 以圖片取代區塊標題:「區塊標題[pic]http://圖片網址
  3. 以圖片取代區塊標題(並套用區塊標題設定):「區塊標題[img]http://圖片網址
  4. 加入小插圖:「區塊標題[icon]http://圖片網址
  5. 藏區塊標題:「區塊標題[hide]
  6. 加入連結:「區塊標題[link]http://網址
  7. 向量圖示:http://www.flaticon.comhttp://emojione.com/下載所有圖檔
  8. 搜尋圖示:http://findicons.com

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D317

計數器

今天: 1475147514751475
昨天: 3438343834383438
總計: 7391804739180473918047391804739180473918047391804