準備首頁 index.html 檔案及 layout.css 檔案
準備<head>區域中連結及載入的檔案
<title>Timothy保養品</title>
<!-- 網頁頁籤標題左側顯示的圖示ICON -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- 書籤收藏夾顯示的圖示ICON -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Bootstrap v5.1.1 CSS 檔案的連結 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<!-- Bootstrap v5.1.1 JS 檔案的載入(包含popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<!-- jQuery 函式庫檔案的載入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 將需要設計的 CSS 樣式撰寫在 layout.css檔案 -->
<link rel="stylesheet" href="layout.css">
準備首頁第一層框架
<body>
<section id="sec1"> </section>
<section id="sec2"> </section>
<section id="sec3"> </section>
<section id="sec4"> </section>
<section id="sec5"> </section>
</body>
準備每一層框架中的基本元素
<section id="sec2">
<h1>New Product</h1>
</section>
<section id="sec3">
<h1>商品推薦</h1>
</section>
<section id="sec4">
<h1>保養有道</h1>
</section>
<section id="sec5">
<h1>聯絡我們</h1>
<footer class="bg-dark">
Copyright © 2021 Timothy Care Web | 建議使用 Chrome 瀏覽器 | Maintain by TS
</footer>
</section>
設計 CSS 樣式
- 匯入 google font web 字體
- 設計整頁文字的預設大小及字體
- 設計 body 的背景
- 讓每一個 section 的最小高度為一個螢幕的大小，並且設計背景影像
- 設計標題1的樣式
WEB