:::

3-2-3 顯示頁面 index.html 初步完成

  1. 目前顯示頁面看起來像這樣:
  2. index.html 完整語法範例:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>校園日誌</title>
        <link
          href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet"
        />
    
        <link href="/css/style.css" rel="stylesheet" />
        <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <link
          href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
          rel="stylesheet"
        />
      </head>
      <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-my-blue mb-5">
          <div class="container">
            <a class="navbar-brand" href="/"
              ><img
                src="https://campus-xoops.tn.edu.tw/uploads/logo/210105122929.png"
                alt="校園日誌"
            /></a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">榮譽榜</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">傑出校友</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">校園新聞</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">海外交流</a>
                </li>
              </ul>
    
              <form class="d-flex">
                <div class="input-group">
                  <input
                    class="form-control border border-end-0"
                    type="search"
                    placeholder="搜尋文章"
                  />
                  <button class="btn bg-white border border-start-0" type="button">
                    <i class="fas fa-search"></i>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </nav>
    
        <div class="container">
          <div class="row">
            <div class="col-md-9">
              <div class="card mb-3 border border-5 border-bottom-0 border-start-0 border-end-0 py-4">
                <div class="row g-0">
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">
                        <a href="#">耶誕派對歡樂滿點 失智長輩笑開懷</a>
                      </h5>
                      <p class="card-text">
                        <small
                          >撰稿:秘書室文宣公關組 徐瑩芷;拍照:秘書室文宣公關組
                          徐瑩芷、護五二乙 林冠羽、護四一丙 紀靜宜
                        </small>
                      </p>
                      <p class="card-text">
                        <small class="text-muted"
                          >2020-12-25 <i class="far fa-eye"></i> 100
                        </small>
                      </p>
                      <p class="card-text">
                        「耶誕快樂!來呷糖仔喔!」咦?竟然有91歲的正港耶誕「老公公」發糖果!原來是瑞智憶學苑舉辦耶誕派對,不只有阿公穿上全套耶誕老公公裝,老人家們都戴上鮮紅色的耶誕圖樣口罩,甚至穿上紅色外套、毛衣、圍巾應景,歡唱「慢板」的耶誕歌曲、互送交換禮物,充滿濃濃的耶誕氣息。除了校內的失智社區服務據點瑞智憶學苑的18位老人家,還有秀林
                        ...
                      </p>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <a href="#">
                      <img
                        src="https://blog.tcust.edu.tw/uploads/20201225/e3426bf0-db8d-461a-9930-108c81b8c0ef.jpg"
                        alt="耶誕派對歡樂滿點 失智長輩笑開懷"
                        class="img-fluid img-thumbnail"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3">
              <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" aria-current="true">
                  2021<span class="badge bg-success rounded-pill">2</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  2020<span class="badge bg-success rounded-pill">485</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  2019<span class="badge bg-success rounded-pill">709</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                  2018<span class="badge bg-success rounded-pill">610</span>
                </a>
                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center disabled" tabindex="-1" aria-disabled="true">
                  2017<span class="badge bg-success rounded-pill">636</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    

     

  3. css/style.css完整語法範例:
    * {
      font-family: 微軟正黑體;
    }
    
    .nav-link{
      font-size: 1.2rem;
    }
    
    .bg-my-blue{
      background-color: #3D81BB;
    }
    
    a {
      text-decoration: none;
    }

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1785

計數器

今天: 4192419241924192
昨天: 5069506950695069
總計: 5134640513464051346405134640513464051346405134640