2015-06-04所有文章 Luka

練習：使用SASS開發Portfolio (1) Header 與 Footer

往下捲動時仍然會固定在上方

幫header加上position: fixed可以做到這個效果。透明的效果則是使用background: rgba(0, 0, 0, 0.8)。

這邊使用的水平置中技巧是使用CSS 垂直置中的3種方法中的**設定行高(line-height)**的方法。

而行高我們可以在_typography.scss中統一設置，typography.scss顧名思義就是用來處理一些排版的問題，常見的設定有body、anchor、paragraph和header等等常用到的東西。如果沒有使用scss的習慣，可以利用註解區隔出一個專門處理排版的區域。

body {
	color: $color-text;
	font: $body-font-size~"/"$baseline $body-font;

	-webkit-font-smoothing: antialiased;
}

font 的使用方法可以看看CSS官方文件

1 2	`/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif }`

第一個欄位為font-size，而第二個則為行高。但其實我們不是完全的利用行高來達成，還有設定header的padding來幫助我們實現置中。因為要置中的不全部是文字，還有其他的元素例如ul需要考慮。

我們要把信封圖案置中並且讓信封圖案在背景的中間。還未做任何修飾的時候如下：

要怎麼做重疊的效果呢？很簡單，把下方的.section-subscribe加上負的margin即可。

1
2
3

.section-subscribe{
	margin-top: -18px;
}

加上後的效果如下：

我想讓段落分行並置中，所以我要做兩件事情：第一件事情是我要設定段落的寬度為65%第二件事情我要利用margin來讓段落置中。想要做到的效果：

.section-subscribe{
  p{
    margin: 0 auto;
    color: #fff;
    width: 65%;
  }
}

需要注意是display為block才能使用margin:auto的方式置中。

標題列(Header)