※ 成果範例：
※ 範例實作：
1.建立page-layout_example專案：
2.建立基礎結構：index.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>Page Layout</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 最外層的包裝 ，將整個網頁內容包起來-->
<div class="wrapper">
<!-- Start header -->
<!-- 表頭 -->
<header class="header">
<div class="navbar"></div>
</header>
<!-- End header -->
<!-- Start main -->
<section class="main">
</section>
<!-- End main -->
<!-- Start footer -->
<footer class="footer">
</footer>
<!-- End footer -->
</div>
</body>
</html>
3.建立基礎樣式：style.css
/* container */
/* 置中版型容器 */
.container {
width: 992px;
margin: 0 auto;
display: block;
border: 1px solid #000;
height: 500px;
}
成果顯示：
※ 導覽列實作：
index.html：
<!-- 表頭 -->
<header class="header">
<div class="navbar">
<div class="container">
<p>Navbar content</p>
</div>
</div>
</header>
style.css：
/* container */
/* 置中版型容器 */
.container {
width: 992px;
margin: 0 auto;
display: block;
border: 1px solid #000;
height: 100%;
}
/* navbar */
.navbar {
height: 64px;
background-color: #ccc;
}
成果顯示：
※ section 1實作：
index.html：
<!-- Start main -->
<section class="main">
<!-- Start section 1 -->
<div class="jumbotron"></div>
<!-- End section 1 -->
</section>
<!-- End main -->
style.css：
/* jumbotron 電視牆*/成果顯示：
.jumbotron {
height: 640px;
background-color: #7d7dc5;
}
※ section 2實作：
index.html：
<!-- Start section 2 -->
<div class="hero">
<!-- 建立置中版型 -->
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae aliquid ex corrupti in consequuntur sed minus
omnis animi reprehenderit, quasi temporibus, reiciendis accusamus quos. Repellendus illo voluptatum rem non
doloribus?
</div>
</div>
<!-- End section 2 -->
style.css：
/* hero */
.hero {
padding-top: 80px;
padding-bottom: 80px;
border: 1px solid #000;
}
成果顯示：
※ 補充說明：jumbotron 和 hero section
說明：是用來吸引使用者注意、傳達關鍵訊息的視覺元素。
Hero Section（英雄區塊）：
- 放在網頁最上方，通常是首頁的第一個區塊。
- 用來展示品牌形象、主打產品、活動或重要訊息。
- 常搭配大圖背景、吸引人的標題、簡短描述和 CTA（Call to Action）按鈕。
- 通常佔滿整個螢幕寬度，有時甚至是全螢幕高度。
Jumbotron（Bootstrap 元件）：
- 是 Bootstrap 框架中的一個元件，用來快速建立醒目的內容區塊。
- 適合用來展示歡迎訊息、簡介、或重要提示。
- 預設有寬大的 padding 和字體，讓內容更突出。
※ 多欄式版型實作：
index.html：
<div class="hero">
<!-- 建立置中版型 -->
<div class="container">
<!-- Cmpt 1 -->
<div class="cmpt-1">
<div class="row">
<div class="col-1-2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores voluptate veritatis cumque nobis.
Molestias, ipsam itaque, officiis ipsa, veniam blanditiis ut accusantium vitae dolorum cupiditate
incidunt magnam nostrum inventore voluptate.</p>
</div>
<div class="col-1-2">
<div class="card"></div>
</div>
</div>
</div>
<!-- Cmpt 2 -->
<div class="cmpt-2">
<div class="row">
<div class="col-1-2">
<div class="card"></div>
</div>
<div class="col-1-2">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam adipisci quis velit nisi sapiente
fugiat! Officiis modi aliquid aliquam, ipsum velit animi numquam odit molestiae beatae adipisci. Nisi,
eos nobis!</p>
</div>
</div>
</div>
</div>
</div>
style.css：
/* grid: row and column */
.row {
/* 使用float排版 */
border: 1px solid blue;
/* 讓元件對齊 */
margin-left: -16px;
margin-right: -16px;
}
/* 清除浮動排版 */
.row:after {
content: '';
display: block;
clear: both;
}
/* 格線系統設定：分數表示型：三分之一 */
.col-1-2,
.col-1-3 {
float: left;
border: 1px solid red;
/* 取決於設計稿，做出間距 */
padding-left: 16px;
padding-right: 16px;
}
.col-1-2 {
width: 50%;
}
.col-1-3 {
width: 33.333333%;
}
/* card */
.card {
background-color: pink;
height: 480px;
}
/* 用元件一推出距離 */
.cmpt-1 {
margin-bottom: 80px;
}
成果顯示：
※ section 3實作：
index.html：
<!-- Start section 3 滿版 -->
<div class="container-fluid">
<!-- 中間不要有間距 -->
<div class="row row-collapse">
<div class="col-1-3">
<div class="card"></div>
</div>
<div class="col-1-3">
<div class="card"></div>
</div>
<div class="col-1-3">
<div class="card"></div>
</div>
</div>
</div>
<!-- End section 3 -->
style.css：
/* 置中版容器 */
.container {
width: 992px;
margin: 0 auto;
display: block;
border: 1px solid #000;
height: 100%;
/* 取決於設計稿 */
/* padding-left: 16px;
padding-left: 16px; */
}
/* 滿版型容器 */
.container-fluid {
display: block;
border: 1px solid #000;
height: 100%;
}
/* if you 不想要中間的間隔 */
.row-collapse .col-1-2,
.col-1-3 {
padding-left: 0;
padding-right: 0;
}
成果顯示：
※ section 4實作：
index.html：
<!-- Start section 4 -->
<div class="hero">
<div class="container">
<!-- Cmpt 3 -->
<div class="cmpt-3">
<div class="row">
<div class="col-1-2">
<div class="card"></div>
</div>
<div class="col-1-2">
<div class="card"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A iusto beatae dolorum voluptatum error
fugit odit, quae consequatur eum voluptatem. Veritatis provident vitae sunt architecto ratione?
Deleniti cumque vel rerum?</p>
</div>
</div>
</div>
<!-- Cmpt 4 -->
<div class="cmpt-4">
<div class="row">
<div class="col-1-2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam laborum fuga quam, fugiat dolores
beatae. Rem quo harum fugit officia, sequi quaerat, recusandae soluta nisi consequuntur eveniet ut,
dolores inventore.</p>
</div>
<div class="col-1-2">
<div class="card"></div>
</div>
</div>
</div>
</div>
</div>
<!-- End section 4 -->
style.css：
/* 設定向下間距 */
.cmpt-3 {
margin-bottom: 80px;
}
成果顯示：
※ footer實作：
index.html：
<!-- Start footer -->
<footer class="footer">
<div class="container">
Footer content
</div>
</footer>
<!-- End footer -->
style.css：
.footer {
height: 160px;
background-color: #7d7dc5;
}
成果顯示：
※ 固定navbar實作：
style.css：
.navbar {
height: 64px;
background-color: #ccc;
position: fixed;
z-index: 999;
width: 100%;
}
成果顯示：
