CSS入門:製作一個含有header, footer的簡易頁面

Table of Contents

Table of Contents

CSS對於網頁設計的人來說是不可或缺的工具,要達到妥善運用CSS的境界,基本功必然是要扎實才行。

一直以來都是套用已有的CSS框架像是Bootstrap, Bulma, UIKit...等等, 對於一些基本的CSS用法是一知半解的狀態。 為了鍛鍊自己的基本功,除了翻查語法手冊外,多模仿&參考各家網站的設計應該是一件相當有益的方式。 因此,這次先從普遍常有的頁面開始著手練習,重新認識文字,圖片的位置設定方式。

Contents

  • Result
  • 製作要點
    • div要素水平置中
    • 文字要素置中
    • 圖片要素水平置中
  • 參考
  • 後感


Result

製作完成的頁面如下。 如同一般常見的頁面,整體的頁面分成header, main, footer三個部分。



製作要點

簡單介紹div要素,文字要素,圖片要素的置中方法與注意點。

div要素的水平置中

width: 60%;
margin: 0 auto;

使用此法時,需要設定div要素的width才有效。


文字要素的置中

水平置中
方法1: 將文字要素的部分用一個div包起來,在用上面介紹的div要素的橫軸方向置中的方式。


方法2: 文字要素如<h1>, <p>等,使用text-align來做設定。

text-align: center;

全置中

.flex-center {
  display: flex;
  justify-content: center; //水平置中
  align-items: center; //垂直置中
  height: 400px;
  border: 3px solid green; 
}

文字的垂直置中的方法好像沒有想像中的簡單,以上的做法需要將要置中的文字要素放到一個<div>中,然後對<div>來做CSS設定。

<div class="flex-center">
  <div>
    <p>This is a flex-center example</p>
    <ul>
      <li>Javascript</li>
      <li>CSS</li>
      <li>HTML</li>
    </ul>
  </div>
</div>

圖片要素的水平置中

img {
  margin: 0 auto;
  display: block;
}

可以使用margin來實現,但使用此法時,圖片的display屬性必須設定為 block



參考



後感

文字要素的全置中 方式似乎可以應用的場合較多,因此這個方法相對來說比較實用一些。

但每個方法有其限制,似乎沒有一個十全十美的方法,所以網路上也有很多其他的設定方式。我想在不同的設計要求下,使用符合要求的方式來設定才是最為重要的。因此多學一項的設定方式,也就多一種設定選項以備使用才是最為萬全的作法。