XOOPS輕鬆架

用AI學PHP8
========

1. 打算在頁首放個插圖換個底色，把字變大，設定字型，加個外框。![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/header.png)
2. 要改變外觀，要編輯的是` style.css `樣式檔
 
### 一、加底圖

1. 底圖可以到這裡找： <https://www.cleanpng.com>，請將圖存入`images`（需自行建立資料夾）
2. 圖檔若比較大，請自行縮小即可，例如欲插入此圖（`play.png`）檔當背景：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/play.png)
3. 編輯 `style.css` 樣式檔，修改`.header`樣式 
    ```css
    /* 網頁部份 */
    .header {
        background: #bccc75 url('images/play.png') no-repeat 20% center;
        padding: 60px 0;
    }
    ```
 
 
### 二、改變標題文字外觀

1. 先跟AI講需求 
    ```markup
    請用CSS設定文字，需有白色外框，外框不可遮住文字本體，如果是大螢幕，希望文字以3.6rem顯示，框可以粗一點，如果是手機小螢幕，希望文字以 2rem顯示，框可以細一點。
    ```
2. 然後根據回應，編輯 `style.css` 樣式檔： 
    ```css
    .outlined-text {
      color: black; /* 文字顏色 */
      text-shadow: 
        -3px -3px 0 white,  
        3px -3px 0 white,
        -3px 3px 0 white,
        3px 3px 0 white;
      font-size: 3.6rem; /* 大螢幕的文字大小 */
    }
    
    /* 小螢幕設置 */
    @media (max-width: 768px) {
      .outlined-text {
        font-size: 2rem; /* 小螢幕的文字大小 */
        text-shadow: 
          -2px -2px 0 white,  
          2px -2px 0 white,
          -2px 2px 0 white,
          2px 2px 0 white;
      }
    }
    ```
3. 由於有新樣式，所以，要到 `templates/header.tpl` 套用之： 
    ```markup
    <header class="header mb-4">
        <div class="container">
            <h1 class="text-center outlined-text">{$webTitle}</h1>
        </div>
    </header>
    ```
4. 若要自己加字型（隨便挑一兩個即可），亦可[點此預覽字型](https://campus-xoops.tn.edu.tw/modules/tadtools/fonts.php)： 
    ```css
    /* 851電機文字 */
    @font-face {
      font-family: "851DianJiWenZiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/851DianJiWenZiTi.woff2) format("woff2");
    }
    
    /* 莫大毛筆字體 */
    @font-face {
      font-family: "Bakudai";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Bakudai.woff2) format("woff2");
    }
    
    /* 波塔 */
    @font-face {
      font-family: "BoTa";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BoTa.woff2) format("woff2");
    }
    
    /* 源流注音明體-粗體 */
    @font-face {
      font-family: "BpmfGenRyuMin-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenRyuMin-B.woff2) format("woff2");
    }
    
    /* 源流注音明體 */
    @font-face {
      font-family: "BpmfGenRyuMin-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenRyuMin-R.woff2) format("woff2");
    }
    
    /* 源石注音黑體-粗體 */
    @font-face {
      font-family: "BpmfGenSekiGothic-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSekiGothic-B.woff2) format("woff2");
    }
    
    /* 源石注音黑體 */
    @font-face {
      font-family: "BpmfGenSekiGothic-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSekiGothic-R.woff2) format("woff2");
    }
    
    /* 源泉注音圓體-粗體 */
    @font-face {
      font-family: "BpmfGenSenRounded-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSenRounded-B.woff2) format("woff2");
    }
    
    /* 源泉注音圓體 */
    @font-face {
      font-family: "BpmfGenSenRounded-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSenRounded-R.woff2) format("woff2");
    }
    
    /* 源雲注音明體 */
    @font-face {
      font-family: "BpmfGenWanMin-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenWanMin-R.woff2) format("woff2");
    }
    
    /* 源樣注音黑體-粗體 */
    @font-face {
      font-family: "BpmfGenYoGothic-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoGothic-B.woff2) format("woff2");
    }
    
    /* 源樣注音黑體 */
    @font-face {
      font-family: "BpmfGenYoGothic-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoGothic-R.woff2) format("woff2");
    }
    
    /* 源樣注音明體-粗體 */
    @font-face {
      font-family: "BpmfGenYoMin-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoMin-B.woff2) format("woff2");
    }
    
    /* 源樣注音明體 */
    @font-face {
      font-family: "BpmfGenYoMin-R";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoMin-R.woff2) format("woff2");
    }
    
    /* 字嗨注音標楷 */
    @font-face {
      font-family: "BpmfZihiKaiStd-Regular";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiKaiStd-Regular.woff2) format("woff2");
    }
    
    /* 字嗨注音黑體-粗體 */
    @font-face {
      font-family: "BpmfZihiSans-Bold";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSans-Bold.woff2) format("woff2");
    }
    
    /* 字嗨注音黑體 */
    @font-face {
      font-family: "BpmfZihiSans-Regular";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSans-Regular.woff2) format("woff2");
    }
    
    /* 字嗨注音宋體-粗體 */
    @font-face {
      font-family: "BpmfZihiSerif-Bold";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSerif-Bold.woff2) format("woff2");
    }
    
    /* 字嗨注音宋體 */
    @font-face {
      font-family: "BpmfZihiSerif-Regular";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSerif-Regular.woff2) format("woff2");
    }
    
    /* 粉筆體 */
    @font-face {
      font-family: "Chalk";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Chalk.woff2) format("woff2");
    }
    
    /* 超級細ゴシック體 */
    @font-face {
      font-family: "ChaoJiXi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ChaoJiXi.woff2) format("woff2");
    }
    
    /* 公司LOGO圓體 */
    @font-face {
      font-family: "CorpRound";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/CorpRound.woff2) format("woff2");
    }
    
    /* 黑板粉筆體 */
    @font-face {
      font-family: "Crayon";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Crayon.woff2) format("woff2");
    }
    
    /* 俐方體11號 */
    @font-face {
      font-family: "Cubic";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Cubic.woff2) format("woff2");
    }
    
    /* 豆豆體 */
    @font-face {
      font-family: "Doudouziti";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Doudouziti.woff2) format("woff2");
    }
    
    /* 王漢宗中仿宋 */
    @font-face {
      font-family: "HanWangFangSongMedium";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangFangSongMedium.woff2) format("woff2");
    }
    
    /* 王漢宗特黑體 */
    @font-face {
      font-family: "HanWangHeiHeavy";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangHeiHeavy.woff2) format("woff2");
    }
    
    /* 王漢宗細黑體 */
    @font-face {
      font-family: "HanWangHeiLight";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangHeiLight.woff2) format("woff2");
    }
    
    /* 王漢宗中楷注音 */
    @font-face {
      font-family: "HanWangKaiMediumChuIn";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangKaiMediumChuIn.woff2) format("woff2");
    }
    
    /* 王漢宗勘亭流 */
    @font-face {
      font-family: "HanWangKanTan";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangKanTan.woff2) format("woff2");
    }
    
    /* 王漢宗中隸書 */
    @font-face {
      font-family: "HanWangLiSuMedium";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangLiSuMedium.woff2) format("woff2");
    }
    
    /* 王漢宗超明體 */
    @font-face {
      font-family: "HanWangMingBlack";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangMingBlack.woff2) format("woff2");
    }
    
    /* 王漢宗魏碑體 */
    @font-face {
      font-family: "HanWangWeBe";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangWeBe.woff2) format("woff2");
    }
    
    /* 王漢宗特圓體 */
    @font-face {
      font-family: "HanWangYenHeavy";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangYenHeavy.woff2) format("woff2");
    }
    
    /* 王漢宗細圓體 */
    @font-face {
      font-family: "HanWangYenLight";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangYenLight.woff2) format("woff2");
    }
    
    /* 王漢宗綜藝體 */
    @font-face {
      font-family: "HanWangZonYi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangZonYi.woff2) format("woff2");
    }
    
    /* 漢字筆順體原版 */
    @font-face {
      font-family: "HanZiBiShunZiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanZiBiShunZiTi.woff2) format("woff2");
    }
    
    /* 衡山毛筆草書 */
    @font-face {
      font-family: "HengShanMaoBiCaoShu";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HengShanMaoBiCaoShu.woff2) format("woff2");
    }
    
    /* 刻石錄顏體 */
    @font-face {
      font-family: "I-Ngaan";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/I-Ngaan.woff2) format("woff2");
    }
    
    /* 刻石錄鋼筆鶴體 */
    @font-face {
      font-family: "I-PenCrane-B";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/I-PenCrane-B.woff2) format("woff2");
    }
    
    /* 芫荽體 */
    @font-face {
      font-family: "Iansui";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Iansui.woff2) format("woff2");
    }
    
    /* 清松手寫體1 */
    @font-face {
      font-family: "JasonHandwriting1";
      src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting1-Regular.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting1-Regular.woff) format("woff");
    }
    
    /* 清松手寫體2 */
    @font-face {
      font-family: "JasonHandwriting2";
      src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting2-Regular.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting2-Regular.woff) format("woff");
    }
    
    /* 清松手寫體3 */
    @font-face {
      font-family: "JasonHandwriting3";
      src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting3-Regular.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting3-Regular.woff) format("woff");
    }
    
    /* 清松手寫體4 */
    @font-face {
      font-family: "JasonHandwriting4";
      src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting4-Regular.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting4-Regular.woff) format("woff");
    }
    
    /* jf open 粉圓 */
    @font-face {
      font-family: "JfOpenhuninn";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/JfOpenhuninn.woff2) format("woff2");
    }
    
    /* jf open 粉圓 */
    @font-face {
      font-family: "jf-openhuninn";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/JfOpenhuninn.woff2) format("woff2");
    }
    
    /* 解星 B */
    @font-face {
      font-family: "KaiseiTokumin";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
    }
    
    /* 荊南麥圓體 */
    @font-face {
      font-family: "KingnamMaiyuan";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KingnamMaiyuan.woff2) format("woff2"),
      url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KingnamMaiyuan.woff) format("woff");
    }
    
    /* 苦累蛙圓體 */
    @font-face {
      font-family: "Kurewa";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Kurewa.woff2) format("woff2");
    }
    
    /* Mamelon字體 */
    @font-face {
      font-family: "Mamelon";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Mamelon.woff2) format("woff2");
    }
    
    /* Mamelon新版字體 */
    @font-face {
      font-family: "MamelonHi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/MamelonHi.woff2) format("woff2");
    }
    
    /* 正風毛筆字體（衡山毛筆行書） */
    @font-face {
      font-family: "MasaFont";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/MasaFont.woff2) format("woff2");
    }
    
    /* 內海字體 */
    @font-face {
      font-family: "NaikaiFont";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/NaikaiFont.woff2) format("woff2");
    }
    
    /* 馬克筆手寫體 */
    @font-face {
      font-family: "NishikiTeki";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/NishikiTeki.woff2) format("woff2");
    }
    
    /* 胖胖豬肉體 */
    @font-face {
      font-family: "PangPangZhuRouTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PangPangZhuRouTi.woff2) format("woff2");
    }
    
    /* 破碎零號字 */
    @font-face {
      font-family: "PoSuiLingHaoZi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PoSuiLingHaoZi.woff2) format("woff2");
    }
    
    /* 大波浪圓體 */
    @font-face {
      font-family: "PopGothicCjkJp";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PopGothicCjkJp.woff2) format("woff2");
    }
    
    /* 千圖馬克手寫體 */
    @font-face {
      font-family: "QianTuMaKeShouXieTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/QianTuMaKeShouXieTi.woff2) format("woff2");
    }
    
    /* 黒薔薇 */
    @font-face {
      font-family: "Qiang";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Qiang.woff2) format("woff2");
    }
    
    /* 青柳隷書 */
    @font-face {
      font-family: "QingLiuShu";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/QingLiuShu.woff2) format("woff2");
    }
    
    /* 隨峰體 */
    @font-face {
      font-family: "SuiFengTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SuiFengTi.woff2) format("woff2");
    }
    
    /* 獅尾詠腿黑體 */
    @font-face {
      font-family: "SweiFistLegCJKjp";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SweiFistLegCJKjp.woff2) format("woff2");
    }
    
    /* 獅尾四季春 */
    @font-face {
      font-family: "SweiSpringSugarCJKtc";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SweiSpringSugarCJKtc.woff2) format("woff2");
    }
    
    /* 獅尾牙膏圓體 */
    @font-face {
      font-family: "SweiToothpasteCJKtc";
      src: url(https://cdn.jsdelivr.net/gh/max32002/swei-toothpaste@2.0/WebFont/CJK%20TC/SweiToothpasteCJKtc-Regular.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/gh/max32002/swei-toothpaste@2.0/WebFont/CJK%20TC/SweiToothpasteCJKtc-Regular.woff) format("woff");
    }
    
    /* 糖果手寫粗體 */
    @font-face {
      font-family: "TanugoTangGuoShouXieTiBold";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/TanugoTangGuoShouXieTiBold.woff2) format("woff2");
    }
    
    /* 糖果手寫體 */
    @font-face {
      font-family: "TanugoTangGuoShouXieTiRegular";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/TanugoTangGuoShouXieTiRegular.woff2) format("woff2");
    }
    
    /* たぬき油性マジック */
    @font-face {
      font-family: "Tanukimagic";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Tanukimagic.woff2) format("woff2");
    }
    
    /* 鵪鶉字體 */
    @font-face {
      font-family: "UzuraZiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/UzuraZiTi.woff2) format("woff2");
    }
    
    /* 無心手寫體 */
    @font-face {
      font-family: "WuXinShouXieTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/WuXinShouXieTi.woff2) format("woff2");
    }
    
    /* 賢二體 */
    @font-face {
      font-family: "XianErTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/XianErTi.woff2) format("woff2");
    }
    
    /* 字體圈欣意冠黑體 */
    @font-face {
      font-family: "XinYiGuanHeiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/XinYiGuanHeiTi.woff2) format("woff2");
    }
    
    /* YOz手寫體 */
    @font-face {
      font-family: "YOzShouXieTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YOzShouXieTi.woff2) format("woff2");
    }
    
    /* 英椎行書 */
    @font-face {
      font-family: "YingZhuiXingShu";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YingZhuiXingShu.woff2) format("woff2");
    }
    
    /* 佑字 */
    @font-face {
      font-family: "YouZi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YouZi.woff2) format("woff2");
    }
    
    /* 源影黑體 */
    @font-face {
      font-family: "YuanYingHeiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YuanYingHeiTi.woff2) format("woff2");
    }
    
    /* 宅在家粉條甜 */
    @font-face {
      font-family: "ZhaiZaiJiaFenTiaoTian";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaFenTiaoTian.woff2) format("woff2");
    }
    /* 宅在家粉條甜 */
    @font-face {
      font-family: "ZhaiZaiJiaFenTiaoTian";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaFenTiaoTian.woff2) format("woff2");
    }
    
    /* 宅在家麥克筆 */
    @font-face {
      font-family: "ZhaiZaiJiaMaiKeBi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaMaiKeBi.woff2) format("woff2");
    }
    
    /* 宅在家自動筆 */
    @font-face {
      font-family: "ZhaiZaiJiaZiDongBi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaZiDongBi.woff2) format("woff2");
    }
    
    /* 佐佐木字體 */
    @font-face {
      font-family: "ZuoZuoMuZiTi";
      src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZuoZuoMuZiTi.woff2) format("woff2");
    }
    ```
5. <span id="cke_bm_2891S" style="display: none;"> </span>例如欲套用「解星 B」，則編輯 `style.css` 樣式檔：
    
     
    ```css
    ...略...
    
    /* 解星 B */
    @font-face {
        font-family: "KaiseiTokumin";
        src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
    }
    .outlined-text {
        /* 文字字型 */
        font-family: "KaiseiTokumin";
        color: black;
        /* 文字顏色 */
        text-shadow:
            -3px -3px 0 white,
            3px -3px 0 white,
            -3px 3px 0 white,
            3px 3px 0 white;
        font-size: 3.6rem;
        /* 大螢幕的文字大小 */
    }
    
    ...略...
    ```
6. 最後的 `style.css `樣式檔內容： 
    ```css
    /* 主樣板樣式 */
    .header {
        background: #bccc75 url("images/play.png") no-repeat 20% center;
        padding: 60px 0;
    }
    
    /* 標題樣式 */
    
    /* 解星 B */
    @font-face {
        font-family: "KaiseiTokumin";
        src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
    }
    
    .outlined-text {
        font-family: KaiseiTokumin;
        color: black;
        /* 文字顏色 */
        text-shadow: -3px -3px 0 white, 3px -3px 0 white, -3px 3px 0 white,
            3px 3px 0 white;
        font-size: 3.6rem;
        /* 大螢幕的文字大小 */
    }
    
    /* 小螢幕設置 */
    @media (max-width: 768px) {
        .outlined-text {
            font-size: 2rem;
            /* 小螢幕的文字大小 */
            text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
                2px 2px 0 white;
        }
    }
    
    /* 輪播圖樣式 */
    
    .thumbnail-container {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }
    
    .thumbnail-container::-webkit-scrollbar {
        width: 6px;
    }
    
    .thumbnail-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .thumbnail-container::-webkit-scrollbar-thumb {
        background: #888;
    }
    
    .thumbnail-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    .thumbnail {
        opacity: 0.5;
        transition: opacity 0.3s;
        cursor: pointer;
    }
    
    .thumbnail:hover {
        opacity: 0.8;
    }
    
    .thumbnail.active {
        opacity: 1;
        border: 2px solid blue;
    }
    
    #mainImage {
        width: 100%;
        height: auto;
    }
    ```

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域