XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

1. 文章分為左右兩邊，約 9:3，左邊文字，右邊圖片
2. 快速語法： 
  ```bash
  .row>.col-md-9+.col-md-3
  ```
  
  可產生
  
   
  ```markup
  <div class="row">
    <div class="col-md-9">文章標題摘要</div>
    <div class="col-md-3">文章圖片</div>
  </div>
  ```
3. 填入測試內容，如： 
  ```markup
  <h3><a href="#">資訊組Line服務上線</a></h3>
  <p>撰稿、拍照：陳老師</p>
  <p>2023-06-30 點閱數：4</p>
  <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>
  ```
4. 插入圖片：
  
   
  ```markup
  <img src="圖片路徑" alt="">
  ```
5. 可加入 BootStrap5 的 `.img-thumbnail` （圖片縮圖），但只是為圖片加上圓角邊框，並不會真的縮圖，詳情請參考：<https://bootstrap5.hexschool.com/docs/5.0/content/images/#image-thumbnails>
  
   
  ```markup
  <img src="圖片路徑" alt="" class="img-thumbnail">
  ```
6. 若欲使之真的縮圖，所以，自行加入CSS語法控制之： 
  ```markup
  <img src="圖片路徑" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
  ```
  
  
  1. `object-fit` 用來做區塊填滿設定，常用值有 `cover`（將圖片塞滿可顯示空間）及 `contain`（在可顯示空間下顯示完整圖片），詳細可參考：<https://tools.wingzero.tw/article/sn/61>
  2. `height: 200px; `用來限定圖片高度。
7. 完整文章內容： 
  ```markup
  <div class="row">
    <div class="col-md-9">
      <h3><a href="#">資訊組Line服務上線</a></h3>
      <p>撰稿、拍照：陳老師</p>
      <p>2023-06-30 點閱數：4</p>
      <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>
    </div>
    <div class="col-md-3">
      <img src="https://blog.tcust.edu.tw/uploads/20230711/2b5498cf-a3d7-90ed-57aa-0048afb0bbaa.png" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
    </div>
  </div>
  ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器