###### tags: `六角筆記王` `前端筆記` `HTML` `CSS`
# 開發多頁式網站實戰
## 環境架設

本例總共有三頁(首頁、自界、問與答)

1.先做首頁 index.html

<div class="wrap">/*外容器*/
  <div class="header"></div>/*表頭*/
  <div class="contant">/*內容*/
      首頁內容
  </div>
  <div class="footer"></div>/*表尾*/
</div>

.wrap{
    width: 500px;
    margin: 0 auto;
}
.header{
    height: 50px;
    background: orange;
}
.content{
    padding: 30px;
}
.footer{
    height: 50px;
    background: pink;
}

2.如何連接到其他頁->在header下li>a

<div class="header">
  <ul>
      <li><a href="index.html">首頁</a></li>
      <li><a href="course.html">課程</a></li>
      <li><a href="faq.html">問答</a></li>
  </ul>
</div>

3.接著再如法炮製課程頁面course.html、問答頁面faq.html，只需把`content` 內容改一下就好

## Layout (佈局)

該如何規劃

1.可以先寫一個layout.html，他只拿來當模板

2.像表頭表尾都不會變就可以固定

## 保持網頁靈活彈性的技巧

1.高度不要寫死！

在`content` 內容的部分，可能會不盡相同，所以不要寫死高度，讓他自己延伸

在`header`表頭、`footer`表尾的部分，因為內容都相同，可以把高度寫死。

適合加上高度的標籤例如 img 或是顏色區塊

2.內容用padding去加留白

## 多頁式CSS 管理方法

1.只要用同個css的管理，從外部抓的css才會另外放一個(font awesome、hover.css)

2.寫css的順序

css reset>layout的css(wrap、header)>課程頁的css(list、a)>問答頁的css(h3、a)

## 總結

1.先設計網頁、切圖

2.規劃你的佈局 layout

3.CSS 寫在一起(css reset、佈局css、index、course、faq)