Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Landing Page 實作:來做個簡單的Jumbotron

製作jumbotron有兩個重點

  1. 垂直置中
  2. 設定背景。

Background

  • 設定position: center bottom讓圖片顯示出需要的區塊
  • 使用background-size: cover;讓圖片滿版
section.intro{
  padding: $baseline * 2;
  background-image: url('../images/intro-bg.jpg') ;
  background-position: center bottom;
  height: 100%;
  width: 100%;
  -moz-background-size :cover ;
  -webkit-background-size :cover ;
  background-size: cover;
  background-attachment: scroll;
}

複習背景的用法

背景的屬性:

  • background-repeat,常用的是no-repeat
  • background-attachment,有fixed和scroll兩種,fixed圖片不會動,只有轉的空間會動。
  • background-position

left 為水平靠左, right 為水平靠右, top 為垂直置頂, bottom 為垂直置底center 則是水平或垂直都置中。

前後需設定兩組,若是數字或百分比前為水平後為垂直,若是關鍵字則順序無關,例如

background-position: 25% 50%;      /* 水平 25% ,垂直 50% */
background-position: 50px 25px;    /* 水平 50px ,垂直 25px */
background-position: center;       /* 水平垂直都 50% */
background-position: bottom right; /* 水平 100% ,垂直 100% */

使用Table-cell水平置中

  1. 外層display設成table
  2. 內層display設成table-cell,並加上vertical-align: middel即可

這種方法的優點是用起來很簡單,缺點是會增加html複雜度。

<section class="intro">
  <div class="intro-body">
    <div class="container t-padding">
      <div class="row text-center">
        <div class="col-md-8 col-md-offset-2">
          <h1>welcome</h1>
          <h3><strong>Digital Agency</strong> is here all of your technology, advertising, SEO and marketing needs.</h3>
        </div><!-- col-md-8 offset-2 -->
      </div><!-- row -->
    </div><!-- container -->
  </div><!-- intro-body -->
</section><!-- intro -->
.intro{
  display: table;
}

.intro-body{
  display: table-cell;
  vertical-align: middle;
}

置中小整理

  1. table-cell可以用在jumbotron這種結構較單純的區塊上,因為使用這種方式會增加html的複雜度。
  2. 單行多個置中可以使用偽元素的技巧
  3. css3的技巧雖然很方便,但支援度可以能沒那麼高。
  4. 行高的技巧簡單易用,但只能用在文字上。